Pierce Tiles

100%

✓ Published0🌍 Public

Last edited Jul 25, 2019

Created on Jul 2, 2016

A tiled world map presents the Peirce quincuncial projection, seamlessly repeating across a square grid so that continents weave through the seams. The visualization uses a static rendered image of the projection, loaded as a CSS background with an infinite animation that slowly translates the tiles diagonally, creating an optical illusion of continuous motion. The map itself is computed from geographic data using D3’s `d3.geoPeirceQuincuncial` and `d3.geoPath`, with the resulting PNG file reused as the page’s backdrop.

AI-generated description

“You think that when we look at a map, what we really see is ourselves. After you first saw Inception, you sat silent in the theater for six hours. It freaks you out to realize that everyone around you has a skeleton inside them. You have really looked at your hands.” —xkcd

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Peirce Quincuncial

This example shows the Peirce quincuncial projection, a conformal map that projects the globe onto a square using a complex algorithm. The visualization displays world landmasses in dark gray with white country boundaries, overlaid on a graticule of meridians and parallels, all within a 960-pixel SVG. The code uses `d3.geoPierceQuincuncial()` from the d3-geo-projection library to define the projection, and `d3.geoPath()` to render the projected geometry. It loads world data from a TopoJSON file, specifically via `topojson.feature` for land and `topojson.mesh` for country boundaries. The sphere is outlined in black, and the rendering is handled with SVG paths.

Mmbostock

79% match

Loading thumbnail…

Peirce Equatorial

This example shows the world’s landmasses and country boundaries projected onto a square using the Peirce quincuncial projection, which divides the sphere into a square with a distinctive diamond-like layout. The map is rendered as an SVG using D3 v4 and the `d3.geoPierceQuincuncial` projection from the d3-geo-projection library, with a graticule and a sphere outline drawn via `d3.geoPath` and `d3.geoGraticule`. It loads world-50m GeoJSON data from a gist and uses TopoJSON to extract land features and country meshes for the boundaries.

Mmbostock

78% match

Loading thumbnail…

Peirce Equatorial

This example uses the Peirce quincuncial projection to render a world map in an equatorial aspect, displaying the globe as a square with continents shown as dark shapes and borders highlighted in white. The graticule and sphere outline are drawn in gray, and the map is centered with a 45-degree rotation. It employs d3.geoPath with the d3.geoPierceQuincuncial projection from the d3-geo-projection library, and fetches world-50m.json data from a gist to generate landmasses and country boundaries.

PPhilippe Rivière

78% match

Loading thumbnail…

Tetrahedric Gnomonic Projection

This example visualizes the world using a tetrahedric gnomonic projection, a polyhedral map projection that unfolds the globe onto four triangular faces. The map renders landmasses and graticules on a Canvas via `d3.geoPath`, with the projection implemented through a custom `d3.geoTetrahedralLee` function that uses `d3.geoPolyhedral` and per-face gnomonic projections. The code includes a dashed inner triangle and outlined sphere boundary, and loads world data from the World Atlas TopoJSON dataset. It also spins the projection interactively using D3's rotation APIs and renders at devicePixelRatio for sharp output.

PPhilippe Rivière

69% match

Loading thumbnail…

Tile Viewer

This example shows a zoomable map interface where the user can pan and zoom across geographic tiles. It displays each tile as a numbered 256-by-256-pixel square with a red border and its coordinates as text, updating the visible grid as the viewport changes. The code uses d3.geo.tile, d3.geo.mercator, and d3.behavior.zoom, applying a CSS 3D matrix transform to reposition tiles during zoom events. It relies on a gist by mbostock and the d3.v3 library, with tile positions computed from the current zoom scale and translation.

Mmbostock

68% match

Loading thumbnail…

Gist 7db080b8909bfe2d732eeb33909de6ec

This visualization combines a D3 geographic projection with an animated particle system on an SVG and canvas hybrid, showing graticules and a world map in an interrupted sinusoidal projection. The code references the idea of piling up continents by latitude and longitude, and uses d3-geo-projection to render the map with an unusual projection. The animation likely shows the map morphing or the graticules/particles being drawn dynamically.

11wheel

68% match

Loading thumbnail…

Vector Tiles

This interactive map displays vector tiles of road networks from OpenStreetMap, rendered as SVG paths. It uses Mapzen’s vector tile API to load road data, and d3.geoMercator’s projection with a d3.tile-based tile system to fetch and display 256×256 tiles. The visualization supports pan and zoom via d3.zoom, with a matrix3d transform for scaling and translation. Mouse movement updates a location readout showing latitude and longitude, computed by inverting the projection.

Mmbostock

67% match

Loading thumbnail…

d3-tile wrapping

This example displays an interactive SVG world map using tiled raster images from OpenStreetMap, with tile-wrapping toggled by a checkbox. The visualization relies on the `d3-tile` library’s `tile.wrap` method to generate tile coordinates, and `d3.geoMercator` with `d3.geoPath` for the projection. An HTML form checkbox controls the `wrap` flag, triggering a `loadTiles` function that rebuilds the image layer. Each tile is fetched from the `a.b.c.tile.openstreetmap.org` subdomains. The map’s scale and translation are computed and applied via SVG group transforms.

CCurran Kelleher

67% match