World Map D3

100%

✓ Published0🌍 Public

Last edited Nov 10, 2025

Created on Nov 9, 2025

This example displays two choropleth maps: global country-level and US state-level average temperatures, colored with a sequential RdYlBu scale. It loads GeoJSON features from TopoJSON files via `topojson.feature` and maps temperature data from a CSV using `d3.rollup` to compute means per country and city. The world map uses a `d3.geoNaturalEarth1` projection, while the US map uses `d3.geoAlbersUsa`, both rendered as SVG paths via `d3.geoPath`.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Map

This example presents two static choropleth-style maps side-by-side: a world map using the Natural Earth projection and a U.S. map using the Albers USA projection. Both maps load TopoJSON data—from `world-atlas` and `us-atlas` datasets—and render country and state boundaries as SVG paths via `d3.geoPath` and `topojson.feature`. The world map includes a graticule generated by `d3.geoGraticule`, while the U.S. map uses `d3.geoAlbersUsa`. Regions are filled with solid colors, and hover tooltips are added using SVG `title` elements.

SSahil Thapa

84% match

Loading thumbnail…

dinesh ice8 q1

This example presents a dual-map visualization: a world choropleth and a US states choropleth, rendered as SVG using D3.js v7. The world map uses `d3.geoNaturalEarth1` projection and color-coded countries based on population data from a CSV file, while the US map uses `d3.geoAlbersUsa` projection with state-level values. Both maps load GeoJSON from the world-atlas and us-atlas CDN packages, and use `topojson-client` functions `feature` and `mesh` for geometry processing. A hover tooltip displays values; the US section also includes state borders drawn via a mesh layer.

Ddineshsingiri18@gmail.com

82% match

Loading thumbnail…

T1-MAP-CM

This example presents two maps side by side: a world basemap using TopoJSON data from world-atlas and a US choropleth showing education levels (percentage of adults with a bachelor’s degree or higher). The world map uses d3.geoNaturalEarth1 and d3.geoPath to render neutral country boundaries, while the US map joins CSV data with FIPS codes from us-atlas via d3.csv, applies a sequential PuBuGn color scale, and includes an interactive tooltip for state values.

Cchandanamahesh0215@gmail.com

81% match

Loading thumbnail…

map

This example visualizes world temperatures by coloring each country according to its latitude-derived temperature estimate, using a sequential blue-to-red scale. The map is rendered as SVG paths via `d3.geoPath` with a `d3.geoNaturalEarth1` projection, while country boundaries come from the `world-atlas@2` TopoJSON dataset. A linear gradient legend, built with D3's `scaleSequential` and `interpolateRdYlBu`, shows the temperature range from cold to warm.

LLaasyaJ256

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

81% match

Loading thumbnail…

ice 8 Task 1

This example shows a global choropleth map of average annual temperatures by country, with selected nations colored from blue (cold) to red (hot) and unlisted countries in gray. It uses d3.json to load TopoJSON world boundaries via topojson.feature, then d3.geoPath with a geoNaturalEarth1 projection to render SVG paths. A d3.scaleSequential with d3.interpolateRdYlBu encodes temperature values, while a linear-gradient legend and browser tooltip titles provide context from a hardcoded dataset.

GGorantla Sravani

81% match

Loading thumbnail…

v

This visualization presents two choropleth-style map examples: a world map using the Natural Earth projection and a United States map using the Albers USA projection, both rendered as SVG with D3 v7 and TopoJSON. The world map displays countries from the `world-atlas@2` dataset with a graticule overlay, while the US map shows states from `us-atlas@3`. The code uses `d3.geoNaturalEarth1`, `d3.geoAlbersUsa`, `d3.geoPath`, and `topojson.feature` to project and draw geographic features from remote TopoJSON files.

HHarshithmullapudi@my.unt.edu

80% match

Loading thumbnail…

World Map Example

This example renders a world map using D3.js and TopoJSON, displaying country boundaries as SVG paths. The visualization shows a natural Earth projection of the globe, with countries filled in light green and oceans in blue, using a grayscale-style aesthetic. The code loads geographic data from the world-atlas TopoJSON file and applies `d3.geoNaturalEarth1` for projection, `d3.geoPath` for path generation, and `topojson.feature` to extract country features. A sphere outline is drawn first, followed by individual country paths appended to the SVG canvas.

Ccpsshan

80% match