Fork of D3 Starter-map

100%

Fork of D3 Starter-map

✓ Published0🌍 Public

Last edited Apr 8, 2026

Created on Apr 7, 2026

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()`.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of D3 Starter-likitha

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.

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

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

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

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

89% match

Loading thumbnail…

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

This visualization displays a world map using a natural Earth projection, with countries filled in light green and oceans in blue. The map is rendered as SVG paths on a 960×500 canvas using D3.js version 5 and the TopoJSON library. The code loads country boundaries from a world-atlas JSON file and projects them with d3.geoNaturalEarth1 and d3.geoPath. Each country’s outline is drawn as a separate path with a subtle black stroke, while a sphere path fills the background before the country data arrives.

Mmaferayala

89% match

Loading thumbnail…

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

This map visualization displays countries on a natural Earth projection, with oceans filled in blue and landmasses in light green with subtle black strokes. It draws a basemap from the World Atlas TopoJSON dataset using the `feature` method from Topojson, then renders the sphere and country boundaries with `d3.geoPath` and the `geoNaturalEarth1` projection. The code loads data asynchronously via `d3.json`, appends SVG paths, and styles the elements through CSS classes.

MMina Rezaei

89% match

Loading thumbnail…

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

This interactive map displays world countries using a natural Earth projection, rendered as SVG paths with green fill that turns red on hover. The visualization loads geographic data from the World Atlas TopoJSON file and converts it to GeoJSON features using `topojson.feature`. Users can pan and zoom the map through `d3.zoom`, with transformations applied to a group element containing the country paths. The map also includes a blue sphere outline drawn via `d3.geoPath` with the `geoNaturalEarth1` projection, and each country displays its name as a tooltip using SVG `title` elements.

BBKirst3

89% match