Armadillo demo

100%

Armadillo demo

✓ Published1🌍 Public

Last edited Jun 13, 2021

Created on Jun 12, 2021

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.

AI-generated description

Armadillo demo

MIT Licensed

Similar vizzes

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

91% match

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

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

76% match

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

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

65% match

Loading thumbnail…

sample

This example shows a choropleth map of global album counts by country, using a green color scale from light to dark to indicate higher totals. Clicking a country opens a modal with placeholder cards for genre, artist, and yearly album statistics, while hovering displays a tooltip with the country name and album count. The map is rendered with D3 v5’s `geoMercator` projection and `geoPath`, with data loaded from `world-atlas` TopoJSON and a local `data_map.json`. Zoom and pan are enabled via D3’s `zoom` behavior, and Bootstrap handles the modal interaction.

DDillu1991

65% match

Loading thumbnail…

Project | Load color | legend | moving

This example displays a world map with countries colored by a categorical measure of "prudence," using a yellow-or-red ordinal color scale. An interactive legend allows users to click a color value to filter and highlight matching countries while dimming others. The visualization uses d3.geoPath with a geoEquirectangular projection, d3.zoom for panning, and a custom color legend component. Data comes from CSV and TopoJSON files, rendered as SVG paths with hover effects defined in CSS.

MMukund Khandelwal

64% match

Loading thumbnail…

Miller

This visualization demonstrates the Miller cylindrical map projection applied to world geography in a dark, high-contrast SVG rendering. Land masses appear in solid black, country boundaries as white lines, and a subtle graticule grid marks latitude and longitude. The example uses D3 v3 with the `d3.geo.miller()` projection, `d3.geo.path()` for geographic paths, and `d3.geo.graticule()` for the grid, processing TopoJSON data via `topojson.feature` and `topojson.mesh`. The map is centered at 960×700 pixels, with land and boundary layers inserted beneath the graticule.

Mmbostock

64% match