Skip to main content
SimilarExport ZIP
100%

Fork of Choropleth Map

✓ Published0🌍 Public
HhelloHailey-sketch
Last edited Nov 16, 2022
Created on Nov 16, 2022
Forked from Choropleth Map

This example displays a choropleth map of China’s provinces, colored by economic group using an ordinal color scale from `d3.scaleOrdinal` and `schemeSpectral`. It renders geographic boundaries with `d3.geoPath` and a natural Earth projection, and supports interactive pan and zoom via `d3.zoom`. A legend, built with custom SVG circles and text, shows category colors. Province data comes from a local `chinaMap.json` file, with additional metadata merged from a TSV source.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Choropleth Map

This fork of a choropleth map colors world countries by their economic classification using an ordinal color scale with a spectral scheme. The map uses the Natural Earth projection via `d3.geoPath` and `geoNaturalEarth1`, with data loaded from the World Atlas TopoJSON and TSV files. A custom color legend displays the categorical values with circles and text. The visualization supports zooming and panning through `d3.zoom`, and includes hover effects that highlight countries in red.

HHong
83% match
Loading thumbnail…

Fork of Fork of Choropleth Map

This choropleth map uses color to show the economy classification of countries, with a legend displaying the ordinal color scale. The visualization is built with D3 v5, using `d3.geoPath` and the `geoNaturalEarth1` projection to render world map features from a TopoJSON dataset. It employs `d3.scaleOrdinal` with a `schemeSpectral` color range to map economic groups, and includes interactive zooming via a custom `zoom` function.

YYisionLiu
83% match
Loading thumbnail…

中国地图

A choropleth map of China renders each province as an SVG path using a Mercator projection centered on the country. The D3.js code loads GeoJSON map data and applies a categorical color scale, with provinces highlighted yellow on mouseover. Province names are positioned using projected centroid coordinates, with a vertical offset applied to prevent overlap between Macau and Hong Kong labels. The visualization demonstrates D3’s geographic path generator (`d3.geoPath`) and projection utilities.

Zzhuomo-maker
83% match
Loading thumbnail…

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

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

Fork of Choropleth Map

This fork of a choropleth map colors countries by economic classification using an ordinal color scale with a spectral scheme. The visualization uses D3 v5’s `geoNaturalEarth1` projection, `geoPath`, and TopoJSON data from the world-atlas dataset to draw country boundaries. A zoom behavior lets users pan and scale the map, while an SVG color legend built from custom code displays the category colors. Hovering highlights individual countries, and the map updates with a red fill on mouseover.

MMark Baynes
82% match