Fork of Section 1(a)-Making Maps Using TOPOJSON

100%

Fork of Section 1(a)-Making Maps Using TOPOJSON

✓ Published0🌍 Public

Last edited Nov 9, 2025

Created on Nov 9, 2025

Forked from Section 1(a)-Making Maps Using TOPOJSON

This choropleth map visualizes average annual temperatures for U.S. states, using a red-to-blue sequential color scale to encode hotter and colder climates. Built with D3.js v7, the visualization renders SVG paths from TopoJSON data loaded via the `topojson-client` library, projecting states with `d3.geoAlbersUsa()` and `d3.geoPath()`. Hovering over a state triggers a tooltip that displays the state name and temperature value, with the map including a color legend. The underlying temperature data is stored in a JavaScript dictionary.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Fork of FZ_ICE8_Q1_WorldMap_Hyndavi

This choropleth map displays the average 2024 temperature by U.S. state, with cooler states in blue and hotter states in red, according to an illustrative data set embedded in the code. It renders state boundaries as SVG paths using `d3.geoPath` and a `d3.geoAlbersUsa` projection, loading geographic data from the `us-atlas` TopoJSON via `topojson-client`. A hover tooltip and a sequential color scale (`d3.scaleSequential`) complete the interaction and visual encoding.

Mmadalahyndavi123@gmail.com

88% match

Loading thumbnail…

Fork of country map

This fork of a country map visualizes average annual sunshine hours per U.S. state using a choropleth map. Hovering over a state reveals its exact yearly hours via a tooltip, with colors ranging from yellow to red based on a sequential scale. The visualization uses D3 v7’s `d3.geoPath` and `d3.geoAlbersUsa` projection to render TopoJSON state boundaries from the us-atlas dataset, while `d3.scaleSequential` and `d3.interpolateYlOrRd` handle color encoding. A linear gradient legend displays the hour range.

Ssaiabhishekmunnangi@gmail.com

84% match

Loading thumbnail…

Fork of React & D3 Vibecoding Starter

This example displays a choropleth map of U.S. states, using darker blue fills to indicate higher population values from a hardcoded dataset for fourteen states, with unlisted states shown in light gray. It loads TopoJSON from the us-atlas package, converts it to GeoJSON with `feature`, and renders paths via `d3.geoPath` and the `d3.geoAlbersUsa` projection. A linear color scale maps population extents to a blue range, and hover tooltips appear through SVG `title` elements. The map uses D3 v7 and TopoJSON-client, with an SVG rendering approach.

Ssaisanthoshravula@my.unt.edu

83% match

Loading thumbnail…

Fork of Country map

This choropleth map colors US states by average annual sunshine hours, using a yellow-green sequential scale. The data is stored in a JavaScript Map for approximately 20 states, with missing states rendered pale green. Built with D3 v7 and topojson-client, it uses `d3.geoAlbersUsa()` for projection, `d3.geoPath()` for rendering state boundaries, and a custom tooltip on mouse events. The legend is drawn inside the SVG, and state data comes from the us-atlas states-10m GeoJSON.

Ppriyankachary1701@gmail.com

82% match

Loading thumbnail…

Fork of React & D3 Starter- ICE_8_1.2(country)

This choropleth map shows estimated tourist visits per U.S. state for 2024, using a red color scale from light to dark red to indicate increasing visitor counts. The visualization renders a U.S. map with state boundaries defined by white strokes, using the `d3.geoAlbersUsa` projection and `d3.geoPath` to generate SVG paths. A hover tooltip displays state-specific data, while a legend and caption provide context. The map is built with D3.js v7, pulling TopoJSON geographic data via the topojson-client library, with a fixed sample dataset embedded in the code.

Vvijaysaichigullapally1@gmail.com

82% match

Loading thumbnail…

Fork of Map

This example displays a choropleth-style map of the United States, with each state filled in a light blue shade and outlined by dark gray borders, over a pale background. Hovering over a state reveals its name via an SVG `<title>` tooltip. The visualization uses a `d3.geoAlbersUsa` projection and `d3.geoPath` to render TopoJSON data from the us-atlas package, drawing both individual state polygons and the national outline. State names are derived from the TopoJSON geometries’ `properties.name` field.

Sson.sultan@yahoo.com

82% match

Loading thumbnail…

Fork of Fork of Map

This example shows a choropleth map of U.S. states, with each state filled by a categorical color from `schemeCategory10`. The code loads county-level TopoJSON data from the `us-atlas` CDN and renders the boundaries using `d3.geoPath` with an `geoAlbersUsa` projection. State features are extracted via `topojson.feature`, and each path’s fill is assigned by a `scaleOrdinal` based on the state name, with a tooltip title appended. The visualization demonstrates a straightforward integration of D3’s geospatial and scale APIs.

Rreddysushma994@gmail.com

81% match

Loading thumbnail…

Fork of US states map : with colorScale. One color for each country

This choropleth map displays US states, each filled with a distinct color from a categorical palette. The visualization uses the D3.js library, specifically `d3.geoPath` with `geoAlbersUsa` projection, to render the map from a TopoJSON file loaded from the us-atlas package. The color scale assigns colors based on the state's name, and hovering over a state turns it green via CSS. The map also includes tooltips that reveal the state name using the `.append('title')` method.

DDonald Bagwell

80% match