Skip to main content
SimilarExport ZIP
100%

Heatmap with D3

✓ Published3🌍 Public
OOlha
Last edited Apr 7, 2022
Created on Feb 22, 2022

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.

AI-generated description

Assignment 4 part A

Heatmap

inspired by https://www.d3-graph-gallery.com/graph/heatmap_basic.html and by documentation https://github.com/d3/d3/blob/main/API.md

MIT Licensed

Similar vizzes

Loading thumbnail…

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.

OOlha
88% match
Loading thumbnail…

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
85% match
Loading thumbnail…

Fork of Heatmap with p5.js

This heatmap visualizes abortion rates for 15–17-year-olds across eight U.S. states over sixteen years, using a green color scale from dark (low rates) to light (high rates). Data comes from a Kaggle dataset on pregnancy, birth, and abortion rates. Built with p5.js, the sketch loads a CSV via `loadTable()`, iterates through rows to draw color-coded squares using `square()`, and maps values to five discrete color bins. It includes axis labels, a title, and a legend with rate ranges.

Aahuynh8@dons.usfca.edu
83% match
Loading thumbnail…

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.

OOlha
83% match
Loading thumbnail…

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.

OOlha
82% match
Loading thumbnail…

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`.

OOlha
81% match
Loading thumbnail…

d3 heatmap

This example visualizes yearly infection counts for US states from 1970 to 1980 using a heatmap. Cells are colored on a red scale, with darker shades representing higher infection numbers, and hover interactions reveal a tooltip with state, year, and exact count. The visualization uses d3.csv to load data, appends SVG text elements for labels and legend, and creates colored rect elements for each data point. The tooltip is positioned with event.pageX and event.pageY, while the legend is drawn manually with a loop generating gradient rectangles.

AAndrew
76% match
Loading thumbnail…

Heatmap with time series in D3

A heatmap displays annual property-crime rates for U.S. states from 2000 to 2019, using color intensity to show per-100,000-person offense counts. It uses `d3.scaleThreshold` with `d3.interpolateBlues` to map rates to colors and a sequential color scale for fill, while `d3.legendColor` provides a threshold legend. Data comes from the CORGIS smoking dataset, filtered for property crimes. Tooltips reveal exact values on hover, and axes are labeled using `d3.axisBottom` and `d3.axisLeft`, with the SVG rendered via D3 v6.

EEunice Tu
75% match