Why is this geojson not rendering with D3? - d3.js

Question

I am trying to create a visualization from US county related data. When I use the json data set in online validators and tools the counties render fine. But when I try to render a basic map the screen comes up blank. The svg paths are appended to the svg and their d attribute value looks appropriate to me, here is an example path (corresponding to the first object in the features array in the below listed json):
<path d="M-85.388717,33.913044L-85.391495,33.927068L-85.398837,33.964129L-85.407637,33.964204L-85.407831,33.960548L-85.425444,33.960645L-85.425627,33.957069L-85.495289,33.95691L-85.49582,33.942394L-85.530094,33.941423L-85.531812,33.903049L-85.532482,33.889152L-85.597063,33.889703L-85.601858,33.88975L-85.601913,33.875101L-85.601899,33.874865L-85.637014,33.875944L-85.637012,33.875273L-85.637126,33.846497L-85.636882,33.846495L-85.585201,33.84592L-85.585985,33.802095L-85.603391,33.802344L-85.603465,33.788474L-85.603469,33.787755L-85.62089,33.787944L-85.621019,33.782331L-85.621245,33.773508L-85.638049,33.773339L-85.638586,33.649158L-85.638579,33.648413L-85.64704,33.648772L-85.64719,33.641529L-85.651283,33.64157L-85.651295,33.637972L-85.655549,33.638127L-85.65581,33.627166L-85.674932,33.627254L-85.690684,33.627789L-85.690716,33.625105L-85.69014,33.615815L-85.689954,33.612909L-85.723074,33.613505L-85.72365,33.613491L-85.72367,33.613492L-85.724953,33.613539L-85.724517,33.59943L-85.737379,33.599823L-85.742202,33.600002L-85.742348,33.586553L-85.744118,33.556075L-85.796054,33.55622L-85.796852,33.541849L-85.849839,33.49969L-85.85189,33.498742L-85.852421,33.491644L-85.869308,33.491574L-85.870053,33.476757L-85.887675,33.476768L-85.887782,33.469427L-85.782735,33.469349L-85.782689,33.483638L-85.781244,33.483625L-85.765631,33.483477L-85.765308,33.496862L-85.765427,33.498593L-85.740983,33.498376L-85.680346,33.496623L-85.66722,33.496293L-85.643482,33.495885L-85.627835,33.495624L-85.623645,33.495373L-85.623387,33.495371L-85.565653,33.494992L-85.563763,33.495081L-85.539922,33.494743L-85.527515,33.494608L-85.52513,33.494781L-85.51731,33.494524L-85.501645,33.494456L-85.497455,33.494624L-85.355315,33.49248L-85.352573,33.492438L-85.352576,33.494538L-85.354491,33.498866L-85.351594,33.4996L-85.349958,33.501216L-85.346705,33.501148L-85.344923,33.497608L-85.342544,33.495961L-85.33828,33.4947L-85.331061,33.491014L-85.324856,33.489161L-85.320893,33.488359L-85.316028,33.488267L-85.314852,33.487603L-85.30925,33.483137L-85.308211,33.481579L-85.304439,33.482884L-85.313999,33.529807L-85.314091,33.530218L-85.314843,33.534951L-85.314994,33.535898L-85.31534,33.537646L-85.323792,33.580339L-85.342722,33.675953L-85.344054,33.682684L-85.355252,33.739245L-85.357402,33.750104L-85.360491,33.767958L-85.361844,33.773951L-85.364595,33.788446L-85.376403,33.850656L-85.377426,33.856047L-85.379455,33.866291L-85.380885,33.873508Z"></path>
But, visually there is nothing. I checked adding fill and stroke values, with no results. I also tried scaling the paths up to see if they were rendering too small, the size increased, and the browser dev tools showed a large size, but visually we still have a blank area.
Here is the code I am using to try and produce the map:
./corrected.json
{
"type": "FeatureCollection",
"features": [
{ "type": "Feature", "properties": { "GEO_ID": "0500000US01029", "STATE": "01", "COUNTY": "029", "NAME": "Cleburne", "LSAD": "County", "CENSUSAREA": 560.100000 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -85.388717, 33.913044 ], [ -85.380885, 33.873508 ], [ -85.379455, 33.866291 ], [ -85.377426, 33.856047 ], [ -85.376403, 33.850656 ], [ -85.364595, 33.788446 ], [ -85.361844, 33.773951 ], [ -85.360491, 33.767958 ], [ -85.357402, 33.750104 ], [ -85.355252, 33.739245 ], [ -85.344054, 33.682684 ], [ -85.342722, 33.675953 ], [ -85.323792, 33.580339 ], [ -85.315340, 33.537646 ], [ -85.314994, 33.535898 ], [ -85.314843, 33.534951 ], [ -85.314091, 33.530218 ], [ -85.313999, 33.529807 ], [ -85.304439, 33.482884 ], [ -85.308211, 33.481579 ], [ -85.309250, 33.483137 ], [ -85.314852, 33.487603 ], [ -85.316028, 33.488267 ], [ -85.320893, 33.488359 ], [ -85.324856, 33.489161 ], [ -85.331061, 33.491014 ], [ -85.338280, 33.494700 ], [ -85.342544, 33.495961 ], [ -85.344923, 33.497608 ], [ -85.346705, 33.501148 ], [ -85.349958, 33.501216 ], [ -85.351594, 33.499600 ], [ -85.354491, 33.498866 ], [ -85.352576, 33.494538 ], [ -85.352573, 33.492438 ], [ -85.355315, 33.492480 ], [ -85.497455, 33.494624 ], [ -85.501645, 33.494456 ], [ -85.517310, 33.494524 ], [ -85.525130, 33.494781 ], [ -85.527515, 33.494608 ], [ -85.539922, 33.494743 ], [ -85.563763, 33.495081 ], [ -85.565653, 33.494992 ], [ -85.623387, 33.495371 ], [ -85.623645, 33.495373 ], [ -85.627835, 33.495624 ], [ -85.643482, 33.495885 ], [ -85.667220, 33.496293 ], [ -85.680346, 33.496623 ], [ -85.740983, 33.498376 ], [ -85.765427, 33.498593 ], [ -85.765308, 33.496862 ], [ -85.765631, 33.483477 ], [ -85.781244, 33.483625 ], [ -85.782689, 33.483638 ], [ -85.782735, 33.469349 ], [ -85.887782, 33.469427 ], [ -85.887675, 33.476768 ], [ -85.870053, 33.476757 ], [ -85.869308, 33.491574 ], [ -85.852421, 33.491644 ], [ -85.851890, 33.498742 ], [ -85.849839, 33.499690 ], [ -85.796852, 33.541849 ], [ -85.796054, 33.556220 ], [ -85.744118, 33.556075 ], [ -85.742348, 33.586553 ], [ -85.742202, 33.600002 ], [ -85.737379, 33.599823 ], [ -85.724517, 33.599430 ], [ -85.724953, 33.613539 ], [ -85.723670, 33.613492 ], [ -85.723650, 33.613491 ], [ -85.723074, 33.613505 ], [ -85.689954, 33.612909 ], [ -85.690140, 33.615815 ], [ -85.690716, 33.625105 ], [ -85.690684, 33.627789 ], [ -85.674932, 33.627254 ], [ -85.655810, 33.627166 ], [ -85.655549, 33.638127 ], [ -85.651295, 33.637972 ], [ -85.651283, 33.641570 ], [ -85.647190, 33.641529 ], [ -85.647040, 33.648772 ], [ -85.638579, 33.648413 ], [ -85.638586, 33.649158 ], [ -85.638049, 33.773339 ], [ -85.621245, 33.773508 ], [ -85.621019, 33.782331 ], [ -85.620890, 33.787944 ], [ -85.603469, 33.787755 ], [ -85.603465, 33.788474 ], [ -85.603391, 33.802344 ], [ -85.585985, 33.802095 ], [ -85.585201, 33.845920 ], [ -85.636882, 33.846495 ], [ -85.637126, 33.846497 ], [ -85.637012, 33.875273 ], [ -85.637014, 33.875944 ], [ -85.601899, 33.874865 ], [ -85.601913, 33.875101 ], [ -85.601858, 33.889750 ], [ -85.597063, 33.889703 ], [ -85.532482, 33.889152 ], [ -85.531812, 33.903049 ], [ -85.530094, 33.941423 ], [ -85.495820, 33.942394 ], [ -85.495289, 33.956910 ], [ -85.425627, 33.957069 ], [ -85.425444, 33.960645 ], [ -85.407831, 33.960548 ], [ -85.407637, 33.964204 ], [ -85.398837, 33.964129 ], [ -85.391495, 33.927068 ], [ -85.388717, 33.913044 ] ] ] } }
,
{ "type": "Feature", "properties": { "GEO_ID": "0500000US01031", "STATE": "01", "COUNTY": "031", "NAME": "Coffee", "LSAD": "County", "CENSUSAREA": 678.972000 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -86.030441, 31.618939 ], [ -86.004085, 31.619067 ], [ -85.999948, 31.619311 ], [ -85.980098, 31.619189 ], [ -85.926702, 31.618966 ], [ -85.904460, 31.618775 ], [ -85.899202, 31.618729 ], [ -85.878888, 31.618547 ], [ -85.832214, 31.618240 ], [ -85.789142, 31.617964 ], [ -85.789141, 31.587866 ], [ -85.789140, 31.540617 ], [ -85.789308, 31.490925 ], [ -85.789370, 31.487561 ], [ -85.789372, 31.487430 ], [ -85.790294, 31.431467 ], [ -85.789837, 31.385469 ], [ -85.789815, 31.383145 ], [ -85.789594, 31.372698 ], [ -85.789754, 31.358887 ], [ -85.789785, 31.356562 ], [ -85.789866, 31.350574 ], [ -85.790001, 31.342857 ], [ -85.789975, 31.341524 ], [ -85.790064, 31.337277 ], [ -85.790065, 31.336908 ], [ -85.790100, 31.336276 ], [ -85.790116, 31.330082 ], [ -85.790327, 31.323452 ], [ -85.790434, 31.320267 ], [ -85.790525, 31.317495 ], [ -85.791089, 31.297603 ], [ -85.791167, 31.295340 ], [ -85.791243, 31.294184 ], [ -85.791245, 31.294004 ], [ -85.791214, 31.293551 ], [ -85.791218, 31.293252 ], [ -85.791361, 31.291777 ], [ -85.791312, 31.269325 ], [ -85.791291, 31.209854 ], [ -85.791402, 31.196349 ], [ -85.847766, 31.196369 ], [ -85.857352, 31.196367 ], [ -85.857999, 31.196374 ], [ -85.865347, 31.196374 ], [ -85.882227, 31.196339 ], [ -85.938287, 31.196344 ], [ -85.949386, 31.196123 ], [ -85.950142, 31.196242 ], [ -85.960322, 31.195962 ], [ -85.966110, 31.195935 ], [ -85.999042, 31.195777 ], [ -86.013060, 31.195318 ], [ -86.058535, 31.194082 ], [ -86.116734, 31.193015 ], [ -86.116735, 31.183885 ], [ -86.116736, 31.182099 ], [ -86.125405, 31.182057 ], [ -86.125482, 31.192754 ], [ -86.141674, 31.192693 ], [ -86.193476, 31.192213 ], [ -86.194003, 31.211362 ], [ -86.193542, 31.213028 ], [ -86.193846, 31.219589 ], [ -86.193714, 31.243119 ], [ -86.193336, 31.250169 ], [ -86.193546, 31.262915 ], [ -86.193888, 31.283526 ], [ -86.194631, 31.327933 ], [ -86.194779, 31.336812 ], [ -86.195044, 31.352681 ], [ -86.195056, 31.353359 ], [ -86.196091, 31.410348 ], [ -86.196365, 31.425431 ], [ -86.193951, 31.440072 ], [ -86.193973, 31.446586 ], [ -86.194724, 31.524460 ], [ -86.194784, 31.529949 ], [ -86.182098, 31.530047 ], [ -86.156561, 31.530203 ], [ -86.156768, 31.537527 ], [ -86.150314, 31.537601 ], [ -86.143950, 31.537675 ], [ -86.144761, 31.570994 ], [ -86.145895, 31.617741 ], [ -86.124952, 31.618044 ], [ -86.123834, 31.618167 ], [ -86.094925, 31.618405 ], [ -86.058021, 31.618793 ], [ -86.030441, 31.618939 ] ] ] } }
]
}
./maps.html
<html>
<div id="map-container"></div>
<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="https://unpkg.com/topojson#3"></script>
<script src="map.js"></script>
</html>
./map.js
let h = 500;
let w = 960;
path = d3.geoPath();
d3.select("#map-container")
.append("svg")
.attr("id", "map")
.attr("height", h)
.attr("width", w)
.attr("fill", "blue")
.append("title")
.text("Southeastern Region Counties")
.attr("id", "title");
let maplink = "./corrected.json";
Promise.all([d3.json(maplink)]).then(([data]) => {
let paths = d3.select("#map").selectAll("path").data(data.features);
paths.enter().append("path").attr('d', path);
});
I don't see any error message, and haven't located my error in the documentation. What am I missing?

Answer 1

Your coordinates are unprojected, a collection of latitude longitude pairs, but you are treating these coordinates as pixel coordinates. This shows with your resulting path data: M-85.388717,33.913044, a coordinate representing -85° E, 34° N. That the x value, longitude here, is negative means your map is rendered outside the SVG - to its left, hence why it is not visible.
You need to run your latitute longitute pairs through a geographic projection that takes those points on a 3D sphere and projects them to the 2D plane of your SVG. In doing so you'll introduce some degree of distortion, so you may want to try a few projections (though this is often minimal if zoomed in enough, say on a city).
If you do not provide a projection to d3.geoPath() it'll use a null projection which treats input coordinates as pixel coordinates. This won't let you simply shift the map to the right: geographic convention is that latitutes increase as one moves north (typically up on a map), whereas SVG/Canvas convention is that pixel y values increase as one moves down
For example to use an Albers projection you could use:
var projection = d3.geoAlbers();
var path = d3.geoPath().projection(projection);
This gets us half way there: the projection is independent of your features, we need to center and scale the projection appropriately. To do so, after we load the geojson, we can use:
projection.fitSize([width,height],data)
Where data is a geojson object (hence why we don't use data.features).