Armadillo

100%

✓ Published0🌍 Public

Last edited Mar 10, 2019

Created on Jan 5, 2013

This example uses the Armadillo projection to render a world map in a single continuous spiral. The code employs `d3.geo.armadillo()` with custom scale, rotation, and parallel settings, drawing graticules, land masses, and country boundaries from TopoJSON data. The map is clipped to a spherical outline using SVG `clipPath`, with land filled dark and borders in white. The visualization relies on `d3.geo.path` and `d3.geo.graticule` to project geographic features onto the two-dimensional canvas.

AI-generated description

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Armadillo

This example shows a world map where each country is colored according to its income group, using a spectral color scale. Users can pan and zoom the map, and hovering over a country displays its name and income group in a tooltip. The visualization is rendered with SVG and uses d3.geoNaturalEarth1 for the projection, d3.geoPath for drawing country boundaries, and d3.zoom for interactivity. Data is loaded from TopoJSON and TSV files via the world-atlas package, with income data from a CSV file.

PPiotr Paszek

82% match

Loading thumbnail…

Let's make a map with D3.js!

This example renders a world map using D3.js, loading GeoJSON country data from a remote URL and projecting it with the `geoArmadilloRaw` projection from `d3-geo-projection`. The map displays countries as green SVG paths with black strokes, generated through `d3.geoPath`. It imports `select`, `json`, and `geoPath` from D3, and uses TopoJSON’s `feature` utility to convert the data. The visualization is static, with no interaction, and the CSS sets a blue background.

Cchaimmaeee

77% match

Loading thumbnail…

Fork of Armadillo demo

This visualization displays mobile data prices on a world map, with countries colored green or grey based on whether the Armadillo dataset contains a price for them. Hovering or clicking a country reveals its name and price per MB. The map is rendered as SVG using the d3-geo-projection library’s `geoMiller` projection and `geoPath` for country boundaries. Data is loaded via Promise.all from GeoJSON map features and CSV price data, with styling applied through CSS and interactive zoom capabilities provided by a custom `zoom` directive.

PPiotr Paszek

75% match

Loading thumbnail…

Hello games

This example displays a world map where countries are colored green or grey based on data from a CSV file of Armadillo game prices, accessed via a gist URL. Using D3 v6, it renders paths with `d3.geoPath` and a Miller projection, then updates fill colors by matching country names against parsed CSV values. The map includes interactive tooltips and hover effects, while the code also demonstrates `d3.json` and `d3.csv` for loading multiple data sources.

PPiotr Paszek

74% 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

73% 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

73% match

Loading thumbnail…

August Projection

This example displays a world map using the August projection, a pseudocylindrical equal-area projection that curves parallels and meridians into distinctive intertwined shapes. The map renders land masses in dark gray with white country boundaries overlaid on a graticule, all enclosed within a spherical outline. Using D3 v3, the code employs `d3.geo.august` for the projection, `d3.geo.path` to draw geographic features, and `d3.geo.graticule` for the grid. TopoJSON data provides the world land and country boundaries, loaded from an external JSON file.

Mmbostock

72% match

Loading thumbnail…

Equidistant Conic Projection

This example shows a world map drawn with the equidistant conic projection, including a graticule, landmasses, and country boundaries. The map is rendered as SVG using D3’s `d3.geo.conicEquidistant` projection and `d3.geo.path` to generate the paths. A sphere outline and graticule are drawn first, then geographic data from a TopoJSON file (`world-50m.json`) is loaded with `topojson.feature` and `topojson.mesh` to display land and political borders.

Mmbostock

72% match