Circles in Map Displayed Incorrect Location in D3 V4

by

Your US json is already projected, and to show it you use a null projection:

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

Without defining a projection, your topojson/geojson coordinates will be translated to straight pixel coordinates. It just so happens that this particular topojson file has pixel coordinates that are within [0,0] and [960,600], almost the same size as a default bl.ock view. Without knowing the projection used too create that file you cannot replicated that projection to align geographic features to your data. Unless you place your features with pixel values directly and skip the projection altogether (not useful for points not near identifiable landmarks or where precision matters).

Your US topojson features disappear when projecting with a geoUsaAlbers() because you are taking pixel coordinates on a plane and transforming them to svg coordinates as though they were points on a three dimensional globe (d3 projections expect latitude longitude pairs).

Instead, use a topojson or geojson that is unprojected. That is to say it contains latitude/longitude pairs and project that data along with your points. See this bl.ock for an example with unprojected (lat/long pairs) json for the US using your code (but assigning a projection to path).

To check if you have latitude/longitude pairs you can view the geometry of these features in a geojson file easily and see if the values are valid long, lat points. For topojson, the topojson library converts features to geojson, so you can view the geometries after this conversion.

Here’s an unprojected topojson of the US: https://bl.ocks.org/mbostock/raw/4090846/us.json

Let’s say you really wanted to use the same topojson file though, well we can probably deduce the projection it uses. First, I’ll show the difference between your projected points (by using an unprojected outline of the US) and the already projected topojson (the unprojected topojson is projected with d3.geoAlbersUsa() and the projected with a null projection):

enter image description here

Chances are the projection d3.geoAlbersUsa is optimized for a bl.ocks.org default viewport, 960×500. The unprojected dataset has a bounding box of roughly 960×600, so perhaps if we increase the scale by a factor of 600/500 and adjust the translate we can align our features in an svg that is 960×600:

var projection = d3.geoAlbersUsa();
var scale = projection.scale() * 600 / 500;
projection.scale(scale).translate([960/2,600/2])
var projectedPath = d3.geoPath().projection(projection);

And, this appears to align fairly well, I can’t see the difference between the two:

enter image description here

Here’s a block showing the aligned features.

But as I mention in the comments, even if you can align the features:
any zoom or centering would be problematic as you need to use a geoTransform on already projected data but a geoProjection on the raw geographic data. Using all (uniformly) projected data or all unprojected data makes life simpler.

More Related Contents:

  1. Plotting points on a map with D3
  2. Scaling d3 v4 map to fit SVG (or at all)
  3. How to add a tooltip to an svg graphic?
  4. Replacing d3.transform in D3 v4
  5. How can d3.transform be used in d3 v4?
  6. Updating SVG Element Z-Index With D3
  7. D3 Appending Text to a SVG Rectangle
  8. d3 add text to circle
  9. D3.js Map with Albers Projection: How to rotate it?
  10. In d3, how to get the interpolated line data from a SVG line?
  11. Creating and appending detached elements with d3.create
  12. Label outside arc (Pie chart) d3.js
  13. D3js take data from an array instead of a file
  14. Why does d3.js v3 break my force graph when implementing zooming when v2 doesn’t?
  15. Where is d3.svg.diagonal()?
  16. How to draw a path smoothly from start point to end point in D3.js
  17. (Embed and) Refer to an external SVG via D3 and/or javascript
  18. D3 fill shape with image using pattern
  19. D3 – how to deal with JSON data structures?
  20. Setting rounded corners for svg:image
  21. How do I save/export an SVG file after creating an SVG with D3.js (IE, safari and chrome)?
  22. SVG to Canvas with d3.js
  23. Add names of the states to a map in d3.js
  24. Add text label to d3 node in Force directed Graph and resize on hover
  25. How do I return y coordinate of a path in d3.js?
  26. Display an arrow head in the middle of D3 force layout link
  27. Calculate SVG Path Centroid with D3.js
  28. Can’t make paths draw growing slowly with D3
  29. draw text in d3 arc javascript
  30. D3 put arc labels in a Pie Chart if there is enough space

Leave a Comment