Skip to main content
SimilarExport ZIP
100%

Interactive WorldMap

✓ Published3🌍 Public
KKelsey Xu
Last edited Feb 18, 2022
Created on Feb 16, 2022
Forked from WorldMap

This interactive visualization displays a world map colored by each country’s economy type, using a natural Earth projection. The map supports pan and zoom through `d3.zoom`, with country names and economy values shown as tooltips via SVG `<title>` elements. It loads geographic data from the world-atlas TopoJSON and country names from a TSV file, then maps economy categories to a spectral color scale using `d3.scaleOrdinal`. The code relies on `d3.geoPath` to render countries and a sphere outline, with hover effects changing country fills to red.

AI-generated description

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

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Interactive WorldMap

This interactive world map uses D3.js to visualize country-level economic data, coloring each nation with a categorical scale based on its economy type. The map renders geographic boundaries using d3.geoPath with d3.geoNaturalEarth1 projection, and supports zooming through d3.zoom. Data comes from world-atlas TopoJSON and TSV metadata, while a color legend uses d3-scale-chromatic. Additional code demonstrates animated interpolation between London and New York using d3.geoInterpolate, though that feature appears incomplete in the rendered output.

NNikkko1
89% match
Loading thumbnail…

world map with colors

This interactive choropleth map colors each country by its economy category, using a spectral color scale and click-to-highlight interaction to compare regions. Built with D3 v5, it renders country outlines via `d3.geoPath` with a Natural Earth projection, loads TopoJSON country boundaries from the World Atlas, and joins economic classifications from a TSV file. A zoom behavior enables panning and scaling, while an ordinal color legend supports filtering by clicking a category to fade unmatched countries.

BBajiSharifPatan@my.unt.edu
89% match
Loading thumbnail…

Easy map interactions

This example demonstrates an interactive map of world countries, colored by economic classification using a spectral color scale. Users can zoom and pan the map, and click the color legend to filter countries by economy type, which fades non-selected categories. Built with D3 v5, it uses `d3.geoPath` for map projection and `d3.geoNaturalEarth1` for geometry, coupled with `d3.zoom` for pan/zoom interactions. Data comes from the world-atlas package, merging TopoJSON geometry with TSV tabular data. The map renders as SVG paths, with hover effects and animated transitions for legend interactions.

WWarren-Fitzhenry
88% match
Loading thumbnail…

world map

This example shows a choropleth world map colored by each country's economy classification, with a clickable color legend that filters and highlights matching countries while dimming others. The map uses d3.geoNaturalEarth1 and d3.geoPath to render TopoJSON world-atlas data, with d3.zoom enabling pan and zoom interactions. A d3.scaleOrdinal maps the spectral color scheme to the economy categories, and tooltips display country names and values. The SVG rendering includes CSS hover effects and opacity transitions for non-selected regions.

Zzhangfa
88% match
Loading thumbnail…

Make a World Map with D3

This example shows a world map colored by economy type using a categorical color scale, with hover highlighting and zoom/pan interaction. The map uses D3 v5 with `d3.geoNaturalEarth1` projection, `d3.geoPath` for rendering, and TopoJSON from the world-atlas dataset. Country boundaries are drawn as SVG paths, colored via `d3.scaleOrdinal` with `schemeCategory10`, and tooltips appear on hover. The data comes from a TSV file mapping ISO country codes to names and economies.

Aamit0623
88% match
Loading thumbnail…

Interactive Filtering

This interactive choropleth map visualizes country-level economic data from the World Atlas, rendered as SVG projections using D3’s `geoNaturalEarth1` and `geoPath` APIs. Users click countries to highlight them, which dims all others, and adjust the categorical color legend to filter which economies appear vivid. A color scale from `scaleOrdinal` with `schemeSpectral` maps economy types, while pan and zoom controls rely on D3’s `zoom` event. Country data combines TSV attributes with TopoJSON geometry via `topojson.feature`.

NNikhil Prakash
87% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map visualizes the world's economies, coloring each country according to its economic classification. Users can zoom and pan the map via `d3.zoom`, while the color legend offers an interactive click handler, though its filtering effect is not implemented. The visualization loads geographic data from the world-atlas TopoJSON and TSV files, using `d3.geoPath` with a `geoNaturalEarth1` projection to render countries as SVG paths. A spectral color scale maps economy categories to hues, and hovering highlights a country in coral.

MMichał Szumnarski
87% match
Loading thumbnail…

world map

A choropleth map of world countries colored by economy category, with an interactive legend that filters the map when clicking a category. Hovering a country displays its name and value via a tooltip. The visualization uses D3 v5 with d3.geoNaturalEarth1 projection, d3.geoPath for rendering, and d3.zoom for pan and zoom. Data comes from the world-atlas TopoJSON and TSV files, processed with topojson.feature and d3.tsv.

BBajiSharifPatan@my.unt.edu
87% match