Fork of D3 Course Code Along - Choropleth Map

100%

Fork of D3 Course Code Along - Choropleth Map

✓ Published0🌍 Public

Last edited Dec 13, 2022

Created on Dec 13, 2022

Forked from D3 Course Code Along - Choropleth Map

A world choropleth map colors each country by its income group, using a sequential red color scale derived from World Bank data. The visualization renders with D3 v7 and the `geoNaturalEarth1` projection, building paths via `geoPath` and TopoJSON country geometries. A custom color legend animates its circles with a `transition` to reflect scale changes, while a zoom behavior lets users pan and scale the map. Country names appear as tooltips on hover, drawn from the accompanying TSV metadata.

AI-generated description

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

MIT Licensed

Similar vizzes

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

95% match

Loading thumbnail…

Fork of D3 Course Code Along - Choropleth Map

This choropleth map visualizes world country income groups using a natural Earth projection, with color-coded paths representing each nation. Users can pan and zoom interactively, while a legend highlights the categorical color scale. The visualization loads TopoJSON country boundaries and TSV metadata via `Promise.all`, processes them with `d3.geoPath` and `geoNaturalEarth1`, and renders the legend with custom D3 selections and transitions.

SSathiyaak22

94% match

Loading thumbnail…

Fork of D3 Course Code Along - Choropleth Map

A choropleth map of world countries colored by income group, rendered with a Natural Earth projection. The visualization loads world-atlas TopoJSON data via `d3.json`, projects it with `d3.geoPath`, and colors each country using a sequential red scheme from `d3.schemeReds` based on a categorical `d3.scaleOrdinal` scale. An interactive legend built with custom SVG `circle` and `text` elements shows the color categories. The map supports zooming via `d3.zoom` and includes hover effects that highlight countries.

NNandhakumaar T

94% match

Loading thumbnail…

Fork of D3 Course Code Along - Choropleth Map

This choropleth map visualizes world population data by country income group, using color intensity to show distribution across regions. The visualization supports interactive zooming and panning, with hover effects highlighting individual countries. Built with D3 v5, it uses `geoNaturalEarth1` projection, `geoPath`, and `geoMercator` for map rendering, while `scaleOrdinal` with `schemeReds` maps income categories to colors. A dynamic color legend animates its circles using transitions. Country boundaries and income classifications come from the World Atlas TopoJSON dataset, with a hover tooltip displaying country names.

Aaruna-rajeswari

94% match

Loading thumbnail…

Fork of D3 Course Code Along - Choropleth Map

This interactive choropleth map visualizes countries color-coded by income group on a natural Earth projection. A legend with animated transitions updates when the color scale changes. The visualization uses d3.geoPath with TopoJSON data from the World Atlas, and builds the map with SVG paths. Hover effects highlight individual countries, while zoom and pan are enabled through d3.zoom. World population data from CSV files supports additional context.

SSathya1208

93% match

Loading thumbnail…

Fork of D3 Course Code Along - Choropleth Map

This visualization presents a world map using a discrete color scale to categorize countries by income group, with a legend and hover effects identifying countries. The map is generated with `d3.geoPath` and a `geoNaturalEarth1` projection, converting TopoJSON world atlas data. Animated color transitions in the legend are handled via `.transition().duration(1000)`. The underlying population data is loaded from a TSV file, while the map geometry comes from the world-atlas package.

MMohamedSulaiman8

93% 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

91% match

Loading thumbnail…

Fork of Choropleth Map

This fork of a choropleth map colors world countries by income group using a spectral color scale. The visualization uses D3 v5 and the `geoNaturalEarth1` projection with `geoPath` to render country shapes from the world-atlas TopoJSON and TSV data. A custom `colorLegend` displays the ordinal color scale as circles and text, and zooming is enabled through D3’s `zoom` event. Hovering a country turns it red, and tooltips show its name and additional text.

Ttbar72

91% match