Skip to main content
SimilarExport ZIP
100%

Hello games

✓ Published1🌍 Public
PPiotr Paszek
Last edited Jun 12, 2021
Created on Jun 12, 2021
Forked from Hello VizHub

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.

AI-generated description

Games to Vizhub

MIT Licensed

Similar vizzes

Loading thumbnail…

World Map Visualization

A world map visualization colors each country according to a numeric value from an external CSV dataset. The example uses D3 v6 with a Mercator projection via `d3.geoMercator` and `d3.geoPath` to render GeoJSON country boundaries as SVG paths. Country fill colors are determined by a sequential blue color scale, while missing data appears gray. The code demonstrates loading remote TopoJSON and CSV files with `d3.json` and `d3.csv`, and includes an ES6 module import for a simple message.

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

lets make a map!

This example displays an interactive world map with countries rendered in light green and hover effects that change their color to red. It uses d3.geoNaturalEarth1 for projection and d3.geoPath to draw geographic features from TopoJSON data loaded from the world-atlas package, with country names joined from a TSV file. Pan and zoom functionality is implemented via d3.zoom, and the map is rendered as SVG with a light blue sphere background.

SShane Carey
77% match
Loading thumbnail…

Let's make a map with D3.js!

This example displays a world map of countries rendered as light green SVG paths on a dark blue background. It uses the world-atlas TopoJSON dataset and D3’s `geoMercator` projection with `geoPath` to generate the shapes. The topojson `feature` method extracts country geometries, which are appended as SVG `<path>` elements. The map is static, with thin black strokes and low stroke opacity defining country borders.

AArriannePandaraoan
76% 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
76% match
Loading thumbnail…

Let's make a map with D3.js!

This example renders a world map from TopoJSON data loaded from the World Atlas package, using D3’s `geoMercator` projection and `geoPath` to draw each country as an SVG path. The map features green-filled countries with black strokes, and the code demonstrates the basic data join pattern with `selectAll` and `enter().append()`.

TTheRedUnicorn
76% match