Fork of Armadillo demo

100%

Fork of Armadillo demo

✓ Published0🌍 Public

Last edited Jun 13, 2021

Created on Jun 13, 2021

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.

AI-generated description

Armadillo demo

MIT Licensed

Similar vizzes

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

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

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

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

75% match

Loading thumbnail…

Fork of Fork of Cheap Tricks for Interaction

This interactive visualization displays a world map using a natural Earth projection, with countries rendered as light-green SVG paths that turn red on hover. The code leverages D3 v5’s `geoNaturalEarth1`, `geoPath`, and `zoom` APIs to enable panning and scaling via mouse or touch, transforming a grouped `<g>` element during zoom events. Country boundaries come from TopoJSON data in the world-atlas package, matched to names from a TSV file, with tooltips showing country names via appended `<title>` elements. The map is framed by a blue sphere path, and interaction is enhanced through CSS `:hover` styling.

Aaruna-rajeswari

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

69% match

Loading thumbnail…

Fork of Fork of World Map with D3.js!

This visualization displays a world map using D3.js and TopoJSON, with countries rendered as yellow filled paths on a dark blue sphere. It loads geographic data from the world-atlas countries-110m.json file and projects it using d3.geoEquirectangular. The code employs d3.json to fetch data, topojson.feature to convert TopoJSON to GeoJSON, and d3.geoPath to generate SVG paths. A hover effect darkens country fills using CSS, while the sphere background uses a navy color.

Rradhadevarapu

69% match

Loading thumbnail…

Fork of Let's make a map with D3.js!

This map visualization displays world countries colored in light green on a blue sphere, with hover effects turning countries red. It uses D3 v5 and TopoJSON to load and render world geography from the world-atlas dataset. The code combines `d3.geoNaturalEarth1` for projection, `d3.geoPath` for drawing country boundaries, and `d3.zoom` for interactive panning and zooming. Country names are joined from a TSV file and shown as SVG `<title>` tooltips.

Ggharakhani1986

69% match