Skip to main content
SimilarExport ZIP
100%

Waterman Butterfly

✓ Published0🌍 Public
Mmbostock
Last edited Feb 4, 2020
Created on Jan 4, 2013

This example displays a world map using the Waterman butterfly projection, a polyhedral map projection that unfolds the globe into a butterfly-like shape. The visualization is rendered as an SVG using the D3.js v3 library and the `d3.geo.polyhedron.waterman` plugin, which defines the custom projection. The map includes a graticule, land masses, and country boundaries, with data loaded from a GeoJSON file via `d3.json`. The projection is rotated, scaled, and translated to center the map, and clipped to the sphere's outline.

AI-generated description

The Waterman butterfly projection is available as d3.geo.polyhedron.waterman in the geo.polyhedron D3 plugin. Implemented by Jason Davies; see his interactive rotating version.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Gnomonic Butterfly

The Gnomonic Butterfly example displays a world map projected using the Gnomonic butterfly polyhedral projection, which unfolds the globe into a butterfly-like shape with eight triangular faces. The map shows landmasses as dark shapes with white country boundaries, overlaid on a graticule grid. Built with d3.v3, the visualization uses `d3.geo.polyhedron.butterfly` to define the projection, `d3.geo.path` for rendering geographic features, and TopoJSON data from a world-110m file. The SVG output includes a sphere outline, clipped land and boundary paths, and a graticule layer, with the projection rotated and scaled to fit the canvas.

Mmbostock
85% match
Loading thumbnail…

Handdrawn Waterman projection

This hand-drawn world map uses the Waterman polyhedral projection to display country boundaries and graticules, with annotations marking personal milestones in Stockholm, London, Shanghai, and Copenhagen. The visualization combines D3.js v4 with TopoJSON world-atlas data, rendering landmasses through Rough.js to achieve a sketch-like aesthetic. Geographic paths are processed via `d3.geoPath` and `d3.geoPolyhedralWaterman`, while custom annotations are positioned using the projection and styled with d3-annotation. The map’s rough outlines and cross-hatched fill, clipped to a spherical path, emphasize the hand-drawn effect over the base map.

PPatrick Wojda
80% match
Loading thumbnail…

Mollweide Hemispheres

This example displays a world map using the Mollweide projection, interrupted into two hemispheres—northern and southern—which are rotated twenty degrees and centered on a 960-by-500 SVG canvas. The map shows landmasses as dark shapes with white country boundaries, overlaid on a graticule, all clipped to a circular sphere. It uses the `d3.geo.interrupt` and `d3.geo.mollweide.raw` projections with `d3.geo.path`, and renders geographic data from a World 50m TopoJSON dataset, drawing both land polygons and a mesh of country boundaries.

Mmbostock
75% match
Loading thumbnail…

Transverse Mercator

This example demonstrates the transverse Mercator map projection, displaying world landmasses and country boundaries within a graticule grid. The map is rendered as SVG using the D3.js library, specifically employing the `d3.geoTransverseMercator` projection and `d3.geoPath` for drawing geometries. World data comes from the `world-atlas` package, processed with `topojson-client` to extract land and boundary features. The visualization includes a spherical outline, a graticule, and styled land and boundary paths, all centered within a 960x960 canvas.

Mmbostock
75% match
Loading thumbnail…

Let's make a map with D3.js!

This example demonstrates a world map rendered with D3.js using the geoPolyhedralWaterman projection from d3-geo-projection. It shows country boundaries from a TopoJSON world atlas dataset, overlaid with red rectangles positioned at two specific latitude/longitude coordinates, though the rectangles do not use the map projection and remain in screen space. The visualization uses d3.geoPath to generate SVG paths for countries and a sphere outline, with d3.geoGraticule available for reference lines. The code imports feature from topojson to convert TopoJSON data into GeoJSON features for rendering.

PPhilipp Koehler
75% match
Loading thumbnail…

Polyconic

This visualization demonstrates the Polyconic map projection, a compromise projection that preserves distances along the central meridian and each parallel. It displays the world’s landmasses as solid black shapes with white country boundaries, overlaid on a graticule grid and an outlined sphere. The example uses the D3 v3 library with the `d3.geo.polyconic` projection plugin, `d3.geo.path` for rendering, and `topojson.v1` to process world-50m.json geographic data, drawing everything as SVG paths.

Mmbostock
74% match
Loading thumbnail…

Hammer Retroazimuthal

This example displays a world map using a Hammer retroazimuthal projection, centered on parallel 52°N, with vector land and boundary outlines rendered as SVG paths clipped to the projected sphere. The code uses d3.geo.path with a custom projection and d3.geo.graticule to draw the graticule, while topojson.v1 loads and processes the world-50m GeoJSON data for land and country boundaries. A white stroke highlights the map boundary, and the projection’s clip angle ensures no artifacts appear beyond the map’s edge.

Mmbostock
74% match
Loading thumbnail…

Loximuthal

This example displays a world map using the Loximuthal projection, a pseudocylindrical equal-area projection. The map shows landmasses in black with white country boundaries overlaid on a graticule, all enclosed within a circular sphere outline. The visualization uses d3.geo.loximuthal from the extended geographic projections plugin, along with d3.geo.path and d3.geo.graticule to render the vector data. TopoJSON provides the world-50m geographic data, which is converted to GeoJSON features and meshes for the land and boundary layers.

Mmbostock
74% match