Map

100%

✓ Published50🌍 Public

Last edited Oct 26, 2025

Created on Oct 26, 2025

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.

AI-generated description

MIT Licensed

Similar vizzes

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

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

87% match

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…

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

86% match

Loading thumbnail…

Maps

This example presents two static SVG maps built with D3 v7 and TopoJSON. The first shows a world map using the `world-atlas@2` countries-110m dataset, rendered with a `d3.geoNaturalEarth1()` projection and a graticule layer. The second focuses on India, using a `d3.geoMercator()` projection centered on the country, with state boundaries loaded from a separate geoBoundaries ADM1 file. Both maps use `d3.geoPath` to convert GeoJSON features into SVG paths, with country and state outlines styled distinctly.

AALIMINETI SPOORTHY REDDY

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

84% match

Loading thumbnail…

World Map D3

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

Sshabanasyed2266@gmail.com

84% match

Loading thumbnail…

Map

This example visualizes world countries as a choropleth-style map, coloring each country green with white borders on a dark blue spherical backdrop. The map renders as SVG using D3.js with a Natural Earth projection via `d3.geoNaturalEarth1`, and country boundaries are generated through `d3.geoPath`. Geographic data loads from the world-atlas TopoJSON file (countries-110m.json), which is converted to GeoJSON using the `feature` function from the topojson library. Hovering a country changes its fill to red, and each country includes a title tooltip displaying its name.

VVlad Bogo

84% match