Untitled

100%

✓ Published0🌍 Public

Last edited Jul 12, 2022

Created on Jul 12, 2022

This choropleth map of the United States visualizes the legal status of a substance in each state, with colors ranging from red to green based on a five-point scale. The visualization also plots cities as circles, with their size representing the number of years lived there, and includes interactive tooltips that appear on hover. The map is rendered using D3 version 3 with an Albers USA projection, loading geographic data from a GeoJSON file, state statuses from a CSV, and plotting city coordinates through the same projection.

AI-generated description

A example of choropleth map

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

A choropleth map of the United States visualizes state-level data from a CSV file, with each state filled according to a linear color scale (yellow to red) based on the `prem_an` attribute. The map also plots doughnut markers at state centroids, showing state abbreviations, and includes a partially commented-out section for city locations with circle sizes proportional to years lived. Built with D3 v3, the code uses `d3.geo.albersUsa()`, `d3.geo.path()`, and SVG paths rendered from GeoJSON, merging CSV attributes into the map's feature properties before binding data to the paths.

Iillus0r

85% match

Loading thumbnail…

Untitled

This choropleth map of the United States displays state-level COVID-19 case values with a green color scale, using lighter shades for lower numbers and darker greens for higher ones. The visualization loads CSV data and merges it with GeoJSON state geometries using d3.csv and d3.json, then renders paths with d3.geoPath and the d3.geoAlbersUsa projection. A d3.scaleQuantize maps numeric values to a five-color range, while states lacking data appear gray. The SVG is built with D3 v7 and styled with minimal CSS.

Jjoslinl

83% match

Loading thumbnail…

Untitled

This example shows a choropleth map of the United States, with states colored by whether the author has lived in, visited, or never visited them. Overlaid circles mark cities where the author has resided, with circle size scaled by years spent there. Hovering a circle reveals a tooltip with the city name. The visualization is built with D3 v3, using `d3.geo.albersUsa` and `d3.geo.path` to render GeoJSON state boundaries, while a linear color scale and SVG circles encode the categorical and quantitative data.

KKhushwant Rai

83% match

Loading thumbnail…

Untitled

This example presents a choropleth map of U.S. states, with each state filled using a color scale from light yellow to dark red based on randomly generated low, average, and high values. Hovering over a state triggers a tooltip that displays these three metrics in a table. The visualization uses D3 v3 and SVG, with the `uStates` library providing the map outlines and `d3.interpolate` for color encoding. State boundaries are drawn as paths, and the tooltip appears dynamically near the cursor.

Tthanhtrant219

82% match

Loading thumbnail…

Untitled

This choropleth map shows the population distribution across U.S. counties, with a color scale from light blue to red indicating population magnitude. The visualization is rendered as SVG using D3 v7, employing `d3.geoAlbersUsa` for projection and `d3.geoPath` to draw county boundaries from `counties.json`. Population data is loaded from `PopulationEstimates.csv` and matched to counties by name, with a tooltip showing county name and population on mouseover. The code uses a sequential color scale with an RGB interpolator.

Eeranyoung

82% match

Loading thumbnail…

Untitled

A choropleth map of the United States displays drought counts per state from 2012 to 2021, with a year selector to switch between annual datasets. The visualization uses D3 v7 to render SVG paths and a color legend categorizing drought frequency into six bins from green (low) to red (high). The code loads data from local JavaScript config files and computes the map projection, with a tooltip and legend providing supplementary context.

JJosieeeeee

81% match

Loading thumbnail…

Untitled

This choropleth map of the United States displays sample data for each state, with tooltips showing low, average, and high values on hover. Built with React and D3 v3, it renders states as SVG paths using the `uStates.js` helper, and colors each state via `d3.interpolate` from a yellow-to-dark-red scale based on randomly generated data. The custom tooltip div appears on mouseover, populated by the `tooltipHtml` function.

MManh Pham

81% match

Loading thumbnail…

Untitled

This example displays a choropleth map of the United States, coloring each state based on a numeric diversity value ranging from 0 to 5, with values mapped to a categorical color scale from grey to dark red. The map renders state boundaries using D3’s `d3.geoPath` and TopoJSON data from the US 10m dataset, while state fill colors are assigned via an ordinal `d3.scaleOrdinal`. The code loads the TopoJSON file and appends SVG paths for each state, using the diversity object to set fill colors and adding white state borders.

YYFKxenigsegg

81% match