Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
KKota Satya Kiran
Last edited Jun 13, 2023
Created on Jun 13, 2023

This fork of the D3.js map tutorial visualizes world countries on a natural Earth projection. The code renders a blue sphere as the globe background and fills each country path with light green strokes using topojson.feature and d3.geoPath. It loads geographic data from the world-atlas 110m TopoJSON file and projects it with d3.geoNaturalEarth1, drawing all map elements as SVG paths.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

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

This fork of "Let's make a map with D3.js!" displays a world map of countries, filled in light green over a blue sphere, using a natural Earth projection. The visualization loads geographic data from the world-atlas package and renders the sphere and country boundaries as SVG paths with D3’s geoPath. It uses the d3 and topojson libraries, specifically `d3.geoNaturalEarth1` and `d3.geoPath`, to project and draw the map.

JJyothicherukuri
95% match
Loading thumbnail…

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

This example displays a natural Earth world map with countries rendered in light green against a blue spherical backdrop, using the Natural Earth 110m dataset loaded via `d3.json`. The visualization employs D3 v5’s `geoNaturalEarth1` projection and `geoPath` to generate SVG paths, while the TopoJSON library’s `feature` function extracts country geometries from the raw GeoJSON. A static sphere outline is drawn first, followed by country boundaries with subtle black strokes, all rendered as SVG elements within a 960×500 viewport.

KKota Satya Kiran
94% match
Loading thumbnail…

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

This fork of a D3.js mapping tutorial displays a world map, rendering countries in light green with black borders on a blue sphere. The visualization uses the Natural Earth 110m dataset loaded via the `world-atlas` package, and projects the geometry with `d3.geoNaturalEarth1` and `d3.geoPath`. A topojson `feature` extracts country boundaries from the data. The SVG output is styled with a CSS class for both the sphere background and individual country paths.

AAlexTapiaM
94% match
Loading thumbnail…

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

This fork of a D3.js mapping tutorial displays a natural Earth projection of the world, with countries filled in light green against a blue sphere. The visualization renders as an SVG using D3 v5’s `geoPath` and `geoNaturalEarth1` projection, while the topojson library’s `feature` function extracts country boundaries from the world-atlas dataset at 110m resolution. Country paths are drawn with a semi-transparent black stroke, and the map appears static without interaction.

Iinnocent thomas
94% match
Loading thumbnail…

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

This visualization renders a world map using a Natural Earth projection, displaying countries as light green polygons against a blue ocean sphere. It loads geographic data from the world-atlas TopoJSON dataset, which is converted to GeoJSON using the `feature` function from topojson. The map is drawn as SVG paths via `d3.geoPath`, with the projection defined by `d3.geoNaturalEarth1`. The code first draws the sphere outline, then appends country paths with a stroke for boundaries, all within a static 960x500 viewport.

Bbhanuteja1807@gmail.com
93% 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
93% 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
93% 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ý
93% match