Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published0🌍 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.

MIT Licensed

Similar vizzes

Loading thumbnail…

Choropleth Map with D3.js!

This choropleth map visualizes global income groups using D3.js to color each country based on its economic classification. Built with d3.geoNaturalEarth1 projection and d3.geoPath, the SVG renders geographic boundaries from TopoJSON data sourced from the world-atlas package, with income labels joined from a TSV file. The map includes an ordinal color scale using d3.scaleOrdinal and d3.schemeSpectral, supplemented by a custom color legend component. Interactive features include zooming via d3.zoom and hover effects that highlight individual countries in red.

CCarloWK1202
90% match
Loading thumbnail…

Choropleth map with D3.js!

This choropleth map visualizes world countries colored by income group using D3.js. The map uses a natural Earth projection via `d3.geoPath` and `geoNaturalEarth1`, with country boundaries loaded from TopoJSON world-atlas data and income classifications joined from a TSV file. A color legend built with `scaleOrdinal` and `schemeSpectral` displays the categorical color scale. Interactive zooming is implemented through `d3.zoom`, and hovering over a country highlights it in red while a tooltip reveals its name and income group.

Fforcox43
89% match
Loading thumbnail…

Interative Filtering with D3.js!

This interactive choropleth map displays global economies color-coded by income group, with a connected color legend that filters the map on click. The map uses D3 v5’s `geoNaturalEarth1` projection, `geoPath`, and `topojson` for world-50m data, while the legend’s ordinal `scaleOrdinal` and `schemeSpectral` drive fills. Hovering highlights countries, and the legend’s click handler toggles opacity, dimming non-selected regions. The SVG rendering supports zoom via D3’s `zoom` behavior.

CCarloWK1202
89% match
Loading thumbnail…

Choropleth Map w Interactive Filtering

This choropleth map displays global income groups, color-coded using a spectral scale and an interactive zoom projection built with D3’s geoNaturalEarth1 projection and geoPath. The map renders country boundaries from World Atlas TopoJSON and TSV data, with a custom legend generated by colorLegend.js. Users can pan and zoom via the zoom overlay, while hovering over a country highlights it in gray and reveals its name and income group in a tooltip. The visualization demonstrates SVG-based DOM manipulation and event handling through D3’s selection and event APIs.

Cceresfin
88% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map displays global income groups using a natural Earth projection, with countries colored by income classification. Clicking a color legend item filters the map to highlight only countries in that group, dimming all others and adjusting the sphere’s opacity. Hovering reveals country names and values via SVG titles. Built with d3.geoPath, d3.zoom, and d3.scaleOrdinal, it loads TopoJSON and TSV data from the world-atlas package, with interactive legend selection managed through d3 event handlers.

Rraylexlee
88% match
Loading thumbnail…

Choropleth Map with interacti filtering D3.js

This choropleth map visualizes global income groups, with countries colored according to a categorical scale. Users can click legend items to filter the map, dimming countries that do not match the selected category. The visualization is built with D3.js v5, using `geoNaturalEarth1` and `geoPath` for map projections and SVG paths for rendering. Data is loaded from the World Atlas TopoJSON and TSV datasets, with the color legend implemented as an interactive SVG component.

Ddanhuijia
88% match
Loading thumbnail…

Choropleth map with Interactive clicking

A choropleth map of world countries colored by income group, with an interactive legend that filters and highlights selected categories. The map uses a Natural Earth projection via `d3.geoPath` and `d3.geoNaturalEarth1`, rendered as SVG paths from TopoJSON world-atlas data. Clicking a legend tick toggles a color value, reducing opacity of non-matching countries and dimming the globe sphere. Zooming via `d3.zoom` and `d3.event` allows pan and scale; the legend is built with ordinal `d3.scaleOrdinal` and the `schemeSpectral` color scheme.

Jjeelong
87% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map displays world countries colored by income group, with a legend that filters the map when clicked. Selecting a category dims non-matching countries and highlights the selected group, while the legend also remains interactive. Built with d3.geoPath and d3.geoNaturalEarth1 projection, it loads geographic data from the world-atlas TopoJSON dataset and supports zooming via d3.zoom. The color legend renders SVG circles and text with click handlers, using d3.scaleOrdinal with the color schemeSpectral. Hovering over a country turns it red, and tooltips show the country name and income value.

Ffloresh
87% match