D3.js!

100%

✓ Published0🌍 Public

Last edited Feb 10, 2023

Created on Feb 10, 2023

Forked from Let's make a map with D3.js!

This example displays world countries as light green shapes on a dark blue sphere, using the Natural Earth 110m dataset. It employs d3.geoPath with a d3.geoNaturalEarth1 projection to render the map, and fetches TopoJSON via the topojson library's feature function. The SVG output is generated with D3 v5, with the sphere and country paths styled through CSS classes.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a map with D3.js!

This visualization shows a world map rendered as light green countries against a blue sphere, using a natural Earth projection. The map is built with D3.js v5 and TopoJSON, loading country boundaries from the world-atlas dataset. The code uses `d3.geoNaturalEarth1` for projection, `d3.geoPath` to generate SVG paths, and `feature` from TopoJSON to extract GeoJSON country features. Each country is drawn as an SVG path with a black stroke, while the overall sphere fill is blue.

Iianleekq

92% match

Loading thumbnail…

Let's make a map with D3.js!

This example displays a world map of countries rendered in light green on a blue sphere, using a natural Earth projection. It shows the geographic boundaries of nations as SVG paths, generated from a world-atlas TopoJSON dataset loaded via D3’s `json` function. The code uses `d3.geoPath` with a `geoNaturalEarth1` projection to convert geographic coordinates into screen paths, and the `topojson.feature` function to extract country features from the TopoJSON data. The sphere background is drawn as a separate path to create a globe-like visual context.

TThomas Seberechts

92% match

Loading thumbnail…

Let's make a map with D3.js

This example displays a world map with countries rendered as light green SVG paths on a blue sphere, using a natural Earth projection. The code loads geographic data from the world-atlas TopoJSON dataset and converts it to GeoJSON with topojson’s `feature` method. It builds the map with d3’s `geoPath` and `geoNaturalEarth1` projection, appending country paths and a sphere outline to the SVG canvas.

MMartin Christensen

91% match

Loading thumbnail…

Let's make a map with D3.js!

This visualization displays a world map using D3.js, with countries rendered as light green paths against a blue spherical backdrop. The example loads geographic data from the world-atlas TopoJSON collection and projects it using the Natural Earth projection via `d3.geoNaturalEarth1`. The map is drawn as SVG paths, generated by `d3.geoPath`, and the sphere outline is created from a synthetic Sphere geometry. Country boundaries appear with black strokes at low opacity, while the data is processed through the `topojson.feature()` API.

Ggcappadaniel

91% match

Loading thumbnail…

Let's make a map with D3.js!

Ggcappadaniel

91% match

Loading thumbnail…

Let's make a map with D3.js!

This example displays a world map with countries filled in light green against a dark blue ocean sphere, projected using the Natural Earth projection. The visualization is built with D3.js v5, using `d3.geoNaturalEarth1` for the projection and `d3.geoPath` to generate country boundaries from the world-atlas TopoJSON dataset. The `topojson.feature` library processes geographic features, and SVG paths render each country. The map is presented within an empty SVG canvas, with the sphere and country paths styled via CSS classes.

Ooptimizeresume

91% match

Loading thumbnail…

Let's make a map with D3.js!

This example displays a world map of countries filled with light green and outlined in black, set against a dark blue sphere representing the globe. The visualization uses D3.js v5 and the topojson library to load country boundaries from the world-atlas dataset, then renders them as SVG paths. The code applies a geoNaturalEarth1 projection through d3.geoPath, first drawing the sphere background and then appending a path for each country feature.

Ddaigokawabe

91% match

Loading thumbnail…

Let's make a map with D3.js!

This example demonstrates how to create a simple world map using D3.js, displaying countries as light green polygons against a blue sphere background. The visualization uses the `geoNaturalEarth1` projection and `geoPath` to generate SVG paths from TopoJSON data loaded from the world-atlas dataset. The code relies on D3 v5 and the topojson library, specifically using the `feature` function to convert TopoJSON to GeoJSON. The map is rendered entirely with SVG elements, with the sphere outline drawn first, followed by the country boundaries.

Cchaimmaeee

91% match