Fork of Interactive WorldMap

100%

Fork of Interactive WorldMap

✓ Published0🌍 Public

Last edited Jun 1, 2022

Created on May 24, 2022

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.

AI-generated description

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

MIT Licensed

Similar vizzes

Loading thumbnail…

Interactive 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.

KKelsey Xu

89% match

Loading thumbnail…

Fork of map

This interactive world map colors each country by economy group using a categorical ordinal scale with a spectral color scheme. Users can pan and zoom the map through d3.zoom, while hovering highlights individual countries. The visualization loads geographic data from the world-atlas TopoJSON dataset and joins it with TSV metadata, rendering with d3.geoPath and a natural Earth projection. A custom color legend component displays the ordinal scale, and the code imports utilities from d3 v5 and topojson.

RRahulChaitu999

87% match

Loading thumbnail…

Fork of Choropleth Map with Interactive Filtering

This choropleth map displays world economies using color-coded countries, with an interactive legend that filters the map by clicking on a category while dimming non-matching regions. Built with D3 v5, it uses `geoNaturalEarth1` and `geoPath` for the map projection, `scaleOrdinal` with `schemeSpectral` for coloring, and `zoom` for panning. Hovering reveals country names via `title` elements. Data comes from the world-atlas TopoJSON dataset, enriched with a TSV file of economy classifications. The SVG rendering synchronizes legend and map states through shared `selectedColorValue` events.

NNYCUBK201

86% match

Loading thumbnail…

Fork of Fork of Choropleth Map with Interactive Filtering

This choropleth map displays world countries colored by economy category, with an interactive color legend that filters the map when clicking legend items. The visualization uses d3.geoNaturalEarth1 projection and d3.geoPath to render the TopoJSON world data, while d3.scaleOrdinal maps economy values to colors. Clicking a legend item highlights matching countries and dims others, with d3.zoom enabling pan and zoom. Data comes from the world-atlas TopoJSON dataset.

DDjedjeX

85% match

Loading thumbnail…

Fork of Choropleth Map with Interactive Filtering

This choropleth map displays world economies categorized by income group, with an interactive color legend that filters the map when a category is clicked. Hovering reveals country names and values via SVG title elements. The visualization uses d3.geoNaturalEarth1 projection, d3.geoPath for map rendering, and d3.zoom for panning and zooming. Data comes from the world-atlas TopoJSON and TSV files, with color mapping via d3.scaleOrdinal and d3.schemeSpectral.

Bbkopruluoglu3

85% 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

84% match

Loading thumbnail…

Fork of Choropleth Map with Interactive Filtering

This choropleth map displays world countries colored by economy type, with an interactive color legend that filters the map when clicked. Hovering over legend items dims non-matching countries, while selected countries are highlighted and the sphere fades to emphasize the filter. Built with d3.v5, it uses d3.geoNaturalEarth1, d3.geoPath, d3.scaleOrdinal, and d3.zoom for panning and zooming, rendering as SVG from TopoJSON world-atlas data.

NNICHAPA

84% match

Loading thumbnail…

Fork of Choropleth Map with Interactive Filtering

This choropleth map displays world economies using a color scale, with an interactive legend that filters countries by clicking on color categories to highlight or dim them. The map supports pan and zoom through d3.zoom, while d3.geoNaturalEarth1 and d3.geoPath render the geographic shapes from TopoJSON data loaded via d3.json and d3.tsv. Hovering reveals country names and values through SVG title elements, and the legend uses d3.scaleOrdinal with a spectral scheme.

SSuzizaher

84% match