Skip to main content
SimilarExport ZIP
100%

D3 Course 10: Choropleth Map

✓ Published2🌍 Public
GGabrz
Last edited Apr 17, 2020
Created on Apr 7, 2020

This choropleth map shows global economic classifications by country, with a clickable color legend that filters and highlights nations matching the selected category. It visualizes an ordered attribute across the Natural Earth projection using a spectral color scale, with tooltips displaying country names and economic values. The example integrates TopoJSON world geometry with tabular TSV data via `Promise.all` and `topojson.feature`. It uses D3 v5 APIs including `scaleOrdinal`, `geoPath`, `geoNaturalEarth1`, and `zoom` for pan/zoom interaction. The componentized code separates data loading, map rendering, and legend logic, using unidirectional data flow to update both when the legend is clicked.

AI-generated description

Data Visualization with D3 course; Choropleth Map

<h3>Making a Choropleth Map</h3> <table> <th align="left">Topics</th> <tr> <td> <ul> <li><b>Integrating TopoJSON with tabular data</b></li> <li><b>Creating a loadAndProcessData module</b></li> <li><b>Visualizing an ordered attribute with color</b></li> <li><b>Showing data from 2 attributes in tooltip</b></li> <li><b>Adding a color legend</b></li> <li><b>Making the Color legend Clickable</b></li> <li><b>Implementing Unidirectional DataFlow</b></li> <li><b>Highlighting the selected color value</b></li> <li><b>Componentizing the Choropleth Map</b></li> <li><b>Highlighting Countries using the selected color value</b></li> </td> </tr> </table>
MIT Licensed

Similar vizzes

Loading thumbnail…

Choropleth Map

This choropleth map visualizes global economic classifications by country, coloring each nation according to its economy category. Built with D3 v5, it uses `d3.geoNaturalEarth1` for projection and `d3.geoPath` to render the map from TopoJSON world-atlas data, with country attributes loaded from a TSV file. A color legend, constructed via `colorLegend`, displays the ordinal color scale using `d3.scaleOrdinal` and `d3.schemeSpectral`. The SVG map supports zooming via `d3.zoom`, and hovering changes a country’s fill to red.

Eevavan8
91% match
Loading thumbnail…

D3 Course 10: Choropleth Map

This choropleth map visualizes world countries colored by economy type, with hover states highlighting individual regions and a legend displaying the color scale. The map uses a natural Earth projection rendered as SVG paths via d3.geoPath, with zoom support through d3.zoom. Data combines TopoJSON country boundaries from the World Atlas with tabular TSV metadata, plus CSV guest data. The color scale uses d3.scaleOrdinal with schemeSpectral, and the legend is custom-built using SVG circles and text.

Zzikitamar9
90% match
Loading thumbnail…

choropleth map

This choropleth map shows global economic classifications by country, with a color legend that supports interactive highlighting. Using D3 v5 and topojson, it renders GeoJSON features through `d3.geoNaturalEarth1` and `d3.geoPath` onto an SVG, while a `scaleOrdinal` maps the discrete economy values to a `schemeSpectral` palette. Clicking a legend entry filters the map via opacity changes. The map fetches world-atlas TopoJSON and TSV data, with hover and zoom enabled through D3’s zoom behavior.

MMert Gürkan
90% match
Loading thumbnail…

Choropleth Map

This choropleth map visualizes global economic classifications by coloring each country according to its income group. Built with D3 v5 and TopoJSON, it uses an ordinal color scale with the spectral scheme and renders geographic shapes via `d3.geoPath` with a natural Earth projection. The map supports pan and zoom through D3’s zoom behavior, and hovering highlights countries in red. A custom legend, generated with appended SVG circles and text, displays the color categories, while data is loaded from the World Atlas TopoJSON and TSV files.

Eevapavlinek
90% match
Loading thumbnail…

Choropleth Map

This choropleth map visualizes global economic data by coloring countries according to a categorical color scale. Users can click legend entries to highlight countries matching the selected category, dimming all others. Built with D3 v5, it uses `d3.geoPath` with a Natural Earth projection and `d3.scaleOrdinal` for coloring. The map loads country boundaries and economic classifications from a world-atlas TopoJSON dataset, while the interactive legend and country paths are rendered as SVG elements.

Iinroadings
89% match
Loading thumbnail…

Choropleth Map

This choropleth map visualizes global economic classifications by coloring each country according to its economy type. Using D3.js v5 with the `geoNaturalEarth1` projection and `geoPath` for rendering, it loads world map data from TopoJSON and TSV files containing country metadata. The color scale uses `scaleOrdinal` with `schemeSpectral` ranges, and hovering highlights a country in red while a tooltip displays the country name and economic group.

Ggcappadaniel
89% match
Loading thumbnail…

Chloropleth Map

This choropleth map visualizes global economic classifications by coloring each country according to its economy type, with a color legend to the side. Built with D3 v5, it uses `d3.geoPath` with the Natural Earth projection to render country boundaries from TopoJSON data loaded from the world-atlas package. An ordinal color scale maps economic categories to the spectral scheme, while zoom interaction and hover highlighting are implemented via `d3.zoom` and CSS. The legend is generated as a reusable SVG component through custom functions.

Ffbudwill
89% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map displays country-level economic classifications using a color scale based on world-atlas TopoJSON data. Users can click legend items to highlight countries matching that category while dimming others, and hover effects further emphasize individual countries. The visualization uses d3.geoPath with a geoNaturalEarth1 projection for map rendering, d3.zoom for panning and zooming, and d3.scaleOrdinal with schemeSpectral for color encoding. The legend and map are built as separate SVG components that re-render when the selection changes.

Ggcappadaniel
89% match