Skip to main content
SimilarExport ZIP
100%

Histogram with p5.js

✓ Published2🌍 Public
OOlha
Last edited Mar 4, 2022
Created on Feb 13, 2022
Forked from HTML Starter

This example displays a histogram of birth rates per 1000 in California for 2016, with age groups on the x-axis and counts on the y-axis. The visualization uses p5.js to load a CSV dataset via `loadTable()` in `preload()`, then renders bars with `rect()` and axis labels with `text()` and `line()`. The data comes from a GitHub gist, and the sketch draws gridlines, a title, and a rotated y-axis label using canvas transforms.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Box Plot with p5.js

This visualization displays box plots of California birth rates per 1000 people across seven years, with each plot summarizing the distribution for a given year. The p5.js sketch loads CSV data via `loadTable()`, groups rows by year, and computes quartiles and median for each group. It renders colored rectangles for interquartile ranges, median lines, and whiskers using `rect()` and `line()`, with gridlines and axis labels drawn on an 800×500 canvas.

OOlha
85% match
Loading thumbnail…

Histogram with D3

This histogram displays birth rates per 1000 residents across age groups in California for 2016, rendered as blue SVG bars. It uses d3.csv to load the data, d3.scaleBand and d3.scaleLinear for axes, and d3.axisBottom/axisLeft for ticks. Hovering over a bar appends a text label showing the age group via mouseenter/mouseleave events. The chart includes labeled axes for age and count, with a title noting the year and location.

OOlha
83% match
Loading thumbnail…

Fork of Histogram with D3

This histogram displays birth rates per 1000 for different age groups in California for 2016, using a bar chart with an interactive tooltip that reveals the age group on hover. Built with D3 v7, it loads CSV data via `d3.csv`, maps age groups to a `d3.scaleBand` and rates to a `d3.scaleLinear`, and renders the bars as SVG rectangles. Tooltips are appended and removed dynamically using `svg.append("text")` and `d3.select("#t1").remove()` on mouseenter and mouseleave events.

Yyuli19991001
83% match
Loading thumbnail…

p5 histogram

This visualization displays a histogram of total infection counts for US states from 1970–1980, with bars representing binned data ranges up to 30,000. It uses p5.js to load a CSV dataset from a GitHub gist, render the chart on a 1000x1000 canvas, and provide interactive tooltips that appear on hover to show each bin’s range and frequency. The code draws axis labels, grid lines, and bars using p5’s `rect`, `text`, and `map` functions, with data processed via the `table.getColumn()` API.

AAndrew
78% match
Loading thumbnail…

Histogram

This example displays a histogram of median salaries for recent graduates, using a dark background with light blue bars to visualize frequency distribution across 20 salary bins. The p5.js sketch loads CSV data from a GitHub gist, processes the salary column, and generates the chart on an HTML canvas. It includes labeled axes, gridlines for frequency, and animated rendering through setup and draw functions. The code uses p5.js’s loadTable, map, and rect APIs, with custom binning logic to exclude zero values.

RRiya Mathur
76% match
Loading thumbnail…

Strip Chart without Randomizer Using p5.js

This example displays Florida birth rates per 1000 people from 1988 to 2016, grouped by year as a strip chart. It loads CSV data via p5.js’s `loadTable` function, then uses nested loops to draw horizontal gridlines, axis labels, and orange points with `point()` and `strokeWeight()`. The chart sorts values within each year and maps them to a fixed y-axis scale, while the p5.js `createCanvas` and `text()` functions render the visualization and annotations.

OOlha
76% match
Loading thumbnail…

histogram

This histogram visualizes the distribution of power data values from a CSV file, grouping the data into eight bins spanning 0 to 800. The code uses p5.js to load the external dataset in a `preload()` function, then draws vertical grid lines and cyan bars, with each bar’s height scaled proportionally to the count of values in its bin. Axis labels and bin ranges are rendered directly on the canvas, and the visualization’s fixed dimensions and styling are defined through p5.js canvas drawing commands.

Hhollyjpotter
75% match
Loading thumbnail…

Strip Chart with p5.js

This visualization shows birth rates per 1000 people in Florida from 1988 to 2016, grouped by year along the x-axis with rates plotted on the y-axis. It uses a strip chart format where individual data points are rendered as yellow dots, with a subtle randomized horizontal jitter applied to reduce overplotting. The code loads CSV data via p5.js’s `loadTable`, processes it into a dictionary keyed by year, and draws the chart using p5.js canvas functions like `point()`, `line()`, and `text()`. Axes labels and gridlines are manually constructed, and a fixed random salt stored in `localStorage` ensures consistent jitter across reloads.

OOlha
75% match