Fit a projection to Ardenvale and try the edge cases
The numbers are pixels in a 500 × 400 box. A projection returns numbers for any point, so nothing in this example throws: you have to look at what comes back.
A projection turns [longitude, latitude] on a ball into [x, y] on a flat screen, and every way of doing it bends something: shape, area, distance or direction. geoPath draws projected shapes, and fitSize makes a map fill its box.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 4 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write visible(projection, point) for an orthographic globe. It returns the [x, y] pixel for visible points and null for hidden ones. Test it with [0, 0] and [150, 0].
Write fitTo(projection, features, size) that fits the projection to the features, and returns null instead of a broken projection when features is empty.
Explain it without notes
What does a projection do, and why can no flat map be accurate everywhere?
Why does Greenland look so large in Mercator? What would you use to compare areas instead?
What does fitSize set, and what goes wrong if you give it one point?
Why can drawing stations on an orthographic globe with projection(point) produce wrong dots?
Preview
Console
Nothing logged yet.Expected console output
default projection, island bounds: 398, 135, 398, 136
fitSize 500x400, bounds: 16, 0, 484, 400 | scale: 290,085
fitExtent with a 20 px margin, bounds: 39, 20, 461, 380
Quay [lon, lat] -> [ '274.4', '256.8' ] pixels | the centre pixel is [ '-30.5990', '39.4001' ] [lon, lat]
Mercator y pixel at latitude 60, 85, 90, -90: 49, -229, -5460, Infinity
Orthographic, [150, 0] is on the far side: [ 604.75, 250 ] | visible: false
fitSize on one point: Infinity
fitSize on nothing, then draw nothing: path is null
Mercator | width 467.8 x height 400.0
Equal Earth | width 456.6 x height 400.0
Natural Earth | width 481.3 x height 400.0