borders = topojson meshes

100%

borders = topojson meshes

✓ Published0🌍 Public

Last edited Sep 6, 2018

Created on Jul 28, 2017

This example demonstrates a proposed extension to the `topojson` library, `topojson.meshes()`, which partitions world map boundaries into individual country borders using a `filter` function. Each border is tagged with a unique combination of the two bordering country IDs, or "coast" for the coastline, and rendered as separate SVG paths with colors from `d3.schemeAccent`. The orthographic projection rotates continuously via a `d3.timer`, animating the globe as the visualization highlights the mesh structure. The map data comes from the Visionscarto world atlas (110m resolution).

AI-generated description

This shows topojson.meshes(), a proposed extension of topojson.mesh(), that uses the filter(a,b) function (renamed tag(a,b)) to partition the mesh.

In this application the tag is the unique combination of the id of the two bordering countries, effectively listing individual borders. Exception: the tag is set to "coast" for the whole coast line.

Research by Philippe Rivière for topojson issue #17.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/4180634'>World Map</a>

gpl-3.0 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

83% match

Loading thumbnail…

Let's make a map with D3.js!

This example shows a world map rendered as SVG paths, with country boundaries drawn from TopoJSON data. The visualization uses D3 v5’s `geoMercator` projection and `geoPath` to convert geographic coordinates into screen paths, while the `topojson.feature` API extracts country geometries from the world-atlas dataset. All countries are appended as individual `path` elements to a 960×500 SVG canvas. The code loads data asynchronously via `d3.json` and relies on the bundled `index.js` to handle the data-binding and path generation.

Aaxliao

75% match

Loading thumbnail…

World roads (topojson mesh + simplify)

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.

PPhilippe Rivière

74% match

Loading thumbnail…

Let's make a map with D3.js!

This example displays a world map rendered as blue SVG paths with white borders, highlighting each country in red on hover. It demonstrates a basic geographic visualization workflow using D3.js, loading country boundaries from the world-atlas TopoJSON dataset and converting them with `d3.geoMercator` projection and `d3.geoPath`. The code uses `topojson.feature` to extract GeoJSON from the TopoJSON file and appends the resulting paths to an SVG canvas, with hover styling handled by CSS.

Rrichad97

74% match

Loading thumbnail…

topojson.topology + topojson.mesh

This example demonstrates the Aitoff map projection of the United States, drawn on a Canvas element using D3.js. It renders the geographic boundaries as stroked and filled paths, created via `d3.geoPath` with the `d3.geoAitoff` projection. The code first reads a GeoJSON file containing the US shape, converts it to a topology using the `topojson.topology` function from the `unpkg.com/topojson` package, and then draws it with `topojson.mesh` from `d3js.org/topojson.v2`.

PPhilippe Rivière

74% match

Loading thumbnail…

Let's make a map with D3.js!

This example displays a world map rendered with SVG paths, using D3.js v5 and TopoJSON. It loads geographic country boundaries from the world-atlas dataset and projects them with a Mercator projection. The code uses `d3.geoPath` and `d3.geoMercator` to generate the map, while `topojson.feature` converts the TopoJSON data into GeoJSON features. Countries appear filled in steel blue with black, semi-transparent borders, demonstrating a minimal choropleth-style base map.

HHwl98

73% match

Loading thumbnail…

Let's make a Map

This map renders world countries from the world-atlas TopoJSON dataset, using D3’s `geoNaturalEarth1` projection and `geoPath` to draw landmasses and country boundaries. The SVG output fills countries in light gray with blue strokes over a blue ocean sphere. It demonstrates a basic choropleth setup by asynchronously loading the 110m-resolution data and applying styling from an external stylesheet. The example shows how to project geographic features with D3’s geo API and topojson’s `feature` conversion.

Aarieltonglet

73% match

Loading thumbnail…

Let's make a map with D3.js!

This example renders a world map of countries using D3.js and TopoJSON. It loads geographic data from the world-atlas dataset and displays country boundaries as SVG paths. The visualization uses `d3.geoMercator` for the projection and `d3.geoPath` to generate the path data from the TopoJSON features. Each country is appended as a `path` element to an SVG canvas sized 960 by 500 pixels.

Kkdvs94

73% match