Fork of D3 Starter-likitha

100%

Fork of D3 Starter-likitha

✓ Published0🌍 Public

Last edited Apr 8, 2026

Created on Apr 7, 2026

This example displays a world map with countries rendered in randomly selected shades of blue. The visualization uses a Natural Earth projection via `d3.geoNaturalEarth1` and generates paths with `d3.geoPath`. Country boundaries come from a TopoJSON file loaded from the world-atlas package, converted to GeoJSON with the `topojson.feature` function. Each country path is appended to an SVG and colored using `d3.interpolateBlues` with a random value, while the map fills the full viewport.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of D3 Starter-map

This visualization shows a world map rendered with randomly colored countries using a natural Earth projection. The map fills the browser viewport and uses D3.js for the SVG rendering, with TopoJSON converting the world-atlas dataset into GeoJSON features. The code applies `d3.geoNaturalEarth1()` for projection and `d3.geoPath()` to generate the country paths, while `d3.interpolateBlues` assigns each country a random blues-scale color. The data loads from the world-atlas TopoJSON file via `d3.json()`.

Aaddalalikitha15@gmail.com

95% match

Loading thumbnail…

Fork of Fork of D3 Starter

This example displays a world map colored by per-country values from a small CSV dataset, using a blue sequential color scale to encode the data. It loads GeoJSON country boundaries from the world-atlas TopoJSON dataset and renders them as SVG paths with a Mercator projection (d3.geoMercator). The visualization relies on d3.json for fetching, topojson.feature for conversion, and d3.geoPath to generate the map shapes.

Rrevanthdasari10@gmail.com

89% match

Loading thumbnail…

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

This example displays world countries as light-green filled polygons on a blue sphere, using a natural Earth projection. It loads country boundaries from the World Atlas TopoJSON dataset and renders them as SVG paths via `d3.geoPath` and `d3.geoNaturalEarth1`. The visualization includes a background sphere path and applies thin black strokes with low opacity to country borders. The code relies on `d3.json` for data fetching and `topojson.feature` to convert TopoJSON to GeoJSON features.

BBRIAN JORAM WANDOBIRE

89% 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

88% match

Loading thumbnail…

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

This example maps world countries using the Natural Earth projection, rendering landmasses as black paths against a blue sphere. It loads GeoJSON data from the world-atlas TopoJSON file via `d3.json` and converts it with `topojson.feature`. The visualization uses `d3.geoNaturalEarth1` for projection and `d3.geoPath` to generate SVG path data, appending each country as a separate `<path>` element with the `country` class.

JJyothicherukuri

88% 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

88% match

Loading thumbnail…

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

This map shows the countries of the world rendered with a natural Earth projection, where landmasses appear in light green against a blue sphere. The visualization uses d3.geoNaturalEarth1 for the projection and d3.geoPath to generate SVG paths from TopoJSON data loaded via d3.json from the world-atlas dataset. Country boundaries are drawn with a subtle black stroke, while the underlying sphere provides an ocean-colored backdrop.

Bbugfree55

87% 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 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

87% match