Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Let's make a face with D3.js!

Public visualization

Viewing a saved revision (read-only)

14affe664fed464da99b7ecb8c354716

Let's make a face with D3.js!

0 stars0🌍 Public
OOliverlee1003
Last edited Feb 25, 2020
Created on Feb 21, 2020

This interactive choropleth map displays global income groups using a natural Earth projection, with a linked color legend that filters highlighted countries on click and enables zooming via `d3.zoom`. It loads world topology from the World Atlas TopoJSON and tab-separated metadata, processing features through `d3.geoPath` and `d3.geoNaturalEarth1`. Colors are assigned with `d3.scaleOrdinal` and `d3.schemeSpectral`. The legend, built with custom SVG groups, toggles selection states and updates opacity, while the map’s sphere and country paths respond to hover and interactive filtering.

AI-generated description

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