Slippy map + extent indicator

Map.js!

This map visualization displays the world’s countries by using a Mercator projection to render geographic features as filled SVG paths on a light gray sphere background. The code loads country boundaries from the world-atlas TopoJSON dataset and converts them to GeoJSON with `topojson.feature`, then draws each country using `d3.geoPath`. Styling applies a blue fill with dark strokes and a subtle opacity, while the hidden overflow and full-bleed body create an immersive, full-window presentation.

Aargonaeut

73% match

Map & Globe

This example presents two synchronized geographic visualizations side by side: an interactive Leaflet.js map and a D3-based orthographic globe rendered on HTML5 Canvas. The Chiasm framework and its layout and links plugins manage the component layout and bidirectional data binding, so panning and zooming on the map updates the globe’s rotation and viewport circle, and dragging the globe repositions the map. The globe draws landmasses and country borders from a TopoJSON world dataset, while the map uses CartoDB basemap tiles. A gray circle on the globe indicates the map’s current viewport.

PPatrick Wojda

Globe to Map transition

A world map transitions between an orthographic globe and an equirectangular projection. The globe rotates via a D3 drag behavior, and clicking a country triggers a path-by-path transition to the flat map, while double-clicking returns to the globe. The visualization uses D3 v3 with `d3.geo.orthographic`, `d3.geo.equirectangular`, and `d3.geo.path` to render TopoJSON country boundaries as SVG paths, with CSS-based tooltips and hover highlighting.

KKoGor

Ginzburg IX

This example displays a world map using the Ginzburg IX projection, a pseudocylindrical compromise projection with curved meridians. The visualization shows land masses, country boundaries, a graticule, and an outer sphere outline, all rendered as SVG paths via `d3.geo.path` and TopoJSON data from world-50m.json. The code uses `d3.geo.ginzburg9()` from the d3.geo.projection plugin, applies a stroke-and-fill sphere mask, and loads geographic features with `topojson.feature` and `topojson.mesh`.

Craster Parabolic

This example displays a world map projected using the Craster parabolic projection, with graticule lines, country boundaries, and landmasses rendered in SVG. The visualization uses d3.geo.craster from the d3.geo.projection.v0 library, along with d3.geo.path for geographic path generation and topojson.v1 to parse world-50m.json data. A sphere outline and fill are drawn first, followed by graticule and geographic features from the TopoJSON file, with styling applied via CSS classes.

Ginzburg VI

This example displays a world map using the Ginzburg VI polyconic projection, filling landmasses in dark gray against a white globe and overlaying graticule lines and country boundaries. It uses d3.geo.ginzburg6 from the d3.geo.projection plugin, with d3.geo.path for rendering, TopoJSON for world land and country data sourced from a gist, and SVG elements for the sphere, graticule, and hierarchical map layers.

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.

Ginzburg VIII

This example displays a world map using the Ginzburg VIII projection, a pseudocylindrical map projection that curves meridians to create a distinctive, globe-like appearance. The map shows landmasses in dark gray with white country boundaries, overlaid on a graticule grid and enclosed by a circular sphere outline. Built with D3 v3, it uses `d3.geo.ginzburg8`, `d3.geo.path`, and `d3.geo.graticule` to render the projection, graticule, and sphere. Geographic data comes from a TopoJSON file of world land and country boundaries, loaded via `topojson.feature` and `topojson.mesh`.