Assignment 3 - Histogram - P5.js

100%

Assignment 3 - Histogram - P5.js

✓ Published0🌍 Public

Last edited Sep 17, 2022

Created on Sep 17, 2022

This visualization displays a boxplot of billionaire ages from the billionaires.csv dataset, summarizing the distribution through quartiles, median, and outliers. It highlights the interquartile range with a colored rectangle, extends whiskers to the upper and lower fences, and marks outlier values as grey circles. Built with p5.js, the sketch loads the CSV in `preload()`, calculates statistical measures in `cleanData()`, and renders interactively in `draw()`. A tooltip appears when the mouse hovers over the box, revealing the computed five-number summary values.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Dot Plot

This dot plot visualizes the ages of billionaires, with each green dot representing one individual’s age along the y-axis and their sequential index on the x-axis. The p5.js sketch loads a CSV dataset in `preload()` using `loadTable`, filters out zero-age entries, then renders axes, tick marks, and axis labels in `draw()`. It uses `map()` to scale data points, `ellipse()` for the dots, and `line()` for the chart framework, all within a 900x600 canvas.

RRiya Mathur

79% match

Loading thumbnail…

tri_scatter

This scatterplot uses p5.js to visualize billionaire data from the billionaires.csv dataset, plotting individual billionaires based on their net worth, age, and gender. Each point represents a billionaire, with the x-axis mapping net worth (in billions), the y-axis mapping age, and gender encoded through color or point style. The visualization reveals clusters and outliers, such as the concentration of billionaires in certain age ranges and wealth brackets, and highlights demographic trends across the dataset. The interactive canvas allows viewers to hover over points to inspect specific individuals, making it a tool for exploring wealth distribution patterns.

BByronHan333

79% match

Loading thumbnail…

Box Plot

This visualization displays a heatmap of billionaires’ wealth across global regions and years, with darker cells indicating higher net worth. Built with p5.js, it uses `loadTable()` to fetch CSV data from a GitHub gist, then renders colored rectangles via Canvas `rect()` calls. A gradient legend maps wealth values to grayscale intensities, while region and year labels orient the grid. The visualization also includes a title and custom color-mapped legend, offering a quick comparative view of wealth distribution over time.

RRiya Mathur

78% match

Loading thumbnail…

p5.js.billionaires.dotPlot

This dot plot visualizes the relationship between billionaire inheritance type and total wealth, with each circle representing an individual. Data is loaded from a remote CSV file using p5.js `loadTable` in `preload()`. The sketch draws axes, gridlines, labels, and data points via the p5.js `circle()` function, mapping wealth values to x-coordinates and inheritance categories to y-positions. The visualization uses a dark background and blue circles to distinguish data points.

EEunice Tu

77% match

Loading thumbnail…

bi_scatter

This scatterplot uses p5.js to visualize the relationship between billionaires' age and net worth, drawing data from the included billionaires.csv. The chart plots each billionaire as a green dollar sign on a canvas with age on the x-axis and net worth in billions on the y-axis. Interactive tooltips display the individual's name, age, and net worth when the mouse hovers near a point. The visualization filters out entries with missing age values and includes axis labels and a title. The code is written in p5.js and loads data from a CSV file, mapping age to horizontal position and net worth to vertical position, with a manual coordinate transformation for the axes.

BByronHan333

77% match

Loading thumbnail…

Fork of Visualizing Distributions using P5 (Box Plot)

This visualization displays the age distribution of centenarians using a box plot, showing the minimum, first quartile, median, third quartile, and maximum ages. The p5.js sketch loads data from a CSV file hosted on GitHub, sorts the ages, and maps them to canvas coordinates using the `map()` function. The plot is drawn with rectangles, lines, and ellipses representing the quartiles and whiskers, with axis labels rendered using `text()`.

Rragregory@dons.usfca.edu

77% 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

76% match

Loading thumbnail…

fresh block

This example visualizes the top five wealthiest billionaires of 2014, using a custom bar chart built with p5.js. The chart loads data from `billionaires.csv` via a preload function, though the core visualization uses hardcoded arrays of names and net worths. Each bar is drawn as a column of repeated dollar-sign characters, with values displayed interactively on mouseover. The chart includes labeled axes, a title, and uses a green monochrome palette for the bars. The code defines bar heights by stacking one `$` glyph per billion dollars, while mouse position triggers a tooltip showing the exact net worth. The visualization is a simple, hand-coded example of p5.js drawing with CSV data support.

BByronHan333

76% match