World roads (topojson mesh + simplify)

100%

World roads (topojson mesh + simplify)

✓ Published0🌍 Public

Last edited May 15, 2017

Created on May 15, 2017

This example visualizes global road networks rendered as a fine white mesh over a satellite-projected world map. Using TopoJSON data derived from Natural Earth and processed with `toposimplify` and `topomerge`, the roads are drawn as SVG paths with `d3.geoPath`. The map rotates continuously via `d3.interval`, updating the projection and re-rendering paths. Landmasses use a dark fill, while the sphere and graticule provide geographic context.

AI-generated description

We use topojson tools to get the roads data file as small as possible.

Data from Natural Earth.

Makefile (thank you @mbostock!)

ne_10m_roads.json:
	wget https://github.com/visionscarto/some-geo-data/blob/master/ne_10m_roads.json

roads_4-simplified.json:
	ndjson-cat ne_10m_roads.json | ndjson-split 'd.features' | ndjson-filter 'd.properties.scalerank <= 4' | ndjson-reduce 'delete d.properties,p.features.push(d), p' '{type: "FeatureCollection", features: []}' | geo2topo roads=- > roads_4.json
	toposimplify --spherical-quantile 0.05 roads_4.json | topomerge --mesh roads=roads --filter 'true' | topoquantize 2e4 > roads_4-simplified.json

mit Licensed

Similar vizzes

Loading thumbnail…

simplified borders

A rotating orthographic globe displays country boundaries as simplified straight lines, reducing each border arc to a single segment between its first and last points via `topojson.meshes`. Landmasses render as dark fills with white graticules, while borders are colored blue for coastlines and other hues for shared boundaries. The animation uses `d3.timer` to update the projection rotation and `d3.geoPath` to redraw paths, sourcing geometry from a TopoJSON world dataset.

PPhilippe Rivière

80% match

Loading thumbnail…

World Map - topojson

This example renders a natural Earth projection world map using SVG. It displays country boundaries and landmasses in brown with red strokes, overlaid on a light blue sphere representing the globe. The visualization loads geographic data from the world-atlas TopoJSON file, converts it to GeoJSON using `topojson.feature`, and draws the paths with `d3.geoPath` and `d3.geoNaturalEarth1`. The sphere outline is generated from a GeoJSON Sphere object, and styling is applied via CSS classes.

LLeora Wenger

78% match

Loading thumbnail…

Untitled

A world map rendered in the Mercator projection displays country boundaries as grey paths with thin white strokes. The example demonstrates loading GeoJSON-derived topology data from a local `world-110m2.json` file and converting it to SVG paths using `d3.geoPath`. The map is centered and rotated with `d3.geoMercator` and `projection.rotate`, and country features are extracted via `topojson.feature` from the TopoJSON library. The page uses D3 v7 to fetch the data asynchronously with `d3.json` and append the resulting paths to an SVG container.

Sspace-captain96

78% match

Loading thumbnail…

World map

A world map rendered with dark green landmasses and white outlines on a light blue background. The visualization uses a GeoJSON-derived feature collection from the world-atlas TopoJSON source, projected with `d3.geoMercator` and drawn via `d3.geoPath`. The code loads the TopoJSON file, converts it to GeoJSON features using `topojson.feature`, and appends SVG paths for each country. Styling is applied through CSS with the `fill` and `stroke` properties.

GGiovanni Kaaijk

77% match

Loading thumbnail…

World Map

This world map visualization displays global landmasses and interiors using a natural Earth projection, with graticule and sphere outlines for context. The example leverages React and D3 v7, specifically `d3.geoNaturalEarth1` for projection and `d3.geoPath` for rendering paths, while `topojson` features and meshes supply the geographic data. Land areas are filled in teal, with interior boundaries in a lighter shade, all rendered as SVG paths. The data originates from the World Atlas TopoJSON dataset.

JJun Suzuki

77% match

Loading thumbnail…

World Map using Mercator Projection

This example displays a world map using the Mercator projection, rendered as SVG paths with countries filled in white on a blue ocean background. It loads GeoJSON country boundaries from a gist and uses `d3.geoMercator` for projection, `d3.geoPath` to generate the paths, and `topojson.feature` to convert TopoJSON data. A sphere outline is drawn first, and country paths are appended dynamically from the fetched dataset.

Bbhargavarathod

77% match

Loading thumbnail…

World Map w/ land (more efficient)

This visualization displays a world map with natural landmasses highlighted in teal against a light gray sphere, with interior borders shown in a contrasting blue and graticule lines providing spatial reference. It loads TopoJSON from the world-atlas package, converts it to GeoJSON using the topojson `feature` and `mesh` functions, and renders the map with React. The code uses D3 v6’s `geoNaturalEarth1` projection, `geoPath`, and `geoGraticule` to draw the sphere, land features, graticule, and interior boundaries as SVG paths.

AAnthony Ynami

77% match

Loading thumbnail…

World Map with Topojson data

This example displays a world map rendered as SVG paths, with countries in grey and yellow strokes against a red spherical backdrop. It uses the Mercator projection and D3’s `geoPath` to convert geographic coordinates into screen paths, while TopoJSON’s `feature` extracts country boundaries from a remote world.json file. The sphere and countries are appended directly to the SVG via D3’s `select` and data joins, with styling handled through CSS classes.

Ssudhamshu24

77% match