yi xiao Map

100%

✓ Published0🌍 Public

Last edited Dec 17, 2020

Created on Dec 17, 2020

This example shows a choropleth map of U.S. states colored by the logarithm of their seven-day average positive COVID-19 test counts, with tooltips revealing state names, death averages, and positive test averages. Built with D3 v6 and TopoJSON, it uses `d3.geoAlbersUsa` for projection, `d3.geoPath` to render state boundaries, and `d3.scaleOrdinal` with the `schemeOrRd` color scheme. Data comes from a CSV file linked in the code, and the map is rendered as SVG with hover effects that change state fill colors.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

yi xiao Map

This visualization displays a choropleth map of the United States, coloring each state by the log-transformed seven-day average of positive COVID-19 test results. The map also uses SVG tooltips to show each state’s name, seven-day death average, and positive test average. It loads CSV data and TopoJSON geometry, projecting it with `d3.geoAlbersUsa` and drawing paths via `d3.geoPath`. The color scale is a threshold scale from `d3.scaleThreshold` using `d3.schemeOrRd`, and it includes a custom color legend built with D3 selections.

Aanduskong

96% match

Loading thumbnail…

yi xiao Map

This choropleth map uses D3.js with a geoAlbersUsa projection and TopoJSON to visualize COVID-19 state-level data, encoding the logarithm of seven-day average positive test results through an ordinal color scale based on d3.schemeReds[3]. The map renders U.S. states as SVG paths via d3.geoPath, with hover styling that fills states light green and adds dark red strokes. The dataset is loaded from external CSV and TopoJSON files, and tooltip-like title elements display state names, seven-day death averages, and positive test averages.

JJesse Luo

96% match

Loading thumbnail…

yi xiao Map

This map visualizes state-level COVID-19 statistics, showing the seven-day average death toll and positive test rate for each U.S. state. The choropleth uses a logarithmic transform of positive test averages to drive a d3.scaleOrdinal color scale with the d3.schemeOrRd sequential color scheme, rendered through d3.geoPath with a d3.geoAlbersUsa projection. Data comes from a CSV of state metrics joined with TopoJSON state boundaries. A custom d3 legend with circles displays the color scale domain, while CSS hover effects highlight individual states.

XXuanhaoWu

92% match

Loading thumbnail…

yi xiao Map

This choropleth map visualizes the logarithm of total earthquake counts per U.S. state, using an ordinal color scale with nine shades from the `schemeOrRd` spectrum. Built with D3 v5 and the `topojson` library, it projects state boundaries via `geoAlbersUsa` and renders them as SVG paths. Hovering a state changes its fill to light green and displays a tooltip with the state name, region, and raw earthquake total, sourced from a CSV dataset joined to a TopoJSON file.

SSagarikaS

87% match

Loading thumbnail…

yi xiao Map

This example visualizes earthquake totals across U.S. states by applying a logarithmic transform and mapping the results to an ordinal color scale with a sequential red scheme. The choropleth map uses `d3.geoAlbersUsa` projection, `d3.geoPath`, and TopoJSON state boundaries. Hovering highlights states in green. A color legend is rendered with `colorLegend.js` using `d3.scaleOrdinal`, and tooltips display state name, region, and raw earthquake counts. Data comes from a CSV of state earthquake records.

Ccyanea1

86% match

Loading thumbnail…

yi xiao Map

A choropleth map of the United States shows the total number of earthquakes per state, colored on a sequential logarithmic scale using an ordinal scale with the `schemeOrRd` color ramp. The map is rendered with `d3.geoPath` and the Albers USA projection, using TopoJSON state boundaries and CSV data loaded via `d3.csv`. Hovering a state highlights it in green and displays a tooltip via SVG `title` elements listing the state name, region, and earthquake count. The visualization uses D3 v5 and includes a custom `colorLegend` component to explain the color scale.

Eelaine-xiao

85% match

Loading thumbnail…

yi xiao Map

This choropleth map visualizes the total number of recorded earthquakes per U.S. state, using a logarithmic transformation of the raw counts to compress the data’s range. The map is rendered in SVG using d3.geoPath with a geoAlbersUsa projection, while a d3.scaleOrdinal maps logged earthquake values to a nine-step sequential color scheme from schemeOrRd. State boundaries are drawn from TopoJSON data, and each state includes a title tooltip displaying its name, region, and original earthquake count. A custom color legend component, built with reusable D3 selections, appears alongside the map.

Eelaine-xiao

83% match

Loading thumbnail…

COVID-19 Map (Test Positivity Rate)

A choropleth map of the United States colors each state by its seven-day COVID-19 test positivity rate, using a threshold scale with a green sequential palette. Hovering a state reveals its name, along with seven-day averages for deaths, positive tests, positive tests per 100,000, total tests, and positivity percentage, shown via appended `title` elements. The map is rendered using `d3.geoPath` with a `geoAlbersUsa` projection, driven by `topojson.feature` on state boundaries from a TopoJSON dataset. The visualization is built with React, and a `VoronoiOverlay` using `d3.Delaunay` enables smooth mouse interactions over the state paths.

Aandycho97

81% match