Q! Dinesh

A9 - World Choropleth Map

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.

DDuc Pham

Kkfhujosefsson@dons.usfca.edu

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.

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

Choropleth Map

This interactive choropleth map visualizes global economic data by coloring each country according to its economy category, using a spectral color scale with an accompanying legend. Built with React and D3 v5, the map projects geographic boundaries using the d3.geoNaturalEarth1 projection and renders paths as SVG elements. The visualization loads world atlas data from unpkg, merges tab-separated economy classifications with TopoJSON geometry via topojson.feature, and supports zooming through d3.zoom. Hovering highlights countries in pink while tooltips display each nation’s name and economy value.

Vvic126

Choropleth Map

This choropleth map colors world countries by economic category using a sequential spectral color scale. The visualization, rendered as SVG with D3 v5, uses `d3.geoEqualEarth` projection and `d3.geoPath` to draw country boundaries from TopoJSON data sourced from the World Atlas. Users can pan and zoom via `d3.zoom`, while a legend built with custom D3 selections displays the color scale. Hovering highlights individual countries in red, and tooltips show country name and economic value.

NNaveenaS12

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

Choropleth map

This choropleth map colors countries by income group, with a hover effect that highlights each nation and a legend displaying the categorical color scale. Built with React, it uses D3 v5 APIs including `geoNaturalEarth1` for projection, `geoPath` for rendering country boundaries, and `scaleOrdinal` with `schemeSpectral` for color mapping. World shape data comes from the world-atlas TopoJSON dataset, and the view supports zooming through `d3.zoom`. The legend is generated by the custom `colorLegend` module.

Jjeelong

Choropleth Map

This choropleth map colors world countries by their economy classification using an ordinal color scale with the spectral scheme. The visualization supports zooming and panning through D3’s zoom behavior, while hover effects highlight individual countries. It renders geographic boundaries with d3.geoPath and a Natural Earth projection, and includes a custom color legend built with SVG circles and text. Data is loaded from the World Atlas TopoJSON and TSV files, processed via topojson.feature, and joined by country ID.

Nnouralkhoury