Skip to main content
Log in
D

D.A

@DAWUNHAN·3 public vizzes

Loading thumbnail…

Choropleth Map

This choropleth map colors world countries by their economic classification using a categorical color scale derived from d3.scaleOrdinal and d3.schemeSpectral. It draws geographic boundaries with d3.geoPath and a natural Earth projection, with hover highlighting and zooming via d3.zoom. Country metadata—including economy and income group—comes from a TSV file joined to TopoJSON geometry, and a custom legend component renders the color domain as circles with labels.

Mar 27, 2020
Loading thumbnail…

Choropleth Map

This choropleth map colors world countries by their economic classification using a categorical color scale derived from d3.scaleOrdinal and d3.schemeSpectral. It draws geographic boundaries with d3.geoPath and a natural Earth projection, with hover highlighting and zooming via d3.zoom. Country metadata—including economy and income group—comes from a TSV file joined to TopoJSON geometry, and a custom legend component renders the color domain as circles with labels.

Mar 27, 2020
Loading thumbnail…

Let's make a map with D3.js!

A world map rendered in SVG with D3.js displays countries as light green polygons against a blue sphere, using an equirectangular projection. The visualization loads geospatial data from a TopoJSON file via the `world-atlas` package and converts it to GeoJSON features with `topojson.feature`. D3’s `geoPath` and `geoEquirectangular` generate the country outlines, while a separate path for the sphere provides the ocean backdrop. The map is static, with no interaction or animation.

Mar 27, 2020