Click to select with D3.js!

100%

Click to select with D3.js!

✓ Published0🌍 Public

Last edited Mar 18, 2021

Created on Mar 18, 2021

This example displays a world map using an equirectangular projection, with each country rendered as a green SVG path with a black stroke. The data is loaded from the world-atlas TopoJSON dataset and converted to GeoJSON features via `topojson.feature`. The visualization relies on D3 v6’s `d3.json`, `d3.geoEquirectangular`, and `d3.geoPath` to generate the map geometry, and appends all paths to the SVG container at once. No click interaction or selection behavior is implemented beyond the title’s suggestion.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a map with D3.js!

This example presents a static world map rendered with a light green fill on a dark blue background. It uses the equirectangular projection to display country boundaries as SVG paths, with data from the world-atlas TopoJSON dataset. The code builds the visualization with D3 v5’s `geoPath` and `geoEquirectangular` functions, alongside TopoJSON’s `feature` method to convert the TopoJSON topology into GeoJSON features. Each country is appended as a separate `path` element to the SVG canvas.

AArriannePandaraoan

89% match

Loading thumbnail…

World Map with D3.js and Topojson

This example displays a world map using an equirectangular projection, rendered as an SVG graphic. The map is drawn with countries filled in orange, each with a white stroke, and a blue sphere representing the globe's background. Hovering over a country changes its fill to green. The visualization is built with D3.js version 5 and TopoJSON version 3, loading country boundaries from the world-atlas countries-110m.json file. It uses `d3.geoEquirectangular` for projection, `d3.geoPath` for generating SVG paths, and TopoJSON's `feature` method to convert the dataset into GeoJSON features.

Bbugfree55

89% match

Loading thumbnail…

World map with D3.js!

This example displays a world map using D3.js v5 and TopoJSON, with countries rendered as light green paths with subtle black borders on a blue background. It loads GeoJSON data from the world-atlas package via `d3.json`, converts it to features with TopoJSON’s `feature` function, and projects it using `d3.geoEquirectangular` and `d3.geoPath`. The SVG paths are generated and appended to the canvas, creating a simple, interactive-free geographic visualization.

Kkaviya-ds

89% match

Loading thumbnail…

world map

This example displays a world map using a spherical projection. It renders countries as green paths with black outlines on a blue ocean sphere, and hovering over a country highlights it in orange. Built with D3 and TopoJSON, it uses `d3.geoEquirectangular` for projection and `d3.geoPath` to generate SVG paths from GeoJSON data sourced from the world-atlas countries-110m.json file. The visualization employs D3’s `select` and `json` methods to load and append geographic features to the SVG.

Sshabbab01

89% match

Loading thumbnail…

Let's make a map with D3.js!

This example shows a world map rendered as a static SVG, with countries filled in green and a light blue sphere background. It loads geographic data from the world-atlas TopoJSON file and converts it to GeoJSON using `topojson.feature`. The map uses the `geoNaturalEarth1` projection and draws boundaries with `d3.geoPath`. D3 selections append one SVG path per country, while a dedicated sphere path provides the ocean backdrop.

TTsing

89% match

Loading thumbnail…

World Map

This example displays a world map rendered as SVG paths using D3.js. It loads geographic data from the world-atlas TopoJSON file and converts it to GeoJSON features via the `topojson.feature` API. The map uses a `d3.geoMercator` projection and `d3.geoPath` to generate the path data for each country. The code demonstrates basic data binding with `selectAll`, `data`, and `enter` to append country shapes to the SVG canvas.

Llrakla

89% match

Loading thumbnail…

World Map D3.js!

This example displays an interactive world map using SVG, with countries rendered in green and the ocean as a blue sphere. It loads geographic data from the world-atlas TopoJSON file and converts it to GeoJSON using the TopoJSON `feature` method. Countries are drawn with `d3.geoPath` and the `geoEquirectangular` projection, and hovering over a country changes its fill to orange via CSS. The map uses D3 v5 for data binding and rendering.

NNikkko1

88% match

Loading thumbnail…

world Map

This visualization displays an interactive world map using a simple equirectangular projection. Countries are rendered as SVG paths with light green fills and indigo outlines, with hover states that turn them maroon. The map supports pan and zoom interactions. The code uses d3.geoEquirectangular, d3.geoPath, and d3.zoom, loading GeoJSON data from the world-atlas TopoJSON file via topojson.feature.

Mmandadi1999

88% match