Skip to main content
SimilarExport ZIP
100%

Fork of State Map with Population - Rajan

✓ Published2🌍 Public
Kkhushburajan2015@gmail.com
Last edited Nov 6, 2025
Created on Nov 6, 2025

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

State Map with Population - Rajan

This visualization presents two maps: a world map using the Aitoff projection and a US state choropleth displaying unemployment rates. The US map colors states on a sequential scale, with hover interactions revealing exact values via a tooltip. Built with D3 v7, it uses `d3.geoAitoff` and `d3.geoAlbersUsa` for projections, `d3.geoPath` for rendering, and TopoJSON data from world-atlas for country and state boundaries. The choropleth color encoding is generated dynamically from inline CSV data, with a legend included.

Kkhushburajan2015@gmail.com
85% match
Loading thumbnail…

Fork of State Map with Population

This fork draws two maps side by side. A world map uses an Aitoff projection to visualize 2014 GDP data by country, with a quantized blue color scale and a legend, loading geographic and economic data from the World Atlas, a gist, and Plotly’s datasets. A second U.S. choropleth map displays December 2024 population data, attempting to fetch FRED series JSON via a helper function with an API key, otherwise relying on fallback data. The code uses d3.geoPath, d3.geoAitoff, d3.scaleQuantize, and d3.json, with tooltips showing values on hover.

Kkhushburajan2015@gmail.com
84% match
Loading thumbnail…

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

This choropleth map of U.S. counties assigns a distinct categorical color to each state using `d3.scaleOrdinal` with `d3.schemeCategory10`. The map projects geographic data with `d3.geoPath` and a `d3.geoAlbersUsa` projection, rendering counties as SVG paths with red strokes and a blue hover effect. It loads TopoJSON county boundaries from the `us-atlas` package and includes a tooltip with each county’s state name via appended `title` elements. The visualization uses `d3.v5` and the `topojson` library for feature extraction.

VVenkata Rajashekar Reddy Chinthala
83% match
Loading thumbnail…

Fork of Map of India

This example shows a choropleth-style map of Indian states, colored by a categorical scale and labeled with state names. It loads population data from a CSV and geographic boundaries from a TopoJSON file, then joins them by state ID using `Promise.all`. The visualization uses `d3.geoMercator` for projection, `d3.geoPath` to render SVG paths, and `d3.scaleOrdinal` with `schemeCategory10` for coloring. Hover effects are applied to state paths via the `.states` CSS class, while tooltips display state names using SVG `<text>` elements.

NNita
82% match
Loading thumbnail…

State Map with Population

This choropleth map visualizes U.S. state populations, filling each state with a blue color scale from light to dark based on its population value. It uses d3.geoAlbersUsa for projection and d3.geoPath to render TopoJSON state and nation outlines from the us-atlas dataset. Population data is loaded from a separate text file and parsed into a lookup table, with tooltips appearing on hover. The visualization is built with D3 v7 and rendered as SVG.

Sson.sultan@yahoo.com
81% 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
81% 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
80% 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
80% match