D3 World Map II

100%

D3 World Map II

✓ Published1🌍 Public

Last edited Jun 20, 2022

Created on Jun 20, 2022

This world map displays country boundaries with a natural Earth projection, transitioning from light green to red on hover while showing country names via tooltips. Built with D3 v7 and TopoJSON, it uses d3.geoNaturalEarth1 and d3.geoPath to render SVG paths from world-atlas data, loading geometry and name mappings from JSON and TSV files.

AI-generated description

Highlighting on Hover using CSS
Adding simple tooltips using 'title' tag
- Loading multiple data files
- Looking up country name from id

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 World Map III

This example displays an interactive world map with countries rendered in light green against a light blue ocean. Users can pan and zoom the map using mouse or touch gestures, with a hover effect that highlights countries in red and reveals their names as tooltips. The visualization uses d3-geo with the geoNaturalEarth1 projection and d3.geoPath to draw SVG paths, while d3.zoom handles the interactive transformations. Geographic data comes from the world-atlas TopoJSON dataset, with country names loaded from a corresponding TSV file.

YYoung Song

90% match

Loading thumbnail…

D3 World Map

This example renders a world map using D3.js and TopoJSON, displaying country boundaries as light green polygons on a light blue sphere outline. The code demonstrates multiple geographic projections—Mercator, Orthographic, Stereographic, and Natural Earth—by sequentially assigning them to a single `d3.geoPath` generator, though only the final Natural Earth projection is visualized. Country features are loaded from the `world-atlas` dataset via `d3.json` and converted with TopoJSON’s `feature` method. The map is drawn as SVG paths with light styling for stroke and opacity.

YYoung Song

88% match

Loading thumbnail…

World Map with D3 Final

This interactive world map displays country boundaries and names using a natural Earth projection, with a colored sphere background and hover effects that highlight individual countries in red. Built with D3 v5 and TopoJSON, the visualization loads geographic data from the world-atlas package, combining TSV country name metadata with JSON topology data. The code uses `geoNaturalEarth1`, `geoPath`, and `zoom` for projection and panning, while SVG paths render the map with CSS styling for interactivity.

TToly

88% match

Loading thumbnail…

D3.js Map

This map visualization displays world countries on a natural Earth projection, allowing users to click individual countries to toggle their fill between light green and red. Built with D3.js v5 and TopoJSON, it loads geographic data from the world-atlas package and country names from a TSV file. The visualization uses d3.geoPath and d3.geoNaturalEarth1 for rendering, with d3.zoom enabling pan and zoom interactions on the SVG canvas.

Ffloresh

87% match

Loading thumbnail…

DV2_6_World Map

This interactive map displays world countries using a natural Earth projection, with hover highlighting and zoom/pan capabilities. The visualization loads geographic data from the World Atlas TopoJSON files and renders country boundaries as SVG paths via d3.geoPath. Country names are joined from the accompanying TSV dataset using ISO numeric codes, displayed as tooltips through SVG title elements. The d3.zoom behavior enables interactive exploration, while the color scheme distinguishes landmasses, oceans, and hover states. The code leverages d3.json, d3.tsv, and topojson.feature for data processing and d3.geoNaturalEarth1 for the projection.

NNagateja99

86% match

Loading thumbnail…

Map with D3.js

This map visualization displays world countries on a natural Earth projection using D3.js and TopoJSON data from the world-atlas dataset. It renders an SVG sphere background and country paths filled with teal, which turn red on hover through CSS. The code employs D3 v6 features like `geoNaturalEarth1` and `geoPath` to project geographic coordinates, while `topojson.feature` extracts country boundaries from the loaded TopoJSON file. A tooltip showing each country’s name appears via appended `title` elements.

WWayne716

86% match

Loading thumbnail…

World Map

This world map uses a natural Earth projection to display country boundaries, with a dark blue ocean sphere and light green landmasses. Hovering over a country turns it red and reveals its name via a tooltip. The visualization supports zooming and panning through d3.zoom, with geographic paths rendered using d3.geoPath. It loads world country geometries from TopoJSON and country names from a TSV file, both sourced from the world-atlas package.

Ggabcoderboi

86% match

Loading thumbnail…

World Map

This world map displays country boundaries using the Natural Earth projection, with countries colored in a light teal and highlighted in red on hover. The visualization uses D3.js v5 and the topojson library to load and convert TopoJSON data from the world-atlas package. The map renders as SVG paths via D3's geoPath and geoNaturalEarth1 projection, while the zoom interaction is handled through D3’s zoom component. Country names are joined from a TSV file using ISO numeric codes, shown as tooltips.

Tthanhtrant219

86% match