Borders, areas and the ring that fills the world
Reversing a ring is also how to see the bug without a broken file. In a real project the cause is a file made by another tool.
A map is data first: a list of places, each with shapes made of [longitude, latitude] points. GeoJSON writes every shape out in full, TopoJSON stores each shared border once, and a ring written in the wrong direction can make a small island fill the whole world.
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 loadGeo(name) that fetches a TopoJSON file, throws a clear error on a bad status, and returns the first object's features. Test it with the correct and a wrong name.
Write checkStations(stations, districts) that returns the list of station ids not inside the district their CSV row names. Run it on the real stations; then swap one station's coordinates to see it found.
Explain it without notes
What is the order of a coordinate in GeoJSON, and what goes wrong if you reverse it?
What does TopoJSON store that GeoJSON does not, and why is the file smaller?
Why does a polygon with the wrong winding fill the whole map in D3?
How would you detect a wrongly wound polygon in code?
Preview
Console
Nothing logged yet.Expected console output
borders between districts: 5 lines | outer edge: 1 line | merged: MultiPolygon
Harbour as stored: 8.0 km2
Harbour reversed: 510,065,873 km2 | the whole Earth: 510,065,881 km2
After fixWinding: 8.0 km2 | unchanged one: 8.0 km2
Pixels covered (the box has 27,000): good 3,909 | bad is larger than the whole box: true