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

100%

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

✓ Published0🌍 Public

Last edited Mar 15, 2023

Created on Mar 15, 2023

Forked from 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.

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 a natural Earth projection, displaying country boundaries as colored paths over a blue spherical backdrop. 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 v5’s `geoPath` and `geoNaturalEarth1` projection, while each country is styled as a light green filled SVG path with a subtle black stroke. The visualization demonstrates a straightforward, static cartographic rendering with minimal interactive or animated elements.

AAiden Lau

97% match

Loading thumbnail…

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

This visualization displays a world map using a natural Earth projection, with countries filled in light green and oceans in blue. The map is rendered as SVG paths on a 960×500 canvas using D3.js version 5 and the TopoJSON library. The code loads country boundaries from a world-atlas JSON file and projects them with d3.geoNaturalEarth1 and d3.geoPath. Each country’s outline is drawn as a separate path with a subtle black stroke, while a sphere path fills the background before the country data arrives.

Mmaferayala

96% 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

96% match

Loading thumbnail…

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

This example displays a world map with countries rendered in light green on a blue spherical backdrop, using a natural Earth projection. It loads geographic data from the World Atlas TopoJSON file and converts it to GeoJSON with topojson.feature. The map is drawn as SVG paths using d3.geoPath and d3.geoNaturalEarth1, with the sphere outline generated from a GeoJSON Sphere object. Styling applies a blue fill to the sphere and a black, semi-transparent stroke to country borders.

NNguyễn Hoàng Lý

96% 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

96% match

Loading thumbnail…

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

This example visualizes a world map using a natural Earth projection. The map is drawn with SVG paths, where countries are filled with light green and the surrounding sphere is dark blue. The code uses D3 v5 functions `geoPath` and `geoNaturalEarth1` to project geographic coordinates, while the `topojson` library’s `feature` function converts the world-atlas TopoJSON data into geometric features for rendering. The visualization loads country boundaries from the `world-atlas` package and applies a subtle black stroke with low opacity to each country outline.

Rrajeshathakur

96% match

Loading thumbnail…

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

This example displays a natural Earth projection of the world, with countries rendered as light green polygons on a blue sphere. The visualization uses D3.js v5 and the topojson library to convert geographic data from the world-atlas package into SVG paths. The code employs d3.geoPath with d3.geoNaturalEarth1 for the projection, and the topojson feature function to extract country boundaries from the TopoJSON source. A semi-transparent black stroke outlines each country, while the sphere’s fill is set via the CSS class.

Wwakgari

96% match

Loading thumbnail…

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

This example displays a natural Earth projection map with countries filled in light green and the ocean shown in blue, using an SVG rendering approach. The code loads world geography data from the world-atlas TopoJSON file and converts it to GeoJSON features via TopoJSON’s feature function. D3’s geoNaturalEarth1 projection and geoPath generator define the map’s layout, while the visualization waits for the JSON promise to resolve before appending country paths with a stroke for borders. The sphere outline is drawn separately from a GeoJSON Sphere object.

Llqmpl

96% match