Skip to main content
SimilarExport ZIP
100%

WorldMap

✓ Published1🌍 Public
KKelsey Xu
Last edited Feb 17, 2022
Created on Feb 16, 2022

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.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

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
92% 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
91% match
Loading thumbnail…

World Map

This example displays a world map rendered with D3’s `geoNaturalEarth1` projection and `geoPath`, drawing the sphere background and country boundaries. It loads world atlas TopoJSON data from the `world-atlas` package, converts it to GeoJSON with `topojson`’s `feature` function, and maps each country to an SVG path with a black fill and red stroke. The map is generated entirely client-side as SVG, using D3 v5.

Hhm0421
91% match
Loading thumbnail…

World Map

This example displays a world map rendered with D3’s `geoNaturalEarth1` projection and `geoPath`, drawing the sphere background and country boundaries. It loads world atlas TopoJSON data from the `world-atlas` package, converts it to GeoJSON with `topojson`’s `feature` function, and maps each country to an SVG path with a black fill and red stroke. The map is generated entirely client-side as SVG, using D3 v5.

Hhm0421
91% 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
91% match
Loading thumbnail…

dataMap

This example renders a 3D orthographic globe using D3.js and TopoJSON. It displays world countries as light green polygons with subtle black strokes atop a blue sphere. The code uses `d3.geoOrthographic` and `d3.geoPath` to project geographic coordinates to SVG paths. Country boundaries come from the World Atlas TopoJSON dataset (110m resolution), with features extracted via `topojson.feature`. The visualization demonstrates how D3 can combine geographic projections with topojson data to create interactive-style map views.

Kknstrom
91% 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
91% match
Loading thumbnail…

World Map with D3JS and TOPOJSON-SK

This example displays a world map composed of individual country regions. It renders an orthographic projection of the globe using the `d3.geoOrthographic` and `d3.geoPath` APIs from D3 v5, with country boundaries generated from TopoJSON data via the `topojson.feature` function. The map loads geographic coordinates from the world-atlas TopoJSON source, and SVG paths are styled with green fills and blue strokes on a light blue background.

Sskambhore04
91% match