Skip to main content
SimilarExport ZIP
100%

Fork of Let's make finland a map with D3.js!

✓ Published0🌍 Public
Bbugfree55
Last edited Jul 18, 2022
Created on Jul 18, 2022

This example renders a world map using D3.js and the TopoJSON library from the `world-atlas` dataset. It draws a sphere as a blue background and countries as light-green filled paths with subtle black strokes. The code uses `d3.geoPath` with a `geoNaturalEarth1` projection, and it loads geographic data from a remote JSON file. It demonstrates how to project geographic coordinates and display vector-based map features in an SVG container.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Let's make a map with D3.js!

This example renders a world map using D3.js and TopoJSON. It displays continents as light green polygons with faint black borders on a blue sphere, using a natural Earth projection. The code constructs the graticule and land masses via `d3.geoPath` with `d3.geoNaturalEarth1`, and loads country boundaries from the world-atlas GeoJSON. Countries are drawn as SVG paths, with the sphere background filled separately.

SSeekerzero
91% match
Loading thumbnail…

Fork of Let's make a map with D3.js!

This example visualizes a world map using a natural Earth projection, rendering countries as light green paths with dark strokes on a blue spherical backdrop. It loads geographic data from a world-atlas TopoJSON file via `d3.json`, then applies the `topojson` library’s `feature` function to extract country features. The SVG paths are generated using `d3.geoPath` and the `d3.geoNaturalEarth1` projection, which also draws the sphere outline. The input data source is the unpkg-hosted world-atlas dataset, and the rendering is entirely vector-based, using SVG elements styled by the included CSS.

TToooooooT
91% match
Loading thumbnail…

Fork of Let's make a map with D3.js!

This example renders a world map using D3.js v5 and the topojson library. It projects geographic data from the world-atlas 110m GeoJSON dataset with the Natural Earth projection, drawing each country as a filled path with a subtle stroke. The visualization also displays a blue sphere representing the globe background. The code employs `d3.geoPath` and `geoNaturalEarth1` for map projection and path generation, while `topojson.feature` converts the raw topology into usable features. Styling is applied via CSS classes for the sphere and countries.

NNaimisha-M
91% match
Loading thumbnail…

Fork of Let's make a map with D3.js!

This example displays a world map using a natural Earth projection, with countries filled in light green and oceans in blue. It renders geographic boundaries as SVG paths, generated from a world-atlas dataset loaded via D3’s `json` function. The code employs `d3.geoPath` with the `geoNaturalEarth1` projection and uses the `topojson` library’s `feature` method to extract country geometries from the TopoJSON data. A static sphere outline is drawn first, followed by each country path, with stroke opacity creating subtle border definition.

Ffsajedi22
91% match
Loading thumbnail…

Fork of Let's make a map with D3.js!

This visualization employs D3.js v5 and TopoJSON to render a world map on an SVG canvas. The map uses the Natural Earth dataset loaded from the `world-atlas` package, with country boundaries drawn as SVG paths using the `geoNaturalEarth1` projection and `geoPath` from D3. Countries are filled in light green with black outlines, while the surrounding sphere is filled blue. The code demonstrates DOM manipulation by selecting the SVG element, appending a sphere path, and then adding country paths after asynchronously fetching the geographic data.

MMajaha21
91% match
Loading thumbnail…

Fork of Let's make a map with D3.js!

This fork of the “Let’s make a map with D3.js!” example renders a world map using an SVG canvas with a natural Earth projection. It uses `d3.geoPath` and `d3.geoNaturalEarth1` to project and draw country boundaries from TopoJSON data loaded via `topojson.feature`. The map displays a blue sphere outline and light green countries with thin black strokes, based on the world-atlas 110m dataset. The code loads D3 v5 and TopoJSON v3 from unpkg, with styling applied via an external CSS file.

Mmavercikalvin
91% match
Loading thumbnail…

Fork of Let's make a map with D3.js!

This example displays a world map using a natural Earth projection, with countries filled in light green against a blue ocean sphere. It loads geographic data from the world-atlas TopoJSON dataset and converts it to GeoJSON features using the topojson `feature` function. The visualization renders paths with d3.geoPath and d3.geoNaturalEarth1, appending each country as an SVG path element. The code demonstrates a straightforward D3.js v6 workflow for projecting and drawing vector map boundaries.

PPiotr Paszek
91% match
Loading thumbnail…

Fork of Let's make a map with D3.js!

This example visualizes a world map using a natural Earth projection, with countries rendered as light green SVG paths on a blue sphere. It loads geographic data from the World Atlas TopoJSON dataset and converts it to GeoJSON using the topojson feature method. The map is drawn with d3.geoPath and d3.geoNaturalEarth1, with country borders stroked in semi-transparent black. The code imports specific D3 modules including select, json, and geoPath, demonstrating a concise approach to geographic visualization.

SSittukala Saravanan
91% match