ICE-7 Abortion Rates US States : Shreeti Upreti

Line Chart with D3

This example visualizes abortion rates for 15-17-year-olds across eight U.S. states from 1985 to 2017 as a multi-series line chart, with each state distinguished by a color-coded ordinal scale and a d3-legend. It renders using SVG with animated tooltips on circular data points that display the year, state, and rate on mouseover. The visualization is built with D3 v7, using d3.group for data nesting, d3.line for path generation, d3.scaleLinear for axes, and d3.axisBottom/Left for tick marks, drawing from CSV data loaded via d3.csv.

Heatmap with D3

This heatmap visualizes abortion rates per 1,000 women aged 15–17 across U.S. states over multiple years, using a linear color scale from light gray to red to indicate rate intensity. The D3 v7 code loads data from a CSV and renders an SVG with `d3.scaleBand` for the x- and y-axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and `d3.scaleLinear` for color encoding. It appends rectangles for each state-year pair, plus a legend and axis labels.

Heatmap with p5.js

This heatmap visualizes abortion rates per 1,000 women for eight U.S. states over 16 years, using a green color scale where darker shades represent lower rates and lighter shades indicate higher rates. It is rendered with p5.js through a React-based VizHub setup, loading CSV data from a GitHub gist. The code iterates through table rows, positioning colored squares in a grid while labeling state abbreviations and years along the axes. A supplemental legend explains the rate categories from below 10 to above 40.

Line Chart Using a Qualitative Color Scale with D3

This line chart tracks abortion rates over time across multiple U.S. states, with each state represented by a separate colored line using a qualitative Set1 color scale from ColorBrewer. A legend to the right identifies each state, and hovering over individual data points reveals an interactive tooltip with the year, state, and rate. The visualization is built with D3 v7, using `d3.scaleOrdinal` for color assignment, `d3.line` for path generation, and SVG rendering with animated tooltip transitions.

Bar Chart with a Sequential Color Scale with D3

This bar chart displays abortion rates for 15–17-year-olds across U.S. states in 2010, using a sequential color scale from light blue to dark blue to encode rate values. Each state’s bar is colored via `d3.scaleSequential` with `d3.extent` domain, and an interactive tooltip appears on mouseover. The visualization uses D3 v7 to render SVG elements, including axes via `d3.axisBottom` and `d3.axisLeft`, plus a color legend from the `d3-legend` library. Data is loaded from a CSV file using `d3.csv`.

70% match

ICE7-2VarshaG

This visualization displays US mortality rates across states using a pie chart, with each slice sized by the number of deaths and labeled with the state name. The chart is rendered as SVG elements using D3 v5, employing the `pie` and `arc` generators to compute slice geometry, while `scaleOrdinal` maps death counts to a fixed set of colors. A legend on the right lists each state with its corresponding color and formatted death count. Data is loaded asynchronously from a CSV file fetched from a GitHub Gist using D3’s `csv` method.

VVReddy913

69% match

Fork of Heatmap with p5.js

This heatmap displays abortion rates per 1,000 women among 15–17-year-olds across eight U.S. states over sixteen years, using a green color scale from dark (<10) to bright (>40). Each cell encodes one state-year pair. The visualization includes axis labels, a legend, and explicit value thresholds. Built with p5.js, the sketch loads CSV data via `loadTable` from a Gist and renders cells using nested loops, `square()`, and `fill()` based on conditional color assignments. The dataset originates from a Kaggle resource on pregnancy and birth rates, filtered for readability.

Iindira-antgrvty

69% match