Skip to main content
SimilarExport ZIP
100%

dataMap

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

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.

AI-generated description
MIT Licensed

Similar vizzes

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

Maps

This example renders a world map using D3.js and TopoJSON, displaying countries as light green shapes against a dark blue spherical background. It uses d3.geoNaturalEarth1 for the projection and d3.geoPath to generate SVG paths from the world-atlas dataset. The code loads TopoJSON data, converts it to GeoJSON with topojson.feature, and appends country paths to an SVG container. The visualization demonstrates basic data binding and DOM manipulation while showing geographic features with minimal styling.

Cceresfin
89% match
Loading thumbnail…

Let's make a map with D3.js!

This example renders an orthographic globe using D3.js and TopoJSON, drawing country boundaries as green SVG paths with white strokes over a sphere background. It loads world geography from the world-atlas dataset, converts TopoJSON features via `topojson.feature`, and projects them with `d3.geoOrthographic` and `d3.geoPath`. The map is static, with no rotation or interaction, and displays all countries at a 110m resolution.

Aaidanoconnor1
89% match
Loading thumbnail…

Let's make a map with D3.js!

This example shows a simple orthographic world map rendered as an SVG, with countries filled in light green and a blue sphere representing the globe. It uses D3 v5’s `geoOrthographic` projection and `geoPath` to draw country boundaries from TopoJSON data loaded from the world-atlas dataset. The code appends a sphere path, then fetches the TopoJSON file, converts it to GeoJSON with the `feature` function from the topojson library, and binds the resulting country features to SVG paths.

DDukatino
89% match
Loading thumbnail…

Let's Make a Map

This example shows a world map rendered as a three-dimensional globe using an orthographic projection. The sphere is filled dark blue, while country boundaries appear in light green with subtle black strokes, all drawn as SVG paths. The code uses d3.geoOrthographic and d3.geoPath to project and trace the map, with data loaded from the world-atlas TopoJSON file. TopoJSON’s feature method extracts country geometries, and each is appended as an SVG path inside a fixed 960×500 canvas.

PPabloReyesBetanzo
88% match
Loading thumbnail…

Let's make a map with D3.js!

This example displays a world map using an orthographic projection, rendering countries as light-green SVG paths with dark strokes. It loads geographic data from a TopoJSON world-atlas file via `d3.json`, then converts it to GeoJSON using `topojson.feature`. The map is drawn with `d3.geoPath` and `d3.geoOrthographic`, projecting the spherical landmasses onto a flat plane. The dark blue background and minimal styling emphasize the Earth’s curved shape, creating a simple globe-like visualization.

NNita
88% match
Loading thumbnail…

Let's make a map with D3.js!

This example displays a world map rendered as SVG paths, with countries filled in light green against a dark blue sphere background. It loads geographic data from the world-atlas TopoJSON dataset and converts it to GeoJSON using the `feature` function from topojson. The map projects coordinates with `geoNaturalEarth1` and draws each country boundary via `d3.geoPath`, while a separate path renders the globe’s outline. The visualization demonstrates basic choropleth-style mapping using D3 v5’s geo modules.

MMichał Szumnarski
88% match
Loading thumbnail…

Let's make a map with D3.js!

This example displays a world map rendered as SVG paths, with countries filled in light green against a dark blue sphere background. It loads geographic data from the world-atlas TopoJSON dataset and converts it to GeoJSON using the `feature` function from topojson. The map projects coordinates with `geoNaturalEarth1` and draws each country boundary via `d3.geoPath`, while a separate path renders the globe’s outline. The visualization demonstrates basic choropleth-style mapping using D3 v5’s geo modules.

MMichał Szumnarski
88% match