Skip to main content
SimilarExport ZIP
100%

P5 Bar Chart

✓ Published0🌍 Public
Mmariahdiaz
Last edited Sep 20, 2022
Created on Sep 6, 2022
Forked from HTML Starter

A P5 bar chart visualizes natural gas prices in California over time, with bars representing prices for each year sampled from an external CSV dataset. The chart highlights that 2005 had the highest price, with an annotation noting a connection to the recession. Using p5.js, the code loads data via `loadTable`, renders rectangles with `rect()`, and displays axis labels and annotations through `text()`. A loop iterates through rows, scaling price values to bar heights, while grid lines are drawn using `line()`.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

P5 Dot Plot

This example visualizes natural gas prices in the industrial sector from 1961 to 2016 using a dot plot. Each dot represents a sampled year, positioned horizontally by price and vertically by time, with labels for both the year and price value. The code uses the p5.js library, loading CSV data from a GitHub repository via `loadTable`, then rendering points, text, and axis lines on a 600x500 canvas. The plot includes a labeled x-axis for price increments and annotations for the most and least expensive years.

Mmariahdiaz
82% match
Loading thumbnail…

P5 BoxPlot

This example renders a boxplot of industrial natural gas prices in Hawaii using p5.js. It loads CSV data from a GitHub gist, computes quartiles and median from the price array, and draws the plot with rectangles, lines, and text labels. The chart displays minimum, maximum, and quartile values on a numeric scale, with axes marked from 0 to 800. The sketch uses p5.js functions like `loadTable`, `createCanvas`, and `rect` within the `setup` and `draw` loops.

Mmariahdiaz
77% match
Loading thumbnail…

P5 Heatmap

This interactive visualization displays natural gas consumption across selected U.S. states from 2005 to 2011 using a heatmap grid. The color intensity of each rectangle reflects the consumption value, with blue indicating lower consumption and pink indicating higher consumption. The P5.js sketch loads data from a CSV file containing state, year, and consumption columns, then renders the grid on a 600x500 canvas. The code normalizes consumption values by dividing by 950,000 and maps them to the fill color's red channel. State labels appear along the left axis, with years displayed across the top.

Mmariahdiaz
74% match
Loading thumbnail…

P5 Strip Plot

This example shows a strip plot of industrial petroleum prices for New Mexico, displaying individual data points as circles along a horizontal band. The p5.js sketch loads a CSV dataset via `loadTable()`, then uses `random()` to jitter each point horizontally to reduce overlap. The y-axis is scaled to price values, with tick labels and axis lines drawn using p5.js drawing functions like `line()`, `circle()`, and `text()`. The visualization uses a fixed canvas size of 400 by 700 pixels and does not update or animate.

Mmariahdiaz
74% match
Loading thumbnail…

P5 Histogram

This example displays a histogram of kerosene consumption in billion BTU, with data binned into eight ranges from 0-100 to 701-800. The visualization uses p5.js functions like `createCanvas`, `loadTable`, `rect`, and `line` to render the bars and grid. The data is loaded from a CSV file hosted on GitHub, and the chart includes labeled axes and a title. The code manually assigns each row to a bin and scales bar heights by a factor of 20, rather than using a dedicated charting library.

Mmariahdiaz
72% match
Loading thumbnail…

P5 CSV Loader Bar Chart

This bar chart visualizes the number of structures damaged by California wildfires from 1989 to 2017, sourced from a CSV file loaded via p5.js’s `loadTable()`. The sketch uses `preload()`, `setup()`, and `draw()` to render a 2000x3000 canvas, with bars scaled proportionally to the data’s maximum value. Axes, labels, and tick marks are drawn manually using p5.js drawing functions, with year labels rotated for readability alongside the red bars.

Rragregory@dons.usfca.edu
71% match
Loading thumbnail…

Bar Chart

This bar chart visualizes total state expenditures in the U.S. from 1992–2019, drawn using the p5.js library. The visualization sums spending per state from a CSV file loaded via `loadTable`, scaling bar heights to values in hundreds of millions of dollars. It highlights California as the highest spender and Wyoming as the lowest, with labeled axes, gridlines, and annotations. The rendering uses p5.js canvas functions such as `rect`, `line`, and `text` to construct the chart.

PPranay Matalia
71% match
Loading thumbnail…

p5 bar chart

This example displays a simple bar chart comparing car names to their prices, rendered on an 800x800 canvas. The visualization loads car data from a remote CSV file using p5.js’s `loadTable` in the `preload` function, then draws the bars with blue rectangles and labels in the `draw` loop. Axis lines and custom tick marks are added using p5.js drawing functions like `line` and `text`, with the chart titled “Cars vs Price”.

SShazil Taqi
71% match