Skip to main content
SimilarExport ZIP
100%

A3 Boxplot

✓ Published0🌍 Public
RRavneet Singh Bhatia
Last edited Feb 13, 2024
Created on Feb 13, 2024

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.

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 Histogram

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.

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
80% match
Loading thumbnail…

A4 - boxPlot

This example visualizes the total expected goals (xG) accumulated by football teams in home games using a box plot. The chart displays the distribution of these values across all teams, with the box representing the interquartile range and whiskers extending to the minimum and maximum within 1.5 times the IQR. The code loads CSV data from a GitHub gist using `d3.csv`, aggregates values with `d3.rollup`, and computes quartiles with `d3.quantile`. The visualization is rendered as SVG using D3 scales, axes, and shape primitives.

RRavneet Singh Bhatia
77% match
Loading thumbnail…

A4 - Scatter Plot

This scatter plot visualizes the relationship between total expected goals (xG) accumulated by football teams in home versus away games during a Premier League season. Each circle represents a team, positioned by aggregating home and away xG values via `d3.rollup` and `d3.sum` from CSV data. The visualization uses D3 v7 to create SVG axes with `d3.axisLeft` and `d3.axisBottom`, labels, and labeled circles, with hover effects defined in CSS.

RRavneet Singh Bhatia
74% 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
73% match
Loading thumbnail…

Cars Scatter Plot

This scatter plot shows football match data from the English Premier League, with each circle representing a match and colored by the number of goals scored. The visualization maps match days on the x-axis and total goals per match on the y-axis, using a linear scale for both. The code uses D3 v5’s `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` functions to load data, compute scales, and render axes with SVG circles. It also computes rolling averages for home and away performance before rendering.

Bbenholvey
70% match
Loading thumbnail…

Making a Bar Chart

A bar chart displays the number of goals scored by Premier League players, with data from a local CSV file loaded via D3’s `csv` function. Steelblue rectangles represent each player’s goal count, with player names and values rendered as text. The visualization uses an SVG canvas, sized 960 by 500 pixels, and is built with D3 v5, selecting the SVG element and parsing the data through the `select` and `attr` methods.

MMukund Khandelwal
69% match
Loading thumbnail…

A3 Box Plot gragh

This example displays a box plot of National Aviation System delay counts from a filtered airline dataset, loaded from a GitHub-hosted CSV file and rendered with p5.js. It visualizes the distribution with quartiles, whiskers, and individual outliers, calculated using a custom quantile function and the 1.5×IQR rule. The sketch maps data values to canvas coordinates via the `map()` function, draws the plot with p5.js primitives like `rect()` and `ellipse()`, and includes interactive hover tooltips that show exact values when the mouse is near a statistical point.

Hhxu51@usfca.edu
69% match