Skip to main content
SimilarExport ZIP
100%

A9 - World Choropleth Map

✓ Published0🌍 Public
DDuc Pham
Last edited Apr 8, 2024
Created on Apr 7, 2024

This example shows a world choropleth map of 2021 GDP values by country, with darker blue shading representing higher GDP. A tooltip displays the country name and GDP on mouseover, while a horizontal color legend encodes the scale. The visualization uses a geographic projection via `d3.geoMercator` and `d3.geoPath` to render GeoJSON features, with color mapping through `d3.scaleSequential` and `d3.interpolateBlues`. GDP data is loaded from a CSV using `d3.csv`, and the legend is built with the `d3-legend` library.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

A9 World Choropleth Map

A9 World Choropleth Map visualizes GDP per capita across countries in 2022 using a Mercator projection and a threshold color scale from `d3.scaleThreshold` and `d3.schemeBlues`. The map, rendered as SVG, colors each country path via `d3.geoPath`, with gray for missing data, and includes interactive tooltips showing country name and GDP value on mouseover. A separate SVG legend, built with `d3.legendColor`, displays the color thresholds. The code loads GeoJSON country boundaries and CSV economic data using `d3.json` and `d3.csv` with a queued `d3.queue`.

Hhxu51@usfca.edu
92% match
Loading thumbnail…

GDP World Map

This world map visualizes geographic GDP data using a choropleth approach, coloring countries by their economic output. The example loads GeoJSON map data and renders it as SVG paths with `d3.geoPath`, while numeric GDP values drive a color scale. It uses `d3.json` to fetch the dataset and `d3.scaleThreshold` to map values to fill colors, with a tooltip providing details on hover. Built with D3 v6, the visualization demonstrates basic geographic mapping and data-driven styling in an SVG container.

TTom Heffernan
85% match
Loading thumbnail…

d3 choropleth (world) map

This choropleth map visualizes average GDP per capita by country from 1970 to 2017, with each nation shaded on a logarithmic green color scale based on its value. Hovering over a country dims all others, highlights the selected region, and reveals a tooltip with the country’s name and GDP. Built with D3 v6, it uses `d3.geoMercator` and `d3.geoPath` to project and draw the map from a simplified GeoJSON, while the data from a CSV is joined to the topology for coloring. Animated transitions control opacity and tooltip visibility.

AAndrew
85% match
Loading thumbnail…

GDP Choropleth Viz

A world map colored by GDP per capita displays each country’s economic standing for a selected year, controlled by a slider. Hovering over a country updates a line plot showing that nation’s GDP trend over time, with red and green reference lines marking the current year’s value. The visualization combines a `d3.geoEqualEarth` projection rendered as SVG with `d3.scaleLinear` color encoding, alongside a linked line chart built using `d3.line` and axis components. GDP data originates from a CSV file, while country boundaries use a GeoJSON source.

TTom Heffernan
84% match
Loading thumbnail…

World Map in D3

This example shows a choropleth world map displaying each country’s total GDP in current US dollars for 2015, colored from light to dark to indicate relative economic output. Countries without data appear in gray. The visualization uses D3 v7 and TopoJSON to load geographic boundaries, with d3.geoPath rendering the SVG country shapes. A hover tooltip reveals the exact GDP value per country, while a legend explains the color scale. The GDP data itself is embedded directly in the page as CSV text.

Kkfhujosefsson@dons.usfca.edu
84% match
Loading thumbnail…

World Map with Population

This example displays a world map choropleth of GDP data, with each country colored according to its economic value. It uses D3 v7 and TopoJSON to load world geography, projecting the map with the `d3.geoNaturalEarth1` projection and rendering countries as SVG paths via `d3.geoPath`. GDP values are fetched from a CSV file, matched to countries through flexible column-name heuristics, and visualized with a color scale. A hover tooltip provides country-specific details, while the map includes a legend for interpreting the color encoding.

PP Manisha
84% match
Loading thumbnail…

GDP Choropleth Viz final

This interactive visualization presents a global choropleth map where each country’s color encodes its GDP per capita, with a slider to shift the year between 1970 and 2033. Hovering highlights a country in pink, while selecting it turns it red and displays a line plot of that nation’s GDP over time, split into blue (pre-2023) and red (post-2023) segments. The map uses `d3.geoPath` for country shapes and a quantile-based color scale, while the line plot relies on `d3.axisBottom` and `d3.axisLeft` for axes. Data is sourced from a GDP dataset, with country name mappings to reconcile discrepancies.

TTom Heffernan
84% match
Loading thumbnail…

World Choropleth

This interactive choropleth visualizes world countries, colored by economy type and labeled with country names. A hover tooltip displays each country's population, GDP, income group, and continent. The map uses D3's `geoNaturalEarth1` projection and `geoPath` for rendering, with TopoJSON for geographic data. Zoom and pan are enabled via D3's `zoom` behavior, while a categorical color legend uses `scaleOrdinal` with the `schemeSet3` palette to differentiate economy categories.

CCurran Kelleher
82% match