Skip to main content
SimilarExport ZIP
100%

D3: World Map

✓ Published0🌍 Public
Ccaedcagt76@gmail.com
Last edited Dec 22, 2023
Created on Dec 22, 2023

This example visualizes world geography using D3 and TopoJSON, rendering country boundaries as an SVG map. It loads spatial data from the `world-atlas` package via `d3.json` and converts TopoJSON features with the `feature` function. The map is drawn using `d3.geoPath` and a `d3.geoEqualEarth` projection onto a 960×500 SVG canvas. A CSS class named `.highlighted` is defined but not actively applied, leaving the map uncolored and displaying only default black country outlines against a white background.

AI-generated description

Using D3 to visualize world maps

References:

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 World Map

This example displays a black-and-white world map using the Mercator projection, with country boundaries outlined in white. The map is rendered as an SVG using the D3.js v3 library, specifically employing `d3.geo.mercator()`, `d3.geo.path()`, and `d3.json()` to load and parse a `world-110m2.json` TopoJSON file. Country geometries are extracted from the TopoJSON topology via `topojson.object()` and drawn as SVG `path` elements. The visualization appears on a simple HTML page with a custom CSS rule defining the stroke and fill for each path.

GGT-GillesTeuwen
89% match
Loading thumbnail…

World Map Example

This example renders a world map using D3.js and TopoJSON, displaying country boundaries as SVG paths. The visualization shows a natural Earth projection of the globe, with countries filled in light green and oceans in blue, using a grayscale-style aesthetic. The code loads geographic data from the world-atlas TopoJSON file and applies `d3.geoNaturalEarth1` for projection, `d3.geoPath` for path generation, and `topojson.feature` to extract country features. A sphere outline is drawn first, followed by individual country paths appended to the SVG canvas.

Ccpsshan
89% match
Loading thumbnail…

WorldMap

This example renders an orthographic world map using D3.js and TopoJSON. It loads country boundaries from the world-atlas dataset and projects them onto a sphere with `d3.geoOrthographic()`. The map draws a blue sphere background and light green country paths with thin black strokes using `d3.geoPath()`. The visualization demonstrates basic data joining and SVG path generation from geographic features.

KKelsey Xu
89% match
Loading thumbnail…

World Map

This example renders an interactive world map using SVG, with countries shown in brown and the globe’s sphere in light blue. It loads geographic data from the world-atlas TopoJSON file and converts it to GeoJSON via the `feature` method. The map uses `d3.geoEquirectangular` for projection and `d3.geoPath` to generate the paths. Hovering highlights countries by changing their fill color through CSS, while D3 v5 and TopoJSON handle the data binding and rendering.

HHemanthh81
88% 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
88% match
Loading thumbnail…

D3 World Map

This example displays a world map rendered as black countries with white borders on an SVG canvas. It uses D3.js version 5 and the `d3.geoMercator()` projection to transform geographic coordinates, with `d3.geoPath()` drawing the country boundaries. The map data is loaded from a GeoServer WFS endpoint as GeoJSON, which is then converted to TopoJSON via the `topojson` library to structure the geometries for rendering. The visualization showcases D3’s ability to handle geographic data through its projection and path APIs.

AAsmabee Khan
88% 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
88% 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
88% match