T1-MAP-CM

100%

✓ Published1🌍 Public

Last edited Nov 3, 2025

Created on Nov 3, 2025

Forked from Map

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.

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

86% match

Loading thumbnail…

Fork of T1-MAP-CM

This fork of T1-MAP-CM uses two linked maps to compare a neutral world basemap with a US agricultural exports choropleth. The world map, rendered via `d3.geoPath` and the Natural Earth projection `d3.geoNaturalEarth1`, shows only country boundaries as a basemap. The US map, projected with `d3.geoAlbersUsa`, colors states by 2011 export totals from the Plotly CSV `2011_us_ag_exports.csv`. Both maps use TopoJSON sources, and a custom tooltip appears on hover.

Cchandanamahesh0215@gmail.com

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

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

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

80% 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…

Making Maps

This example shows a choropleth world map where a small set of countries are shaded from light blue to dark blue according to their population in millions, taken from an inline data array. It uses D3 v7, TopoJSON’s `feature` function, a `d3.scaleLinear` color scale, and `d3.geoNaturalEarth1` projection with `d3.geoPath` to render countries from the world-atlas dataset as SVG paths. The map displays tooltips with each country’s name and population or “n/a” for unlisted countries.

SSathviKankanala@my.unt.edu

79% match

Loading thumbnail…

world map

This example presents a reference world map and a choropleth map showing internet users per 100 people in 2015, both rendered as SVG using D3 v7 and TopoJSON. The code employs `d3.geoNaturalEarth1` for the projection, `d3.geoPath` for generating map paths, and `d3.geoGraticule` to draw latitude and longitude lines. Country boundaries come from the world-atlas TopoJSON file, with each country colored by its rate in the second map, accompanied by a legend.

SSreedevi Itta

79% match