Untitled

100%

✓ Published1🌍 Public

Last edited Feb 6, 2020

Created on Feb 5, 2020

Forked from 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.

AI-generated description

MIT Licensed

Similar vizzes

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

86% 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

85% match

Loading thumbnail…

Untitled

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.

Ggcappadaniel

85% 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

84% 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

84% match

Loading thumbnail…

Untitled

This interactive choropleth maps the author’s personal travel history, coloring U.S. states by whether they were lived in, visited, or unvisited, with a legend for reference. Cities where the author resided appear as orange circles, sized by years spent there, and hover tooltips reveal each city’s name. Built with D3 v3, it uses `d3.geo.albersUsa` and `d3.geo.path` to project and render GeoJSON state boundaries, while `d3.csv` loads the state and city data. Circle radii scale with the square root of years lived, and SVG hover effects lighten state fills.

AAnimesh Nautiyal

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

83% 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

82% match