simplified borders

100%

simplified borders

✓ Published0🌍 Public

Last edited Aug 2, 2017

Created on Jul 29, 2017

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.

AI-generated description

We use topojson.borders() (a proposed extension of topojson.mesh()) to extract borders arcs; then we manipulate the borders childishly (outrageously? — it makes some countries vanish!) by keeping only the first and last point of each arc.

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>

forked from <a href='http://bl.ocks.org/Fil/'>Fil</a>'s block: <a href='http://bl.ocks.org/Fil/9ff0ca1825369075394d0e77e149052c'>topojson borders</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Simplified Globe

A simplified globe spins continuously, displaying the world's landmasses as a dark silhouette against a plain background. The visualization uses an orthographic projection (`d3.geoOrthographic`) and renders the geographic features as an SVG path via `d3.geoPath`. Land data comes from the `world-110m` TopoJSON file, which is simplified with `topojson.presimplify` and `topojson.simplify`. A `d3.timer` drives the animation, rotating the projection and tilting it sinusoidally to create a wobbling effect.

CCurran Kelleher

86% match

Loading thumbnail…

borders = topojson meshes

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).

PPhilippe Rivière

83% match

Loading thumbnail…

Spinning Globe

A spinning globe displays the world’s landmasses in an orthographic projection, rotating continuously while its tilt oscillates. The visualization uses D3 v4’s `d3.geoOrthographic()` projection and `d3.geoPath()` to render country polygons from the `world-110m` TopoJSON dataset. A timer updates the projection’s rotation and tilt, redrawing the SVG path each frame to create the animated effect.

CCurran Kelleher

82% match

Loading thumbnail…

Rotating Transverse Mercator

A rotating transverse Mercator projection continuously spins a world map around its central meridian, showing how the projection distorts shapes and areas away from the axis of rotation. The animation uses a dark canvas with white country borders and a semi-transparent graticule, all rendered via `d3.geoPath` and Canvas 2D drawing. Land polygons and country boundaries come from TopoJSON data in the world-atlas package, while a `d3.timer` updates the projection’s rotation each frame. The code specifies `d3.geoTransverseMercator`, `d3.geoGraticule10`, and `topojson.feature` and `topojson.mesh` for data processing.

Mmbostock

81% match

Loading thumbnail…

Rotating Globe

A rotating orthographic globe displays country-level data values, with landmasses rendered in sky blue and hover states highlighted in dark blue. Using D3 v5 with `d3.geoOrthographic` and `d3.geoPath`, the projection rotates continuously via `d3.timer`, while a graticule overlays the sphere. The visualization loads world topology from TopoJSON and country names from a CSV file, with zoom support via `d3.zoom`.

Nnouralkhoury

81% match

Loading thumbnail…

Rotating Globe

A rotating orthographic globe displays country boundaries and graticules, with land masses that change color on hover. The visualization uses D3 v5’s `geoOrthographic`, `geoPath`, and `geoGraticule` with a timer to continuously adjust the projection rotation. World map data comes from the World Atlas TopoJSON, while country names are loaded from a TSV file. Zooming is enabled via D3’s `zoom` behavior, and all rendering uses SVG paths.

Zzahra929

81% match

Loading thumbnail…

Untitled

A globe projection of the world renders country polygons onto a Canvas element using `d3.geoPath` and `d3.geoOrthographic`. It displays land masses in dark blue, water in light gray, and a graticule overlay. The globe auto-rotates slowly, but dragging it with the mouse adjusts the projection angles, and hovering highlights a country in a different color while showing its name. The visualization loads world geography as TopoJSON from a remote source and country names from a TSV file, using `d3.geoGraticule10`, `d3.drag`, and the `versor` library for rotation calculations.

AAbhishek Singh

80% match

Loading thumbnail…

This Is a Globe

A rotating orthographic globe displays Earth’s landmasses as a flat silhouette on a circular canvas. The map is rendered using D3 v3’s `d3.geo.orthographic` projection and `d3.geo.path`, with TopoJSON land data from the world-110m file. A `d3.timer` advances the rotation each frame, clearing and redrawing the canvas context, while a stroked arc outlines the sphere’s edge.

Mmbostock

80% match