Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
SSubhamChhetri
Last edited Mar 9, 2023
Created on Mar 9, 2023

This example uses D3.js v5 and TopoJSON to render an interactive map of Bhutan as a static SVG visualization. The code imports `geoMercator` and `geoPath` to project geographic coordinates onto a 960×500 canvas, with the country’s polygon data embedded directly in the script. A blue sphere background and light-green country fill with subtle black strokes are styled via CSS. The map is rendered using SVG paths, demonstrating a straightforward Mercator projection without additional interaction or animation.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

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

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.

Bbhanuprasadk19
87% 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
86% match
Loading thumbnail…

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

This map renders world countries as light blue SVG paths on a white background, with thin black strokes, using the Mercator projection. The code builds the visualization with D3 v5’s `geoPath` and `geoMercator`, converting TopoJSON features from the world-atlas dataset via the `topojson` library’s `feature` function. Country shapes are drawn by appending SVG path elements bound to the projected geometry.

LLes Lim
86% 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
85% 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
85% match
Loading thumbnail…

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

This example uses D3 v5 and TopoJSON to render a natural Earth projection world map. It draws a blue sphere outline via a `geoNaturalEarth1` projection and `geoPath`, then loads country boundaries from the world-atlas 110m TopoJSON dataset. Each country is appended as an SVG path with a light green fill and black stroke, while the sphere is colored dark blue. The map is static and demonstrates basic geographic data loading, projection, and SVG rendering.

Mmaferayala
85% match
Loading thumbnail…

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

This map visualization displays world countries as filled green regions on a blue sphere, rendered entirely with SVG. It loads geographic data from the World Atlas TopoJSON file using `topojson.feature` to extract country boundaries, then projects them with a Mercator projection via `d3.geoMercator` and `d3.geoPath`. The code appends a sphere outline path and draws each country as a separate `path` element, with styling applied through CSS classes for fill and stroke.

Xxyang3672
85% match
Loading thumbnail…

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

This fork of a map-making tutorial uses D3.js to render a natural Earth projection of the world. The visualization first draws a blue sphere as a background, then fetches country boundary data from the `world-atlas` package’s 110m JSON file. It converts the TopoJSON features using the `topojson` library and draws each country as a light green path with a faint black stroke, using `d3.geoPath` with the `geoNaturalEarth1` projection. The map is displayed as static SVG in a 960×500 viewport.

Sshubhamg3
85% match