Skip to main content
SimilarExport ZIP
100%

Bar Chart with p5.js

✓ Published0🌍 Public
OOlha
Last edited Mar 4, 2022
Created on Jan 26, 2022
Forked from HTML Starter

This p5.js bar chart displays the most successful film distributors from 1995 to 2021, ordered by the number of movies they distributed. The visualization uses a classic bar-and-axis layout, with distributor names on the y-axis and a count scale on the x-axis. It loads CSV data via the `loadTable()` function from a GitHub repository, then renders the chart using `rect()` and `text()` calls within the `draw()` loop. The chart includes gray gridlines, axis labels, and a blue fill for the bars, highlighting the quantitative ranking.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Bar Chart p5.js

This bar chart displays the most successful film distributors by movie count from 1995 to 2021. It loads CSV data from a GitHub raw URL using p5.js’s `loadTable` in `preload()`, then renders bars with `rect()` and text labels in `draw()`. The chart includes grid lines, axis labels, and a title, all drawn directly on a 500×350 canvas created with `createCanvas`. The data source is visible as a remote CSV file, and the visualization uses static, hard-coded tick positions rather than dynamic scaling.

OOlha
95% match
Loading thumbnail…

Bar Chart with D3

This bar chart displays the most successful film distributors from 1995 to 2021, ranked by the number of top films each distributor released. The visualization uses D3.js (v7) to render SVG elements, with a linear scale mapping movie counts to horizontal bar lengths and a band scale positioning each distributor vertically. The code includes gridlines, axis labels, and value annotations generated through D3 selections and joins. Data is loaded from a CSV file via `d3.csv` and sorted in descending order before rendering. Tooltips and interactive features are not implemented.

OOlha
88% match
Loading thumbnail…

Bar Char in D3

This bar chart visualizes the most successful film distributors from 1995 to 2021, ranking them by movie count on a horizontal layout. The visualization uses D3 v7 with an SVG rendering approach, employing `d3.scaleLinear` for the numeric axis and `d3.scaleBand` for the categorical distributor positions. Data is loaded from a CSV file of billionaires via `d3.csv`, with gridlines drawn as SVG lines and bars styled in steelblue. The chart includes axis labels for "Movies" and "Distributor," with animated text elements providing context.

EEunice Tu
83% match
Loading thumbnail…

Dot Plot with p5.js

This dot plot visualizes ticket sales for the “Movie of the Year” from 1995 to 2021, with each green circle positioned along a horizontal axis scaled in millions and labeled by year. The example uses the p5.js library within a React framework, loading CSV data via the `loadTable()` API and rendering circles with `circle()`. Grid lines, axis labels, and movie titles are drawn using canvas drawing methods, while the data source is fetched from a GitHub Gist URL.

OOlha
76% match
Loading thumbnail…

as3_c1_p5.js

This example visualizes the distribution of MPAA ratings from a movie dataset using p5.js. It loads CSV data from a GitHub gist in `preload()`, counts occurrences of each rating in `setup()`, and renders vertical bar charts on a canvas. The sketch draws grid lines, axis labels, and colored rectangles for each rating value, with text annotations for counts and categories. The bars are positioned manually using numeric calculations rather than a charting library, with axes drawn using p5.js primitives like `line()`, `rect()`, and `text()`.

OOlha
76% match
Loading thumbnail…

Bar Chart

This bar chart displays metric sales (in millions) for video game publishers from 2003 to 2009, with publisher names listed vertically and sales represented by horizontal bar lengths. The p5.js sketch loads CSV data from a GitHub-hosted dataset using `loadTable()` in `preload()`, then draws the visualization in `draw()` using `rect()` for bars, `text()` for labels and axis annotations, and hardcoded color values. The chart plots approximately 16 publishers, with sales scaled by a factor of 1.3 to fit the 600x600 canvas, alongside a manually drawn X and Y axis.

AAllen Jake Polintan
75% match
Loading thumbnail…

Bar Chart

This bar chart displays the average review scores for video game publishers, with each publisher’s name and score rendered as text alongside a vertical bar whose height corresponds to the score. The visualization uses the p5.js library, including `loadTable()` to fetch CSV data from a GitHub gist, `createCanvas()` to set a wide canvas, and `rect()` to draw the bars, with score labels positioned via `text()`.

Pplai1
71% match
Loading thumbnail…

Assignment 6

A horizontal bar chart displays the top 15 movies by rank within a year, with movie titles labeled on the y-axis and rank values on the x-axis. Built with React and D3.js, the visualization loads data from a CSV file using `d3.csv`, scales axes with `d3.scaleBand` and `d3.scaleLinear`, and renders the ranking bars as SVG rectangles. Gridlines mark each tick value on the x-axis, while the axes are drawn manually without dedicated axis components.

BBaswa Sathvika Reddy
71% match