Skip to main content
SimilarExport ZIP
100%

D3 Course Code Along - Choropleth Map with Clickable Legend

✓ Published0🌍 Public
Rrenenadorp
Last edited Jul 27, 2020
Created on Jul 11, 2020

This choropleth map colors countries by income group using a categorical color scale. A clickable legend filters the map, dimming unselected categories to 10% opacity while highlighting the chosen group. Built with D3 v5, it uses d3.geoPath with a d3.geoNaturalEarth1 projection to render country boundaries from TopoJSON data. The visualization also incorporates d3.zoom for interactive panning and zooming, and animates the legend’s color transitions with d3.transition.

AI-generated description

https://www.youtube.com/watch?v=_8V5o2UHG0E

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 Course Code Along - Choropleth Map

This choropleth map colors world countries by income group, using a red sequential color scale with a natural Earth projection. The visualization includes interactive zooming and panning, plus hover effects that highlight individual countries on mouseover. Built with D3 v5, it loads TopoJSON country boundaries from the World Atlas and TSV metadata to join income classifications to each country. Animated color legend transitions update dynamically, while the globe outline is rendered using d3.geoPath with a sphere geometry.

Rrenenadorp
92% match
Loading thumbnail…

D3 Course Code Along - Choropleth Map

This choropleth map visualizes global income groups using a natural Earth projection, with countries colored according to their income classification. The map is rendered as SVG paths generated by `d3.geoPath` from TopoJSON data loaded from World Atlas, combined with TSV metadata. A custom color legend displays the ordinal color scale using `d3.scaleOrdinal` with reds, and a zoom interaction allows viewers to pan and scale the map. Animated transitions with `transition.duration` update the legend circles when the data domain changes.

Rrenenadorp
90% match
Loading thumbnail…

D3 Course Code Along - Choropleth Map

This choropleth map displays world countries colored by income group, with a legend showing the ordinal color scale. Built with D3 v5, it uses `d3.geoMercator` for projection, `d3.geoPath` to render geographic features from TopoJSON world-atlas data, and `d3.scaleOrdinal` with `schemeReds` for color encoding. Interactive zooming is enabled via `d3.zoom`. A custom color legend with animated circles transitions updates smoothly, and hover effects highlight individual countries.

XXiaoleiGuo
90% match
Loading thumbnail…

D3 Course Code Along - Choropleth Map

A choropleth map colors world countries by income group using a natural Earth projection, with a color legend and zoom interaction. It uses `d3.geoNaturalEarth1` and `d3.geoPath` to render the GeoJSON features, while `d3.scaleOrdinal` and `schemeReds` map categorical values to colors. The legend updates with a transition, and data comes from World Atlas TopoJSON and TSV files. Hovering highlights countries, and mouse-wheel zoom is supported via `d3.zoom`.

Nnnminh199914
90% match
Loading thumbnail…

Choropleth Map

This choropleth map colors countries by income group using a natural Earth projection, with a categorical color scale and a clickable legend of colored circles. The map supports zooming and panning via d3.zoom, and country tooltips display name and income group. Built with D3 v5, it uses d3.geoNaturalEarth1 and d3.geoPath to render SVG paths from TopoJSON data loaded from world-atlas, while the legend is implemented as a custom reusable component.

TToooooooT
88% match
Loading thumbnail…

Fork of D3 Course Code Along - Choropleth Map

This interactive choropleth map colors countries by income group, with a color legend that animates its circles and uses sequential reds from d3.scaleOrdinal. Built with d3.v5 and topojson, it projects world atlas data using d3.geoNaturalEarth1 and renders countries as SVG paths via d3.geoPath. A zoom tool from d3.zoom is applied, and hover effects highlight individual countries, while data is loaded from unpkg-hosted TSV and TopoJSON files.

KKamal Bahadur Rana
87% match
Loading thumbnail…

Choropleth map with Interactive clicking

A choropleth map of world countries colored by income group, with an interactive legend that filters and highlights selected categories. The map uses a Natural Earth projection via `d3.geoPath` and `d3.geoNaturalEarth1`, rendered as SVG paths from TopoJSON world-atlas data. Clicking a legend tick toggles a color value, reducing opacity of non-matching countries and dimming the globe sphere. Zooming via `d3.zoom` and `d3.event` allows pan and scale; the legend is built with ordinal `d3.scaleOrdinal` and the `schemeSpectral` color scheme.

Jjeelong
87% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map displays world countries colored by income group, with a legend that filters the map when clicked. Selecting a category dims non-matching countries and highlights the selected group, while the legend also remains interactive. Built with d3.geoPath and d3.geoNaturalEarth1 projection, it loads geographic data from the world-atlas TopoJSON dataset and supports zooming via d3.zoom. The color legend renders SVG circles and text with click handlers, using d3.scaleOrdinal with the color schemeSpectral. Hovering over a country turns it red, and tooltips show the country name and income value.

Ffloresh
87% match