Skip to main content
SimilarExport ZIP
100%

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

✓ Published1🌍 Public
Bbhanuprasadk19
Last edited Apr 10, 2023
Created on Apr 10, 2023

This example presents a static world map rendered as SVG, showing countries as pink regions on a sky-blue spherical backdrop. The map is built using D3.js version 5 and the topojson library, which decodes GeoJSON-like data from the `world-atlas` package. The `d3.geoPath` and `d3.geoNaturalEarth1` APIs handle the projection and path generation. The code first draws a full sphere, then loads country boundaries from a remote JSON file and appends them as separate paths. The styling uses a faint blue stroke for country borders.

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

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

This example displays a world map rendered as an SVG, with countries filled in light green against a blue oceanic sphere. It uses D3 v5 and the topojson library to load and parse world-atlas data from an external URL, then projects the geographic features with a natural Earth projection and draws them using d3.geoPath. The map is generated entirely in the browser from TopoJSON data, with a simple CSS-styled SVG output.

DD3React
94% match
Loading thumbnail…

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

This example displays a world map as an SVG, with countries shown in light green on a blue sphere background. It uses D3.js v5 for map projections and rendering, specifically the `geoNaturalEarth1` projection and `geoPath` to convert geographic coordinates into SVG paths. The map data comes from the world-atlas package, loaded as TopoJSON and processed with the `topojson` library’s `feature` function. The page is built with a React starter template, though the main logic runs through a bundle.js file that fetches country boundaries and draws them, including a background sphere path drawn first.

Eeravellisaimeghana
94% 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ý
94% match
Loading thumbnail…

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

This example displays a world map with countries rendered as light green landmasses against a blue spherical background. The visualization uses a natural Earth projection to transform geographic coordinates into a flat SVG canvas. The code leverages D3.js v5 with `d3.geoPath` and `d3.geoNaturalEarth1` for projecting and drawing the map. Country boundaries are stroked in black with low opacity, while the data comes from the `world-atlas` package’s 110m resolution GeoJSON, loaded via `d3.json`. The rendering is entirely SVG-based with styling defined in CSS.

SSnapika
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 spherical backdrop, rendered as SVG paths using D3.js v5 and TopoJSON. It uses `d3.geoNaturalEarth1` for the projection, `d3.geoPath` to generate country outlines, and fetches geographic data from the World Atlas TopoJSON source (110m resolution). The code appends a sphere path first, then loads and draws country features, with stroke opacity creating thin borders.

DDeepa-Murugesan
94% match
Loading thumbnail…

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

This example shows a world map rendered as a bright pink sphere with yellow country shapes outlined in green. It uses D3 v5 and TopoJSON to load geographic data from a GitHub-hosted JSON file. The map is drawn in SVG using `d3.geoPath` with the `geoNaturalEarth1` projection, and country boundaries are generated via `feature` from the topojson library. The sphere and countries are styled with CSS classes.

Bbhargavarathod
94% match
Loading thumbnail…

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

This example displays a world map rendered as SVG paths, with countries filled in light green against a blue spherical backdrop. It uses D3.js v5’s `geoPath` and `geoNaturalEarth1` projection to generate geographic outlines from the world-atlas TopoJSON dataset. The code also loads the TopoJSON library to extract country features, then appends each path to the SVG container. The visualization demonstrates a straightforward choropleth-style map without interactivity, emphasizing the projection and vector rendering pipeline.

SSnapika
94% match