Day 35. Earth in lines
How do you reduce a planet to its essence?
For the 30DayMapChallenge minimal theme, I stripped Earth down to red lines on black, removing shading and labels to leave only the coastlines rendered through Three.js and WebGL.
The technical challenge was converting GeoJSON coastline data into WebGL-compatible line geometries, where each landmass needed to become a series of connected vertices that could render smoothly. I used THREE.Shape to connect the coordinate points, ShapeGeometry to build the geometry structure, and Line to render everything as a flat plane visualization rather than working in 3D space.
The coastline becomes a pure signature that lets you recognize continents by their outline alone, independent of any color or texture cues.
Data sourced from Natural Earth (ne_110m_land.geojson).
Live demo: Earth lines (minimal)
The project
| Piece | Role |
|---|---|
| Theme | 30DayMapChallenge minimal |
| Pipeline | GeoJSON → THREE.Shape → ShapeGeometry → Line |
| Space | Flat plane lines, not 3D globe |
| Data | Natural Earth ne_110m_land.geojson |
How to follow
- Blog: blog.maptheclouds.com
- LinkedIn: Day 35 post
- Live demo: Earth lines (minimal)
- Hashtag: #100DayMapChallenge
#100DayMapChallenge · Day 35/100 · LinkedIn
Previous: Day 34: Vaccination Timelines