Fork of Heatmap with p5.js

100%

Fork of Heatmap with p5.js

✓ Published0🌍 Public

Aahuynh8@dons.usfca.edu

Last edited Feb 5, 2024

Created on Feb 5, 2024

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.

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

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

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

83% 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…

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

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…

A2 - Temps (Heatmap)

This heatmap visualizes average monthly temperatures for seven U.S. states in 2016, using a yellow-to-orange color scale where warmer temperatures appear brighter. The p5.js sketch loads CSV data via `loadTable`, processes it in `preload()` and `setup()`, and renders colored squares for each state–month combination on a Canvas. A legend explains the color range, and axis labels identify states and months. The code uses p5.js drawing functions like `fill()` and `square()` to construct the grid.

Cctan13@dons.usfca.edu

72% match

Loading thumbnail…

Heatmap

This heatmap visualizes U.S. unemployment rates across states and years, using a color scale from light gray to red to indicate low to high rates. It renders an SVG via D3.js (v7), with scales and axes built using `d3.scaleBand` and `d3.axisBottom`/`d3.axisLeft`, and colors assigned through `d3.scaleLinear`. Data loads from a CSV file using `d3.csv`. It includes axis labels, a legend, and a title, but no tooltips or interactivity beyond static rendering.

Oomniaabouhassan@gmail.com

70% match