yi xiao Map

100%

✓ Published0🌍 Public

Last edited Dec 17, 2020

Created on Dec 17, 2020

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

yi xiao Map

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.

JJesse Luo

96% match

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

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

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

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

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

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

82% match

Loading thumbnail…

COVID-19 Map

This interactive map of the United States displays state-level COVID-19 metrics, including seven-day averages for deaths and positive test results, with hover tooltips revealing specific values. Built with D3 v6 and rendered as SVG, the visualization uses topojson for geographic boundaries and computes logarithmic positive-test values for potential choropleth coloring. The map currently fills all states red, while CSS hover states highlight regions in light green, and a custom color legend component supports ordinal color scales, though the full scale integration remains incomplete.

Aandycho97

82% match