Skip to main content
SimilarExport ZIP
100%

Let's make a map with D3.js!

✓ Published0🌍 Public
Rrichad97
Last edited Apr 25, 2020
Created on Apr 25, 2020

This example displays a world map rendered as blue SVG paths with white borders, highlighting each country in red on hover. It demonstrates a basic geographic visualization workflow using D3.js, loading country boundaries from the world-atlas TopoJSON dataset and converting them with `d3.geoMercator` projection and `d3.geoPath`. The code uses `topojson.feature` to extract GeoJSON from the TopoJSON file and appends the resulting paths to an SVG canvas, with hover styling handled by CSS.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a map with D3.js!

This example renders a world map of countries using D3.js and TopoJSON. It loads geographic data from the world-atlas dataset and displays country boundaries as SVG paths. The visualization uses `d3.geoMercator` for the projection and `d3.geoPath` to generate the path data from the TopoJSON features. Each country is appended as a `path` element to an SVG canvas sized 960 by 500 pixels.

Kkdvs94
93% match
Loading thumbnail…

Let's make a map with D3.js!

This example shows a world map rendered as SVG paths, with country boundaries drawn from TopoJSON data. The visualization uses D3 v5’s `geoMercator` projection and `geoPath` to convert geographic coordinates into screen paths, while the `topojson.feature` API extracts country geometries from the world-atlas dataset. All countries are appended as individual `path` elements to a 960×500 SVG canvas. The code loads data asynchronously via `d3.json` and relies on the bundled `index.js` to handle the data-binding and path generation.

Aaxliao
93% match
Loading thumbnail…

Let's make a map with D3.js!

This example renders a world map using D3.js and TopoJSON. It loads country boundaries from the world-atlas dataset and projects them with `d3.geoMercator`. The map is drawn as SVG paths using `d3.geoPath`, with countries filled in green and outlined in black. The code imports specific functions like `select`, `json`, and `feature` from D3 v5 and TopoJSON, and applies a dark blue background via CSS.

FFernando Gonzalez - Valadez
92% match
Loading thumbnail…

Let's make a map with D3.js!

This example displays a world map rendered with SVG paths, using D3.js v5 and TopoJSON. It loads geographic country boundaries from the world-atlas dataset and projects them with a Mercator projection. The code uses `d3.geoPath` and `d3.geoMercator` to generate the map, while `topojson.feature` converts the TopoJSON data into GeoJSON features. Countries appear filled in steel blue with black, semi-transparent borders, demonstrating a minimal choropleth-style base map.

HHwl98
92% match
Loading thumbnail…

Let's make a map with D3.js!

This example demonstrates how to create a world map using D3.js and TopoJSON. It renders country boundaries as green SVG paths with thin black strokes on a dark blue background, using a Mercator projection. The visualization loads geographic data from the world-atlas TopoJSON file and converts it to GeoJSON features with the `feature` function. The code uses `d3.geoMercator` and `d3.geoPath` to project the map coordinates and generate the path data.

Ddacoylo
92% match
Loading thumbnail…

Let's make a map with D3.js!

This example shows a simple world map rendered with D3.js, displaying country boundaries using data from the world-atlas TopoJSON dataset. Country shapes are drawn as SVG paths via `d3.geoPath` with a natural Earth projection, and hovering highlights each country in red. The code uses `d3.json`, `topojson.feature`, and appends `<title>` elements for each path, though it only logs data to the console. The page loads D3 v5, TopoJSON, and hexmap libraries, with a gray background and light blue countries.

Kklumng
92% match
Loading thumbnail…

Let's make a map with D3.js!

This example creates a world map rendered as SVG using D3 v5 and TopoJSON. It loads world country boundaries from the World Atlas TopoJSON dataset, projects them with the `geoNaturalEarth1` projection, and draws each country as a filled path using `d3.geoPath`. A blue sphere background is added first, with countries shown in light green and outlined with subtle black strokes. The map displays the entire globe with country shapes accurately projected.

CChip
92% match
Loading thumbnail…

Let's make a map with D3.js

This example displays a world map rendered as an SVG, with countries filled in green against a dark blue spherical backdrop. It fetches country boundaries from a TopoJSON file via the world-atlas dataset, then projects them using the Hufnagel projection from `d3-geo-projection`. The code builds paths with `d3.geoPath` and `d3.json`, styling the sphere and landmasses through CSS classes. It relies on D3 v5, TopoJSON’s `feature` method, and demonstrates a compact, data-driven mapping workflow.

JJames Malvern
92% match