Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
YYeeleng Scott Vang
Last edited Jul 7, 2023
Created on Jul 7, 2023

This example shows a world map rendered with a natural Earth projection, displaying countries as light green polygons on a blue sphere. It uses D3 v5 with `d3.geoNaturalEarth1` for the projection and `d3.geoPath` to generate SVG paths from TopoJSON data loaded from the world-atlas package. The code appends a sphere outline and then iterates over country features, styling them with CSS classes that define fill and stroke properties. The map relies on the `topojson.feature` API to convert TopoJSON topology into GeoJSON features for rendering.

AI-generated description
MIT Licensed

Similar vizzes

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

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

This example displays a natural Earth projection map with countries rendered as light green shapes against a blue ocean sphere. It uses D3 v5 and TopoJSON to load world-atlas data from unpkg, then applies `geoNaturalEarth1` for the projection and `geoPath` to generate SVG paths for each country feature. The sphere outline and country boundaries are drawn as SVG elements, with styling defined in CSS.

Ppei9223
94% match
Loading thumbnail…

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

This example shows a world map with countries rendered in light green against a blue sphere, using a natural Earth projection. It loads geographic data from the world-atlas TopoJSON file, then converts it to GeoJSON features with the topojson `feature` method. D3’s `geoPath` and `geoNaturalEarth1` projection generate the SVG paths for each country, while a separate path outlines the globe. The visualization is a minimal, static map demonstrating basic D3 geospatial rendering.

Aape-ape-ape
94% 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
94% 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 a blue sphere outline. It loads geographic data from the World Atlas TopoJSON collection and converts it to GeoJSON features using `topojson.feature`. The map is rendered as SVG paths generated by `d3.geoPath` with the `geoNaturalEarth1` projection, while the outer sphere boundary is drawn separately. The visualization demonstrates a minimal, static cartographic rendering with D3 v5.

GGang Chen
94% match
Loading thumbnail…

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

This example displays a world map with countries filled in light green against a blue sphere, rendered as SVG using D3.js v5 and TopoJSON. It uses `d3.geoNaturalEarth1` for projection and `d3.geoPath` to draw country boundaries from the world-atlas dataset. The sphere is drawn as a single path, and country features are generated with TopoJSON’s `feature` method before being appended to the SVG.

Ggurkenstock@gmail.com
94% 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
94% match
Loading thumbnail…

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

This example shows a world map rendered as SVG paths, with countries filled in light green against a blue spherical background. It uses D3 v5’s `geoNaturalEarth1` projection and `geoPath` to generate the map, while TopoJSON’s `feature` extracts country boundaries from the world-atlas dataset (110m resolution). The code appends a sphere path first, then loads the TopoJSON data asynchronously and appends individual country paths, styling them via CSS classes. The result is a static, interactive-free choropleth-style map.

DDario Thornhill
93% match