Skip to main content
SimilarExport ZIP
100%

shivani map 2 Fork of Vanilla D3 Vibecoding Template

✓ Published1🌍 Public
Bbodushivani2601@gmail.com
Last edited Nov 9, 2025
Created on Nov 9, 2025

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

shivani ice 8 Fork of Vanilla D3 Vibecoding Template

This D3.js (v7) world map uses a choropleth to show the most recent year of United Nations population data (from the `datasets/population` GitHub repository). Country colors are mapped to population using a log-scaled YlGnBu interpolator to handle data variance, and the SVG rendering applies a Natural Earth projection via `d3.geoNaturalEarth1`. The map includes graticule lines, hover tooltips with a `d3.select`-based title element, and a log-scale gradient and axis legend using `d3.axisBottom`.

Bbodushivani2601@gmail.com
87% match
Loading thumbnail…

map Fork of Vanilla D3 Vibecoding Template

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.

Kkruthanreddy812@gmail.com
85% match
Loading thumbnail…

Fork of ICE-8 Q 1.2

This example displays a choropleth map of India, using color to differentiate each state. The visualization is rendered as SVG paths generated with `d3.geoPath` and a `geoMercator` projection, with state names placed at each region’s centroid. It loads TopoJSON data from a GitHub gist, processes it with the `topojson.feature` API, and colors states using `d3.scaleOrdinal` and `d3.schemeCategory10`. The map also includes hover styling through CSS, turning states white when moused over.

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

Fork of State Map with Population - Rajan

A fork of a U.S. state map choropleth visualizes state population data using a blue sequential color scale. The visualization loads TopoJSON from the `us-atlas` package and a text file of state populations, parsing both via `Promise.all` and `d3.json`/`d3.text`. It projects boundaries with `d3.geoAlbersUsa` and `d3.geoPath`, and maps FIPS codes to state names via a lookup table. Users inspect values through an HTML tooltip triggered by mouseover, with SVG rendering for all map elements.

Kkhushburajan2015@gmail.com
76% 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
76% match