[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:projection = d3.geoAlbersUsa() // cities are off a few inchesdoes 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:
GOAL: Trying to figure out how to overlay some [long,lat] points. Can't figure out the projection. ANS: d3.geoPath(d3.geoAlbers().scale(1300).translate([487.5, 305])) was the magic code to convert from longitude and latitude to the xy coordinates on...
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.
I’m kinda confused now about the projections.
I think the counties-albers-10m.json is right as above, but now I see some people using this:
us = d3.json('https://pbogden.com/mapping/data/topojson/us-10m.json')
projection = d3.geoAlbersUsa().scale(1280).translate([480, 300])
from here: My U.S. Map (Canvas) / pbogden / Observable
OR
us = d3.json("https://cdn.jsdelivr.net/npm/us-atlas@1/us/10m.json")
from Have you heard of Hunt Brothers Pizza? / Robert Lesser / Observable
So, it seems like sometimes we use the (487.5, 305), and sometimes the (480,300).
Figured it out:
the us-10m.json is an older version of npm/us-atlas that (presumably) uses that projection.
Confusing, but normal version change issues.
Found this notebook that also uses the d3.geoAlbers().scale(1300).translate([487.5, 305])
jrus
March 3, 2021, 3:07am
4
The scale/translation is a bit of an arbitrary choice. You should look at the source details of a specific map to be sure about it.
Be warned also that these are a spherical-earth version of a conic equal-area projection. They are not quite equal-area for an ellipsoid of revolution, and won’t precisely match ellipsoidal projections used in other software.