Skip to main content
SimilarExport ZIP
100%

Fork of Choropleth Map

✓ Published0🌍 Public
MMajaha21
Last edited May 8, 2021
Created on May 8, 2021
Forked from 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.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Choropleth Map

This choropleth map visualizes countries colored by their economic classification, using colors from the D3 `schemeSpectral` scale. The map is rendered as SVG paths generated with `geoPath` and the `geoNaturalEarth1` projection, with country data loaded from the world-atlas TopoJSON and TSV files. A legend built with D3's `scaleOrdinal` and `selectAll` shows the color categories, while pan and zoom interactions are handled through `d3.zoom`. Hovering a country highlights it in red and reveals its name and economic group in a tooltip.

MMajaha21
96% match
Loading thumbnail…

Fork of Choropleth Map

This choropleth map colors countries by economic grouping using an ordinal color scale with a spectral scheme. It visualizes world geography with a natural Earth projection and includes a custom SVG color legend with circles and labels. The map supports zooming and panning via d3.zoom, and country paths are generated with d3.geoPath from TopoJSON data loaded from the World Atlas. Hovering highlights countries in red, with tooltips prepared via the title element.

HHadi Ghafouri
95% match
Loading thumbnail…

Fork of Choropleth Map

This interactive choropleth map colors countries by economic classification, with a hover effect that turns each country red and a custom color legend showing the categorical scale. Built with D3 v5, it uses `geoNaturalEarth1` and `geoPath` for map projections and rendering, while `scaleOrdinal` and `schemeSpectral` assign colors. The map loads world geometry from the world-atlas TopoJSON and TSV files, and supports zooming via the `zoom` event, which updates the SVG group’s transform.

Eexplorer123PiN
95% match
Loading thumbnail…

Fork of Choropleth Map

This choropleth map colors world countries by their economy classification, using a spectral ordinal color scale and a natural Earth projection. The visualization supports zooming and panning through d3.zoom, and displays a custom interactive legend built with SVG circles and text. It loads geographic and economic data from the world-atlas TopoJSON and TSV files, processing them with topojson.feature and d3.tsv. Country paths are rendered via d3.geoPath, with hover highlighting and a tooltip showing the country name and economy value.

Mmgweiner
95% match
Loading thumbnail…

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
95% match
Loading thumbnail…

Fork of Choropleth Map

This choropleth map colors world countries by economic classification using a spectral color scale, with a legend showing the ordinal categories. The map uses the Natural Earth dataset via TopoJSON and d3-geo's geoNaturalEarth1 projection. Users can zoom and pan through d3.zoom, and hovering highlights countries in red. The color legend is built with custom SVG components, while the map itself renders using the geoPath generator with tsv metadata joined to the geometry.

Vvivianaaai@qq.com
95% match
Loading thumbnail…

Fork of Choropleth Map

This choropleth map colors world countries by their economic classification using a spectral color scale, with an interactive color legend showing the categorical values. The map renders geographic boundaries and landmasses through D3’s geospatial projection and path generation, while hover effects highlight individual countries. Data is loaded from the World Atlas topojson and TSV files, processed via the `topojson` feature API, and colors are assigned using `d3.scaleOrdinal` with a `schemeSpectral` range. The view supports zoom and pan through D3’s interactive zoom behavior.

CChase Hall
94% match
Loading thumbnail…

Fork of Fork of Choropleth Map

This choropleth map colors countries by their economy classification using a spectral color scale, with hover highlighting and a circular legend showing the categorical values. The visualization loads world topology from the world-atlas TopoJSON dataset and joins it with TSV metadata. Built with D3 v5, it uses `d3.geoNaturalEarth1` projection, `d3.geoPath` for rendering SVG paths, `d3.zoom` for pan and zoom, and `d3.scaleOrdinal` with `schemeSpectral` for color mapping.

MMajaha21
94% match