Skip to main content
SimilarExport ZIP
100%

d3 choropleth map

✓ Published0🌍 Public
Aashpradhan01123
Last edited Jul 24, 2020
Created on Jul 23, 2020
Forked from HTML Starter

This example displays a choropleth map of world countries using an Eckert5 projection, with colors representing numeric data values for each country across multiple years. A play button animates through yearly data from the CSV file, updating the map and a clock display to show the current year. The visualization uses d3.v3 with geo projection and path APIs, queue.js for loading the TopoJSON geometry and CSV data, and renders all elements as SVG. The code includes a graticule layer and country boundaries for geographic context.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Choropleth Map

This example presents an interactive choropleth map using a globe projection, where users can select a country from a dropdown list to rotate the globe and focus on that specific location. The visualization also shows a color legend built with custom D3 code, and it includes a tooltip that displays the country name on mouseover. The map is constructed with D3's geo projection and path functions, TopoJSON for geographic data processing, and static JSON and TSV files from the world-atlas package. The globe is rendered using the orthographic projection, with the styling defined in CSS.

DDolbyref113
85% match
Loading thumbnail…

d3 choropleth map

This animated choropleth map visualizes hypothetical country-level data across the years 2008–2013. Built with D3 v3 and rendered in SVG, the map uses a color scale to encode numeric values from a CSV dataset, with each country's fill transitioning as users step through time. The visualization includes a year selector and animated transitions, allowing viewers to observe changing patterns across countries over time. The map is accompanied by a tooltip displaying the country name and its value for the currently selected year.

AAjar06
85% match
Loading thumbnail…

An interactive D3 map

This interactive D3 map displays a world map with countries colored pink and overlaid with green-bordered circles, visualizing numerical values from a CSV dataset via a color-coded choropleth. Built with React and D3 v5, it loads GeoJSON topology data from the world-atlas package and uses topojson’s feature and mesh functions to render land and country boundaries as SVG paths, while the data CSV is joined by ISO country codes for the visual encoding.

Nnouralkhoury
84% match
Loading thumbnail…

Choropleth Map

This choropleth map displays world countries using a natural Earth projection, with country boundaries rendered as interactive SVG paths. The visualization uses D3 v6 and TopoJSON to load and convert world-atlas data from unpkg, employing `d3.geoNaturalEarth1` and `d3.geoPath` for projection and path generation. Hovering over a country changes its fill from green to red, while a zoom behavior (`d3.zoom`) allows panning and scaling the entire map. The sphere background is filled blue, and country names appear as tooltips via SVG title elements.

BBKirst3
83% match
Loading thumbnail…

choropleth!

This choropleth displays a world map rendered with a natural Earth projection, coloring countries in light green against a blue sphere. Built with D3 v5 and TopoJSON, it loads country boundaries from the world-atlas dataset and draws them as SVG paths using d3.geoPath. Interactive zooming is enabled through d3.zoom, and hovering over any country turns it red. Each country path includes a title element showing its name, though the display of that name is not implemented.

AAbhijeet Panda
83% match
Loading thumbnail…

D3 - World Choropleth

This example displays a world choropleth map of population in 2023, using a Mercator projection and a yellow-to-red sequential color scale to represent each country’s population. The map is rendered as SVG paths, with a tooltip that appears on hover showing the country name and population. The code loads GeoJSON and CSV data via D3’s `d3.queue` and `d3.json`/`d3.csv` APIs, and it builds the choropleth using `d3.geoPath` with a projected path generator. A legend is added using the `d3.legend` library, and the project utilizes D3 v4, `d3-scale-chromatic` for the color interpolation, and `d3-geo-projection` for the map projection.

CChandana Srinivas
83% match
Loading thumbnail…

Choropleth Map

This choropleth map visualizes world countries using a natural Earth projection, with color encoding driven by data loaded from the world-atlas TopoJSON and TSV files. The SVG rendering uses `d3.geoNaturalEarth1` and `d3.geoPath` to draw geographic features, while an ordinal color scale maps country attributes to fill colors. Interactive pan and zoom are enabled through `d3.zoom`, which transforms both the map and sphere layers. A color legend is positioned on the left side to interpret the scale.

YYoung Song
83% match
Loading thumbnail…

GeoVisualization - Choropleth map of the world

This example presents a choropleth map of the world, coloring each country according to its population using a threshold color scale with sequential blues. The visualization uses D3.js (v6) to load GeoJSON and CSV data, projecting the map with a Mercator projection via `d3.geoMercator` and drawing paths with `d3.geoPath`. Interactivity highlights countries on mouseover by adjusting opacity and stroke, while the SVG rendering displays the result.

AAlark Joshi
83% match