Fork of Choropleth Map

Fork of Choropleth Map

This example shows a choropleth map of world countries colored by economic classification, with an interactive color legend and zoom-and-pan navigation. The visualization uses d3.geoPath with the Natural Earth projection to render country boundaries from TopoJSON data loaded from the world-atlas package, while d3.scaleOrdinal with the Spectral color scheme maps economy categories to fill colors. Users can zoom and pan the map via d3.zoom, and hovering highlights individual countries in red. A custom color legend, built with reusable D3 selections, displays color swatches and labels in an SVG overlay.

MMario Sánchez

Fork of Choropleth Map

This example shows a natural Earth choropleth map where each country is colored by its economy category from a global dataset. Users can pan and zoom through the SVG map using d3.zoom, while a color legend built with ordinal scales and schemeSpectral displays the available classifications. The visualization loads TopoJSON world-atlas data, joins TSV attributes, and renders countries via d3.geoPath with hover effects that highlight individual states.

BBlakeMcMurray

Fork of Choropleth Map

This example visualizes world countries colored by economic grouping using an ordinal color scale with the spectral scheme. The map renders in SVG, with countries projected via d3.geoNaturalEarth1 and drawn using d3.geoPath, featuring hover highlighting and zoom behavior through d3.zoom. Data loads from World Atlas TopoJSON and TSV files, processed via topojson.feature and Promise.all. The legend component remains commented out, while the tooltip displays country names and economic categories via SVG title elements.

BBrian Tang

Fork of Choropleth Map

This example shows a choropleth map of the world, coloring each country according to its economy category using an ordinal color scale. The map renders with SVG paths generated by d3.geoPath and a Natural Earth projection, and it supports zooming and panning through d3.zoom. A custom color legend is built with circles and text labels. Data is loaded from world-atlas TopoJSON and TSV files, processed with topojson.feature, and the color scale uses d3.scaleOrdinal with schemeSpectral.

MMarwan Sulaiman

Fork of Choropleth Map

This choropleth map colors world countries by economic grouping, using a spectral color scale with a custom legend. The visualization reacts to user zoom and pan gestures, redrawing country boundaries through D3’s `geoPath` and `geoNaturalEarth1` projection. Country data merges TSV attributes with TopoJSON geometry via `topojson.feature`, and hovering any country highlights it in red, while a tooltip shows its name and economic category. The project relies on D3 v5’s `scaleOrdinal`, `schemeSpectral`, and the `zoom` event helper for interactivity.

MMajaha21

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

Fork of Choropleth Map

This visualization displays a choropleth map of world countries colored by income group using a categorical color scale. D3 v6 and topojson load geographic data from the World Atlas, while `geoNaturalEarth1` projection and `geoPath` render the SVG paths. A legend built with `scaleOrdinal` and `schemeSpectral` shows income categories. Pan and zoom interactions are enabled via `d3.zoom`, and hovering highlights countries in red.

RRishi Kavikondala

Fork of Choropleth Map

This choropleth map colors world countries by their economic classification, using a natural Earth projection and an ordinal spectral color scale. The visualization includes an interactive color legend built with a custom `colorLegend` function, and supports zooming and panning via `d3.zoom`. Data is loaded from World Atlas TopoJSON and TSV files using `d3.json` and `d3.tsv`, then processed with `topojson.feature`. Hovering highlights countries in red, while tooltips display the country name and economic group. The map is rendered as SVG with `d3.geoPath` and uses a simple CSS hover effect.

AAdlina Marini