A3 Histogram

100%

✓ Published0🌍 Public

Last edited Feb 12, 2024

Created on Feb 12, 2024

Forked from Blank Slate with Hot Reloading

This example visualizes the total goals scored per game week in a soccer season as a histogram. It uses the p5.js library to create a canvas and render bars representing aggregated goal counts, with mouse hover interactions displaying the exact value per bar. The data is loaded from a CSV file via `loadTable` in the `preload` function, and the bars are drawn using custom drawing logic that maps goal totals to vertical heights.

AI-generated description

A blank slate starting point showing the "Hello World" for the VizHub V3 Runtime Environment, which supports continuous hot reloading with interactive widgets.

There is no index.html - that's what triggers the V3 Runtime
The entry point is the main function exported from index.js
The main function takes an argument container, a DIV

Full course playlist: YouTube: Constructing Visualization 2024.

MIT Licensed

Similar vizzes

Loading thumbnail…

A3 Boxplot

This example visualizes the distribution of total goals scored per game week across 38 weeks in the English Premier League using a boxplot. The p5.js sketch loads CSV data via `loadTable` from a GitHub gist, computes the five-number summary and outliers through a custom `Boxplot` class, and renders the plot with Canvas drawing functions like `line`, `rect`, and `circle`. The x-axis displays game weeks, while the y-axis represents goal counts, with outliers flagged individually.

RRavneet Singh Bhatia

81% match

Loading thumbnail…

A3 Strip

This visualization displays a strip plot of total goals scored per game week across an English Premier League season. Each soccer ball emoji represents a single goal, stacked vertically, with weeks arranged along the horizontal axis. The sketch.js code loads the dataset from a remote CSV using p5.js’s `loadTable`, aggregates goal counts by week, and renders the emoji marks via p5.js’s `text()` function within a custom Strip class.

RRavneet Singh Bhatia

76% match

Loading thumbnail…

Histogram A3

This visualization displays the monthly rainfall distribution of a year as a histogram. It shows the frequency of rainfall amounts across ten bins, with the data parsed from a CSV file containing month and rainfall measurements. The piece uses p5.js to load the tabular data with `loadTable`, then calculates bin frequencies and renders the histogram bars, axis ticks, grid lines, and labels. The title references the histogram’s role as a frequency analysis chart.

KKwasi Acquaye

74% match

Loading thumbnail…

A3 Histogram

This visualization displays the distribution of mushroom cap diameters from a CSV dataset, using a bar chart where each bar represents the log-scaled count of caps within a 5-centimeter bin. The p5.js TypedDict stores counts per diameter, while the canvas renders grid lines, axis labels, and colored bars. The code loads data via `loadTable` from a GitHub Gist and uses `log` to compress the y-axis values, with a legend and header text clarifying the measurement units.

Ddonaldminer

73% match

Loading thumbnail…

A3 - Visualizing Distributions using P5

A bar chart visualizes the maximum hours of music listened to per day across ages 10 to 65, using data from a CSV file. The p5.js library handles canvas rendering, while the `loadTable` API preloads and parses the remote data. Bars are drawn with `rect` calls, with axis ticks and labels positioned manually. The chart aggregates hourly values by age, filtering out hours exceeding 24, and displays purple bars against a white background with gridlines.

AAndrew Blakeslee Moore

72% match

Loading thumbnail…

Bar Chart: Goal Contributions

This bar chart displays total career goals and assists for individual players, with each bar growing upward in a staggered animation. The visualization overlays the chart on a scaled soccer field outline, complete with penalty areas, a center circle, and a halfway line. Built with D3 v4, the code uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `transition()` with `.delay()` to animate bar heights. Data is loaded from a CSV file via `d3.csv`, and SVG shapes render the field markings.

SSimon Hackbert

71% match

Loading thumbnail…

A4 - Bar

This bar chart visualizes the average expected goals (xG) for English Premier League teams, comparing home versus away matches. The data is loaded from a CSV file and processed using `d3.csv` and `d3.mean`. The visualization uses `d3.scaleLinear` and `d3.scaleBand` to map values, with bars rendered as SVG rectangles. A title and axes are added using `d3.axisLeft` and `d3.axisBottom`. The bars animate a color transition from steelblue to red using `transition`, while the page includes a video tutorial link. The rendering is SVG-based with dynamic interactivity.

RRavneet Singh Bhatia

70% match

Loading thumbnail…

A3 - Visualizing Distributions using P5

This example visualizes distributions using three interactive P5.js plots: a histogram, a box plot, and a strip plot, each embedded as separate VizHub links. The histogram displays the frequency of numeric values across bins, the box plot summarizes the data’s median, quartiles, and outliers, and the strip plot shows individual data points along a single axis. The visualizations use P5.js for canvas rendering and drawing shapes, with data organized into arrays and processed for statistical summaries. The page is built with plain HTML and CSS links, referencing external VizHub projects for each plot.

DDuc Pham

69% match