D3.js map

100%

D3.js map - interactive

✓ Published0🌍 Public

Last edited Dec 16, 2022

Created on Dec 16, 2022

This interactive map displays world countries shaded in light green against a light blue sphere, with hover highlighting in red. Built with D3.js v7 and TopoJSON, it projects geographic data from the world-atlas countries-50m dataset using a natural Earth projection via d3.geoPath and d3.geoNaturalEarth1. Zoom functionality is handled by d3.zoom, which applies interactive transforms to the SVG group.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

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

92% match

Loading thumbnail…

Interactive map with D3.js

This interactive map visualizes world countries using a natural Earth projection, with hover highlighting and zoom-and-pan navigation. The D3.js code loads GeoJSON country boundaries from a TopoJSON dataset via `d3.json` and `topojson.feature`, then renders them as SVG paths with `d3.geoPath`. A blue sphere path represents the globe’s outline. The `d3.zoom` API enables user interaction by applying transform events to the SVG group, while CSS `:hover` styles change country fills to red.

MMartin Christensen

91% match

Loading thumbnail…

d3 Visualization Map

This example displays a zoomable world map using a natural Earth projection, with countries colored light green and the ocean rendered as a blue sphere. Built with D3 v5 and TopoJSON, it loads country boundaries from the world-atlas dataset (50m.json) and names from 50m.tsv. The map supports interactive pan and zoom via d3.zoom, while d3.geoPath and geoNaturalEarth1 handle geographic rendering. Countries highlight red on hover, with tooltips showing country names. The visualization is rendered as SVG, with the sphere and country paths generated from the projected GeoJSON features.

JJohnPaulPagelerJr

90% match

Loading thumbnail…

Let's make a map with D3.js!

This example displays an interactive world map using a natural Earth projection, with countries rendered as green SVG paths that turn red on hover. The map supports zooming and panning through a D3 zoom behavior applied to the SVG group. The visualization uses d3.geoNaturalEarth1, d3.geoPath, and topojson.feature to parse geographic data from the world-atlas dataset. A semi-transparent blue sphere outlines the globe, while country names appear as tooltips via appended title elements.

Ffbudwill

90% match

Loading thumbnail…

D3 Map with Interaction

This map displays world countries using a Natural Earth projection, with zoom and pan interaction enabled. Hovering over a country highlights it in red and reveals its name as a tooltip. The visualization uses d3.geoPath and d3.geoNaturalEarth1 to render TopoJSON and TSV data from the world-atlas dataset, with d3.zoom handling the interactive transformations.

Rrdeichert

90% match

Loading thumbnail…

Interactive maps

This interactive map displays world countries using a natural Earth projection, with hover states that highlight individual nations in red. The visualization loads geographic data from a world-atlas TopoJSON file and renders it as SVG paths, with country names appearing as tooltips. Built with D3 v5, it uses `d3.geoNaturalEarth1` for projection, `d3.geoPath` for path generation, and `d3.zoom` for panning and zooming. The map also includes a dark blue sphere background, while CSS styles control the country and hover fill colors.

Ddaanasma

90% match

Loading thumbnail…

interactive world map with d3

This interactive world map displays country outlines colored in light green over a blue sphere, with hover highlighting in red. It utilizes D3 v6’s `geoNaturalEarth1` projection and `geoPath` to render the map, while TopoJSON loads geographic data from the world-atlas package. Zooming is enabled via `d3.zoom`, and country names are joined from a TSV file. The visualization renders as SVG elements.

RRITUZZ

90% match

Loading thumbnail…

Let's make a map with D3.js!

This example shows an interactive world map rendered with D3.js, displaying country boundaries colored light green that turn red on hover. The visualization uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to draw geographic features, with zoom support through `d3.zoom`. It loads world-atlas TopoJSON data and a companion TSV file to map country names, appending tooltips with each country’s name. The map is drawn as SVG paths, including a dark blue sphere background.

Ss-janibekova

90% match