Fork of Heatmap with p5.js

100%

Fork of Heatmap with p5.js

✓ Published0🌍 Public

Last edited Dec 21, 2022

Created on Dec 21, 2022

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter. My dataset was not appropriate for the heatmap, so I found this one https://www.kaggle.com/yamqwe/pregnancy-birth-abortion-rates-in-the-united-stae/version/2 and I took only 8 states to make it readable.

MIT Licensed

Similar vizzes

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

96% match

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

92% match

Loading thumbnail…

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.

OOlha

85% match

Loading thumbnail…

p5 heatmap

This visualization displays a heatmap of yearly infection counts for US states from 1970 to 1980. It uses p5.js to render colored squares on a 1000x1000 canvas, with darker reds indicating higher infection numbers. The map includes state labels, year markers, and a color legend. Hovering over any square triggers a tooltip that reveals the exact year, location, and infection count. The data is loaded from a CSV file via the `loadTable` function, with square fill colors computed directly from the numeric infection values.

AAndrew

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

73% match

Loading thumbnail…

A2 Heat Map

This heat map visualizes the frequency of police shootings across U.S. states, using a red-to-blue color scale where higher counts appear bluer. The p5.js sketch loads CSV data from a GitHub gist via `loadTable`, counts incidents per state, and renders colored squares for each state along a vertical axis with state labels. The color mapping uses `map` and `lerpColor` to interpolate between red and blue based on the normalized count values.

Nnathanjmuljadi@gmail.com

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

72% match

Loading thumbnail…

Fork of HTML Starter

This scatter plot visualizes birth rate trends for U.S. states, comparing 2017 values on the x-axis against 2018 values on the y-axis, with each state represented as a green dot. The visualization uses D3.js v6 to load CSV data from a GitHub gist, parse it, and render an SVG chart with labeled axes. The code implements linear scales with `d3.scaleLinear`, draws axes via `d3.axisBottom` and `d3.axisLeft`, and creates circles with `append('circle')`. Interactive mouseover events log state-specific data to the console.

NNandini Maddula

71% match