Skip to main content
SimilarExport ZIP
100%

Another fork of Let's make a map with D3

✓ Published0🌍 Public
Aape-ape-ape
Last edited Apr 10, 2021
Created on Apr 10, 2021

This example displays a world map using an orthographic projection, rendering countries as light-gray filled paths with black borders against a blue sphere backdrop. It loads geographic data from the world-atlas TopoJSON file via `d3.json`, converts it to GeoJSON features with the `topojson.feature` function, and draws the paths using `d3.geoPath`. The visualization is built with D3 v5 and rendered as SVG.

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 an orthographic projection, rendering countries as light green SVG paths on a blue sphere with subtle black borders. It loads geographic data from the world-atlas TopoJSON file and converts it to GeoJSON using topojson’s feature method. The visualization uses d3.json to fetch data, d3.geoOrthographic for projection, and d3.geoPath to generate the SVG path data. The sphere is drawn first as a separate path, with all country features appended dynamically once the data loads.

CCaminaur
93% 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
92% 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 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
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
90% 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ý
90% 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
90% 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
90% match