Let's make a World Map - Cholropleth with interactions

Let's make a World Map - Cholropleth with interactions

This example presents an interactive choropleth world map built with D3 v5 and TopoJSON, using a natural Earth projection rendered as SVG. The map colors countries by continent using a categorical color scale, with specific overrides for the United Kingdom and Egypt in green and orange. A zoom interaction enables panning and scaling, while a legend widget displays the color scale domain. Data is loaded from the world-atlas package, combining TSV metadata with TopoJSON geometry. Hovering reveals a tooltip with country name, economy, and continent information via appended title elements.

94% match

Let's make a World Map - Cholropleth with interactions

This choropleth world map colors each country by its economy classification using a diverging color scale. Users can zoom and pan the map, and hovering over a country reveals its name, economy type, and continent in a tooltip. The visualization uses d3.geoPath with a natural Earth projection, d3.zoom for interactions, and d3.scaleOrdinal with the RdYlGn scheme. It renders geographic data from the world-atlas TopoJSON and TSV datasets, with a custom color legend built using D3’s join pattern.

93% match

Choropleth Map with interactions

A choropleth map of world countries, colored by economic income group, supports interactive exploration. The map uses a natural Earth projection and is rendered as SVG. A color legend allows selection and highlighting of specific categories, while zooming and panning are enabled via d3.zoom. Data is loaded from the World Atlas TopoJSON and TSV files, and the visualization is implemented with d3.geoPath and d3.scaleOrdinal. Hovering a country displays its name and value in a tooltip.

Ggilbster

87% match

Let's make a World Map - choropleth with interactive filters

This example presents a world choropleth map colored by income group, rendered with SVG paths projected using d3.geoNaturalEarth1 and d3.geoPath. Users can click legend items to filter countries by income level, with non-selected countries dimmed to 10% opacity and a zoom interaction provided via d3.zoom. The map draws country boundaries from TopoJSON data augmented with TSV attributes, while the color legend uses d3.scaleOrdinal with an RdYlGn scheme for categorical coloring.

87% match

Let's make a World Map - simple with interactions

This example presents an interactive world map rendered in SVG, where each country is filled with green and highlights red on hover. Built with D3 v5 and TopoJSON, it loads world-atlas data from unpkg and projects it using `geoNaturalEarth1` and `geoPath`. The map supports zooming and panning via `d3.zoom`, with tooltips showing country names extracted from TSV data. The background sphere is drawn separately in dark blue, demonstrating a simple yet interactive geographic visualization.

interactive_choropleth_map

An interactive choropleth map colors world countries by economic classification using d3.geoNaturalEarth1 and d3.geoPath, with a clickable ordinal color legend to filter highlighted regions. Built with D3 v5 and TopoJSON world-atlas data, it supports zooming via d3.zoom and renders as SVG. Hovering dims non-selected countries while selected ones gain emphasis.

MMauradion

choropleth!

This choropleth displays a world map rendered with a natural Earth projection, coloring countries in light green against a blue sphere. Built with D3 v5 and TopoJSON, it loads country boundaries from the world-atlas dataset and draws them as SVG paths using d3.geoPath. Interactive zooming is enabled through d3.zoom, and hovering over any country turns it red. Each country path includes a title element showing its name, though the display of that name is not implemented.

AAbhijeet Panda

Choropleth Map with Interactive Filtering

A choropleth map displays world countries colored by an economic attribute, with interactive filtering that highlights selected categories and dims others. The map uses a natural Earth projection with a shadowed sphere, while a clickable color legend controls which categories remain prominent. Built with D3 v5, the visualization uses `d3.geoPath`, `d3.geoNaturalEarth1`, and an ordinal color scale based on spectral schemes. Data is loaded from the world-atlas TopoJSON and TSV files, with zooming enabled via D3's `zoom` component.

HHasideluxe