[I’m new to d3 and ObservableHQ. Posting this just to share in case someone has the same task]
REMAINING QUESTION: Is there an easier way to get the scale and translate parameters from the map or pre-set topoJSON? Or, do we just need to know that counties-albers-10m.json
needs
d3.geoAlbersUsa().scale(1300).translate([487.5, 305])
GOAL: I wanted to take the spike map from mbostock and overlay some extra points, where I just have the Longitude and Latitude.
INTERMEDIATE STEP: I needed a way to covert the [long,lat] coordinates to the x,y coordinates in the USA map. I just didn’t know the right command.
ANSWER:
This didn’t work: projection = d3.geoAlbersUsa() // cities are off a few inches
This does work: projection = d3.geoAlbersUsa().scale(1300).translate([487.5, 305])
which is well documented here: U.S. Map / D3 / Observable and here: GitHub - topojson/us-atlas: Pre-built TopoJSON from the U.S. Census Bureau.
See the Code:
Once I set it correctly, projection.centroid(GeoJSONObject)
returned the x,y coordinates in the right pixel viewport for the Choropleth / D3 / Observable and Spike Map / D3 / Observable
Time spent: About 1.5hrs of happy learning and reading the d3-geo docs.