Skip to main content
SimilarExport ZIP
100%

map with D3.js!

✓ Published0🌍 Public
TTomoyukiEguchi
Last edited Jan 17, 2021
Created on Jan 7, 2021

This example displays a world map using D3.js, with each country rendered as a gray SVG path that turns red on hover. It uses the `d3.geoMercator` projection and `d3.geoPath` to draw the countries from TopoJSON data loaded via `d3.json` from the world-atlas package. The map also fetches COVID-19 statistics from the WHO’s global table CSV, though the data is only logged to the console rather than visualized. The code relies on both D3 v5 and the TopoJSON client library.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a map with D3.js!

This interactive SVG map visualizes world countries, highlighting each one in red on hover and displaying its name via a tooltip. Built with D3.js v5, it uses `geoMercator` projection and `geoPath` to render geographic features from TopoJSON data, while country names are loaded from a TSV file. The map supports zooming through D3's `zoom` event, which transforms the map group.

TTomoyukiEguchi
89% match
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
87% match
Loading thumbnail…

Let's make a map with D3.js!

This example renders a world map from TopoJSON data loaded from the World Atlas package, using D3’s `geoMercator` projection and `geoPath` to draw each country as an SVG path. The map features green-filled countries with black strokes, and the code demonstrates the basic data join pattern with `selectAll` and `enter().append()`.

TTheRedUnicorn
87% 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
87% match
Loading thumbnail…

Let's make a map with D3.js!

This example demonstrates how to create an interactive world map using D3.js v5 with TopoJSON data from the world-atlas package. The map renders countries as SVG paths using the `d3.geoNaturalEarth1` projection and `d3.geoPath` generator, with a blue sphere background. Country shapes are filled green and turn red on hover, while each path includes a title element displaying "hello". The code loads geographic data asynchronously via `d3.json` and converts TopoJSON features using the `feature` function from the topojson library.

Ttrustyred
86% match
Loading thumbnail…

Let's make a map with D3.js!

This example shows a simple world map rendered as an SVG, with countries filled in light green against a blue ocean sphere. The code uses D3 v5’s `geoMercator` projection and `geoPath` to draw geographic features, while TopoJSON’s `feature` method extracts country boundaries from the world-atlas dataset. Country paths are appended dynamically after loading the 110m resolution GeoJSON via a promise, with styling applied through CSS classes.

TTsukiij
86% match
Loading thumbnail…

Map with D3.js!

This example displays a world map rendered as an SVG, with countries filled in light green against a blue ocean background. It uses D3.js version 5 to load geographic data from the World Atlas TopoJSON file and convert it to GeoJSON features. The map is drawn with the `d3.geoPath` and `d3.geoNaturalEarth1` projection, while `topojson.feature` extracts country boundaries from the dataset. The code appends paths for the sphere and each country, applying basic styling from an external CSS file.

Mma-jacobs
86% match
Loading thumbnail…

World Map visualization with D3.js!

This example displays a world map using D3.js v5 and TopoJSON, rendering countries as red SVG paths with blue strokes on a green spherical backdrop. It uses `d3.geoEquirectangular` for the projection and `d3.geoPath` to generate the country shapes from the `world-atlas` dataset’s countries-110m.json file. Hovering over a country changes its fill color to brown, highlighting individual nations.

BBajiSharifPatan@my.unt.edu
86% match