Skip to main content
SimilarExport ZIP
100%

Fork of D3 Starter

✓ Published0🌍 Public
AAbhiram-Janagama
Last edited Apr 13, 2026
Created on Apr 13, 2026
Forked from D3 Starter

This example presents two geographic maps: a world map using the Natural Earth projection and a United States map with state population data. The world map renders all countries from a TopoJSON file using `d3.geoPath` with `d3.geoNaturalEarth1`, while the U.S. map uses `d3.geoAlbersUsa` to display state boundaries. State populations are visualized through a sequential color scale (`d3.scaleSequential` with `d3.interpolateBlues`), where values are mapped to specific state names via a static lookup object. Tooltips are added using SVG `<title>` elements to show population numbers.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Map

This visualization demonstrates two geographic maps side by side: a world map using the Natural Earth projection and a US state map using the Albers USA projection. The maps show country and state boundaries rendered as SVG paths with light blue and green fills, overlaid on a subtle graticule grid for the world map. Built with D3 v7 and TopoJSON, the code loads geographic data from the `world-atlas` and `us-atlas` datasets via CDN, then applies `d3.geoNaturalEarth1` and `d3.geoAlbersUsa` projections with `d3.geoPath` to draw the features.

YYaswanth
86% match
Loading thumbnail…

Fork of React & D3 Starter

This example shows a world population map where individual countries are shaded with a blue sequential color scale, and hovering over a country reveals its name and population in millions via a tooltip. It renders a Natural Earth projection using `d3.geoPath` and `d3.geoNaturalEarth1`, with geographic data loaded from TopoJSON via `topojson.feature` and country names from a TSV file. The code uses `d3.scaleSequential` with `d3.interpolateBlues` to map population values to fill colors, and SVG paths for country boundaries.

Ppvvaishnavi93@gmail.com
86% match
Loading thumbnail…

Fork of D3 Starter

A choropleth world map visualizes population data for select countries, using a red sequential color scale to encode values and a legend for reference. Built with D3 v7 and TopoJSON, it uses `d3.geoPath` and `d3.geoNaturalEarth1` for projections, loading country boundaries from a world-atlas package and population values from a Gist JSON file. Hovering over a country reveals a tooltip with its population in millions.

Kkmuddana@gitam.in
86% match
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
85% match
Loading thumbnail…

Fork of World Map

This example displays two static choropleth-style maps: a world map using the Natural Earth projection and a US states map using the Albers USA projection. It demonstrates how to load TopoJSON data from the `world-atlas` and `us-atlas` datasets, convert it to GeoJSON with `topojson.feature`, and render it with `d3.geoPath` and `d3.geoNaturalEarth1` or `d3.geoAlbersUsa`. Both maps include graticule lines and interactive title tooltips showing region IDs.

AAmrit Adhikari
84% match
Loading thumbnail…

Fork of D3 Starter

This example visualizes world population data from a 2024 Kaggle dataset using a choropleth map. The map displays each country’s population with a blue color scale, from light (low) to dark (high), based on the `Population 2024` column, while countries without data appear gray. The visualization is built with D3 v7 and TopoJSON, using `d3.geoNaturalEarth1` for the projection and `d3.geoPath` to render geographic features. It loads world map geometry from the world-atlas package and the CSV dataset, then employs `d3.scaleSequential` with `d3.interpolateBlues` to map population values to fill colors. Interactive tooltips display exact population figures on mouseover, and a graticule and legend provide spatial and color context.

BBhargav Reddy
83% match
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
83% match
Loading thumbnail…

Fork of Fork of Fork of D3 Starter-maps

This choropleth visualizes global population using a Natural Earth projection. Countries are drawn as SVG paths via `d3.geoPath` and a `d3.geoNaturalEarth1` projection, with fill colors assigned from a sequential blue scale (`d3.scaleSequential`) based on population values from a CSV. Countries lacking matching population data receive a random light blue fill. The map uses TopoJSON for feature parsing and is rendered at full viewport size.

Hharshithamiriyam@gmail.com
83% match