Skip to main content
SimilarExport ZIP
100%

map Fork of Vanilla D3 Vibecoding Template

✓ Published1🌍 Public
Kkruthanreddy812@gmail.com
Last edited Apr 8, 2026
Created on Apr 8, 2026

This choropleth maps U.S. state populations using a log-scaled color gradient, with lighter blues representing smaller populations and darker teals for larger ones. It loads TopoJSON state boundaries via d3.json and topojson, projects them with d3.geoPath and the geoAlbersUsa projection, and colors each path by matching FIPS IDs to 2020 Census data. A linear gradient legend shows the log-spaced color scale, while native SVG title elements provide hover tooltips with formatted population values.

AI-generated description
MIT Licensed

Similar vizzes

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
87% match
Loading thumbnail…

React & D3 Vibecoding Starter

This example displays a choropleth map of the United States, where state fill darkness corresponds to population values from a small inline dataset. It uses D3 v7 and topojson-client to load and convert US Atlas TopoJSON into GeoJSON features, then renders them as SVG paths via `d3.geoPath` and a `d3.geoAlbersUsa` projection. A `d3.scaleLinear` maps population extents to a blue color range, with unlisted states shown in gray. Hovering reveals a tooltip with each state's name and population via an appended `<title>` element.

SSathviKankanala@my.unt.edu
86% match
Loading thumbnail…

Fork of Fork of ICE-8-VK-1.2

A choropleth map colors US states by 2023 population estimates using a sequential logarithmic blue scale. The visualization loads TopoJSON state boundaries from us-atlas, projects them with d3.geoAlbersUsa, and renders each state as an SVG path via d3.geoPath. Hovering reveals a tooltip with the state name and formatted population, while the embedded Census Bureau data drives the fill colors.

Ssairathan.p045@gmail.com
86% match
Loading thumbnail…

shivani map 2 Fork of Vanilla D3 Vibecoding Template

A U.S. state population choropleth map visualizes 2020 Census data using a log-scaled color gradient. The map renders states as SVG paths via `d3.geoPath` with an Albers USA projection, coloring each state through `d3.scaleLog` and the `d3.interpolateYlGnBu` interpolator. Hovering highlights state borders and shows a tooltip with the population value. The map also includes a gradient legend with log-spaced color stops. The code loads TopoJSON data from the us-atlas package and uses D3 v7.

Bbodushivani2601@gmail.com
85% match
Loading thumbnail…

Fork of Vanilla D3 Vibecoding Template

This choropleth map visualizes 2024 estimated country populations, coloring nations from light yellow to dark red on a Natural Earth projection to show relative population sizes. The visualization uses d3.geoNaturalEarth1 for map projection and d3.geoPath to render country boundaries from TopoJSON data loaded via d3.json and converted with the `feature` function. Population values are mapped to colors using d3.scaleSequential with an interpolateYlOrRd color scheme, while hover tooltips display each country’s name and population using SVG `<title>` elements.

Ssuddala2001@gmail.com
84% match
Loading thumbnail…

Fork of ICE 8-Making Maps Using TOPOJSON hd

This visualization displays the ten most populous U.S. states in 2020 on a choropleth map, with all other states shown in a neutral gray. It loads U.S. state boundaries from a TopoJSON file and population data from a CSV, then uses `d3.geoAlbersUsa` with `d3.geoPath` to render the map as SVG. A sequential color scale using `d3.interpolateYlGnBu` encodes population values, and a linear gradient legend with `d3.axisBottom` communicates the color mapping. Hovering over a state reveals its population or a note that it is not in the top ten.

Ssravya7136@gmail.com
83% 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
83% match
Loading thumbnail…

Fork of ICE8_US_States_Population

This example displays U.S. state population data as a choropleth map, with darker blue representing higher population. Ten states are mapped to population values, while all other states appear gray. The tooltip reveals the state name and population in millions upon mouseover. The map draws state boundaries as SVG paths using `d3.geoPath` with a `geoAlbersUsa` projection. Data is loaded from the `us-atlas` TopoJSON file, transformed with topojson-client, and colored through a sequential blue scale from `d3.scaleSequential`. Boundary strokes are added using `topojson.mesh`.

Sshyamraghav12@gmail.com
83% match