Skip to main content
SimilarExport ZIP
100%

Box Plot

✓ Published0🌍 Public
RRiya Mathur
Last edited Feb 11, 2024
Created on Feb 11, 2024
Forked from Heatmap

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.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Heatmap

This heatmap visualizes the wealth of billionaires across global regions and years, using a grayscale intensity scale where darker cells represent higher wealth values. The visualization arranges regions along the y-axis and years along the x-axis, with a legend showing the wealth-to-color mapping. Built with p5.js, the sketch loads data from a remote CSV file containing billionaire records, processes it in the `preload()` and `setup()` functions, and renders the heatmap using `rect()` calls with mapped fill colors. It also displays region and year labels alongside the interactive legend.

RRiya Mathur
90% match
Loading thumbnail…

Bar Chart

This bar chart shows the number of billionaires per geographic region, with sky-blue bars drawn on a 1200×600 canvas using the p5.js API. The data comes from a CSV file loaded via `loadTable()` in the `preload()` function, and counts are aggregated from the `location.region` column. The visualization includes labeled x- and y-axes with tick marks, using `map()`, `rect()`, and `text()` to position bars and annotations. It is built as a React starter example, though the rendering logic here runs directly within p5.js sketch instructions.

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

Heatmap: Billionaires D3

This heatmap visualizes billionaire wealth across regions and wealth types, with each cell colored by total wealth worth in billions and a tooltip displaying the exact value on hover. The chart uses D3 v6 with SVG rendering, employing `d3.scaleBand` for the x and y axes and `d3.scaleLinear` for the color mapping. Data is loaded from a CSV via `d3.csv`, and interactivity is handled through mouseover, mousemove, and mouseleave events that control a custom tooltip div. The visualization is titled and subtitled directly within the SVG.

EEunice Tu
78% match
Loading thumbnail…

Assignment 3 - Histogram - P5.js

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.

SSimon Hackbert
78% match
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
78% match
Loading thumbnail…

Fork of scatter plot

This scatter plot shows the relationship between the personal wealth of billionaires (in billions of USD) and their country’s GDP (in trillions of USD), with each point labeled by the billionaire’s name. Built with Chart.js and PapaParse, it loads data from a local CSV file, parses it asynchronously, and renders an interactive canvas-based chart. Tooltips display each billionaire’s name alongside both wealth and GDP values, while axis titles clarify the measured units. The visualization highlights the concentration of wealth among billionaires from countries with large economies.

Nnitishsurneni@gmail.com
77% match
Loading thumbnail…

Heatmap with tooltip: Billionaires D3

This heatmap shows the total wealth in billions for billionaires grouped by region and wealth type, with a tooltip revealing exact values on hover. The visualization uses D3 v6 to render an SVG grid where each rectangle’s fill color is mapped via `d3.scaleLinear` from white to steelblue. Axes are built with `d3.scaleBand` and `d3.axisBottom`/`d3.axisLeft`, while mouse events control the tooltip’s opacity and position. Data comes from the CORGIS Billionaires Dataset, pre-aggregated and loaded as CSV via `d3.csv`.

EEunice Tu
77% match