Styjun

I'm having a problem plotting points from a geoJSON file over a map using D3.js. The map is rendering fine, but the points are not showing up. I'm not receiving any error messages at this time.

I'm following along with this tutorial but using my own geoJSON file to plot the data.

This is what I have:

 var width = 960,
 height = 500;

 var svg = d3.select("body")
 .append("svg")
 .attr("width", width)
 .attr("height", height);

 var g = svg.append("g");

 var projection = d3.geoAlbers()
 .scale(1000)
 .translate([width / 2, height / 2]);

 var path = d3.geoPath()
 .projection(projection);

 d3.queue()
 .defer(d3.json, 'states.json') // Load US States
 .defer(d3.json, 'trump_geoJson.json') // Load tweet lat/long data 
 .await(makeMyMap); // Run 'ready' when JSONs are loaded

 function makeMyMap(error,states,tweets) 
 svg.append('path')
 .datum(topojson.feature(states, states.objects.usStates))
 .attr('d', path)
 .attr('class', 'states');
 svg.selectAll('.tweets')
 .data(tweets.features)
 .enter()
 .append('path')
 .attr('d',path)
 .attr('class', 'tweets');
 

I'm expecting about 600 points to be plotted, but getting none.

The json file trump_geoJson looks like:

{
"type": "FeatureCollection",
"features": [
 
 "type": "Feature",
 "id": 0,
 "properties": 
 "primary_geo": "Utah, USA",
 "tag": "#Bernie",
 "text": "text",
 "user_id": "id"
 ,
 "geometry": 
 "type": "Point",
 "coordinates": [
 39.32373809814453,
 -111.67823791503906
 ]
 
 ,
 
 "type": "Feature",
 "id": 1,
 "properties": 
 "primary_geo": "New York, NY",
 "tag": "#Bernie",
 "text": "text",
 "user_id": "id"
 ,
 "geometry": 
 "type": "Point",
 "coordinates": [
 40.71455001831055,
 -74.00714111328125
 ]
 
 ,... ]

Your geojson uses the wrong coordinate convention. You have:

"coordinates": [ latitude, longitude ]

But, you must use:

"coordinates": [ longitude, latitude ]

From the spec:

Point coordinates are in x, y order (easting, northing for projected
coordinates, longitude, and latitude for geographic coordinates)

It is funny that the spec considers eastings and northings for projected coordinates given the spec also states geojson must use unprojected (lat/long) coordinates using the WGS84 datum

Here's a demo of the first two items in your geojson feature collection:

var data = 
 "type": "FeatureCollection",
 "features": [
 
 "type": "Feature",
 "geometry": 
 "type": "Point",
 "coordinates": [-111.6782379150,39.32373809814]
 
 ,
 
 "type": "Feature",
 "geometry": 
 "type": "Point",
 "coordinates": [-74.00714111328,40.71455001831]
 
 ];
 

var width = 500,
height = 300;

var svg = d3.select("body")
 .append("svg")
 .attr("width", width)
 .attr("height", height);
var projection = d3.geoAlbers()
 .scale(600)
 .translate([width / 2, height / 2]);

var path = d3.geoPath()
 .projection(projection);

d3.json("https://unpkg.com/world-atlas@1/world/110m.json", function(error, world) 
 if (error) throw error;

 svg.append("path")
 .attr("d", path(topojson.mesh(world)))
 .attr("fill","none")
 .attr("stroke","black")
 .attr("stroke-width",1);
 
 svg.selectAll('.tweets')
 .data(data.features)
 .enter()
 .append('path')
 .attr('d',path)
 .attr('class', 'tweets');
 
 
);

 .tweets 
 fill: red;
 opacity: 0.7;
 

<script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src="https://d3js.org/d3-queue.v2.min.js"></script>