Armadillo

100%

✓ Published0🌍 Public

Last edited Jun 10, 2021

Created on Jun 10, 2021

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Armadillo

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.

Mmbostock

82% match

Loading thumbnail…

World Map

This example presents a choropleth world map visualizing countries colored by income group, with data sourced from World Atlas TopoJSON and TSV files. It uses D3 v5 with a geoNaturalEarth1 projection and d3.geoPath to render countries, while a color legend explains the ordinal color scale. The map supports zooming via d3.zoom, and hovering highlights countries in green. Animated transitions update the legend circles when the scale changes.

HHemanthh81

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

79% match

Loading thumbnail…

Choropleth Map with interactions

A choropleth map of world countries, colored by economic income group, supports interactive exploration. The map uses a natural Earth projection and is rendered as SVG. A color legend allows selection and highlighting of specific categories, while zooming and panning are enabled via d3.zoom. Data is loaded from the World Atlas TopoJSON and TSV files, and the visualization is implemented with d3.geoPath and d3.scaleOrdinal. Hovering a country displays its name and value in a tooltip.

Ggilbster

78% match

Loading thumbnail…

Armadillo demo

This example visualizes global mobile data prices by coloring countries on a Miller projection map, with green indicating available pricing data and grey for missing values. Hovering a country reveals a tooltip with its name, price in USD per MB, and demo notes for calling and SMS. The visualization uses d3.geoPath with the geoMiller projection from d3-geo-projection, loads geographic features and pricing data via Promise.all, and supports pan/zoom through d3.zoom. Country fill colors are assigned from parsed CSV data, with hover effects increasing opacity and stroke width.

PPiotr Paszek

77% match

Loading thumbnail…

world_map

This example visualizes world countries colored by economic classification using a natural Earth projection. The map supports zooming and panning, with hover highlighting and tooltips showing country names and economic categories. Built with D3 v5 and TopoJSON, it loads world atlas data from unpkg, utilizes `d3.geoNaturalEarth1` and `d3.geoPath` for geographic rendering, and applies a spectral color scale via `d3.scaleOrdinal` and `d3.schemeSpectral`. SVG paths enable interactive styling and title tooltips.

IInnoFail

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

77% match

Loading thumbnail…

Choropleth map

This choropleth map colors world countries by income group using a spectral ordinal scale, with a hover effect that highlights individual country borders and a legend showing the color categories. The visualization uses d3.geoNaturalEarth1 and d3.geoPath to render TopoJSON world-atlas data, while d3.zoom enables panning and interactive exploration. Color encoding and the legend are built with d3.scaleOrdinal and d3.schemeSpectral, with data loaded via d3.tsv and d3.json.

JJames Malvern

77% match