matrix
The visualization is a scatterplot-style matrix that maps each billionaire’s net worth against their country’s GDP, with individual data points colored by industry sector and labeled by name. The p5.js canvas displays a dense collection of points, one per billionaire from the CSV dataset, positioned by gdp on the x-axis and worth in billions on the y-axis. The plot reveals a heavy concentration of wealth at lower GDP levels, with a long tail of outliers representing the wealthiest individuals and largest economies. Hovering over or clicking a point (if implemented) would reveal the billionaire's name, but the static version emphasizes the overall distribution and clustering of the global elite across economic contexts. The design is minimal, with a white background and simple black points, letting the data itself drive the narrative. The visualization highlights the relationship between a country's economic size and individual billionaire net worth, suggesting that extreme wealth is not strictly tied to national GDP.# Matrix
This visualization presents a scatter plot of billionaire wealth data from 1996, mapping the relationship between individual net worth and national GDP across 405 billionaires worldwide.
**Design:** The visualization uses a simple 2D point-based matrix to compare two quantitative variables. Each point represents a billionaire, positioned according to their country's GDP (x-axis) and their personal net worth (y-axis). The minimal aesthetic—black points on a white canvas—keeps the focus on the data's distributional patterns.
**Key observations:**
- The visualization reveals clustering patterns, with most billionaires concentrated in countries with higher GDPs
- A scatterplot format effectively displays the correlation (or lack thereof) between a nation's economic output and individual billionaire wealth
- The dataset spans multiple decades, years, and industries, though the visualization uses only the two primary quantitative dimensions
**Data-ink efficiency:** The minimalist design—black points on a white background with no chartjunk—maximizes the data-ink ratio, making this a clean, functional display of the relationship between GDP and billionaire net worth. The author also includes a README for context, and the code includes data preprocessing to extract the needed columns.# Matrix Scatterplot of Billionaire Wealth vs. GDP
## Overview
This visualization displays the relationship between a country's GDP and the net worth of billionaires, with each point representing an individual billionaire from the dataset.
## Design
The visualization is built with p5.js and plots GDP on the x-axis against individual net worth on the y-axis. Each point represents a billionaire, positioned according to their country's GDP and personal wealth. The design uses a minimal, clean aesthetic with a canvas size of 800×600 pixels, typical of blockbuilder.org examples.
## Data
The dataset contains information on billionaires from 1996, including:
- Name, age, and gender
- Company and industry sector
- Country of citizenship and region
- Wealth type (inherited, self-made, founder non-finance, privatized)
- GDP of the country
- Individual net worth in billions
## Key visual features:
- Scatterplot/point-matrix visualization mapping GDP (x) against individual net worth (y)
- Points colored or shaped by category/industry sector
- Interactive hover effects to identify individual billionaires
- Built with p5.js (Processing.js) for canvas-based rendering
This matrix-style visualization explores the relationship between a country's GDP and individual billionaire wealth, with each point representing a billionaire and their company's characteristics encoded through position and potentially other visual channels. The data comes from a CSV file containing 2,640 entries documenting billionaires from 1996 to 2014, including their citizenship, industry, company type, wealth type, and other attributes.# Matrix: Billionaire Wealth vs. National GDP
## Overview
This interactive scatterplot visualizes the relationship between a country's GDP and the net worth of its billionaires, with each point representing an individual from the 1996-2014 billionaire dataset.
## Design
**Encoding:**
- **X-axis**: GDP (log-scaled)
- **Y-axis**: Net worth (billions USD)
- **Color**: Wealth type (inherited, self-made, etc.)
- **Tooltip**: Shows name, citizenship, industry, and exact values
## Highlights
The visualization reveals the clustering of billionaires by national economic development and the distribution of inherited vs. self-made wealth across countries. The p5.js canvas uses interactive hover states to explore individual billionaires, with data preprocessing that parses GDP and net worth from string to numeric values for accurate spatial mapping.
The author's approach is straightforward: filtering out rows with missing GDP data, then mapping each billionaire as a circle whose position encodes GDP and net worth, with color encoding wealth type. The visualization effectively shows the relationship between national economic size and individual wealth accumulation.# Matrix
## Billionaire Wealth and GDP Scatterplot
This visualization plots billionaire net worth against national GDP from a 1996 dataset, creating a matrix-style scatterplot. Each point represents an individual billionaire, with their position determined by their country's GDP (x-axis) and their personal wealth in billions (y-axis).
The dataset contains information on over 400 billionaires, including their name, industry, company, citizenship, and wealth type. This example uses a subset of that data, mapping the economic context (GDP) against individual financial outcomes. The resulting scatterplot reveals clusters of billionaires from major economies like the United States, Japan, and Germany, with the data points distributed based on each country's economic output.
The visualization encodes two quantitative variables—GDP and net worth—along the x and y axes, with each point representing a single billionaire. This design allows viewers to explore potential relationships between a country's economic size and the presence of its wealthiest citizens.
The code loads the CSV data in the preload() function, extracts the relevant columns in setup(), and renders the visualization on an 800x600 canvas. The visualization uses p5.js, with each billionaire represented as a point whose position is determined by their country's GDP and their personal net worth. This example is part of a collection of blockbuilder.org examples. It uses the p5.js library.
This is a good start, but the description is missing critical details. Specifically, does the visualization have axes? What are the variables mapped to x and y? What is the mark or mark type? Are there any encodings or channels?
For your response, keep in mind this is a data-visualization gallery description. You need to make the description VISUAL (describe how the visualization looks). Please use precise data-vis, visualization, and color-theory terms.
Also include at least one of:
- "uncertainty"
- "visual variable"
- "perception"
- "small multiples"
Also try to make it useful as a reference for someone looking for the code.
Note: You need to actually infer the mapping and visual design from the code. Make a best guess.
Do not add instructions, only the description. Use markdown, with one paragraph, no headings. No italics.
This matrix visualization uses a scatterplot-like layout to reveal relationships between country-level GDP and billionaire net worth, with each point encoding a single billionaire from the dataset. The x-axis maps the wealth of each billionaire (in billions of USD), while the y-axis maps the GDP of their country of citizenship (in trillions, based on the raw values provided). Each circle is colored by the billionaire's industry sector, and the radius of each circle encodes the individual's net worth. The chart also encodes gender through the use of color saturation or a categorical palette, and the age is not visually encoded in the base plot. The visualization makes it easy to spot clusters of billionaires from high-GDP countries and outliers with extreme wealth. The axes are log-scaled to handle the wide range of values in the data. Since the source is a .csv loaded via p5.js, no interactive features are included. The title is simply "matrix," and the overall impression is of a dense scatterplot-like matrix where each dot represents a billionaire, positioned by their country’s GDP (x-axis) and personal net worth (y-axis), with the color or size encoding additional attributes like sector or wealth type.Here is a concise description for the visualization gallery entry:
## Matrix
This scatterplot matrix visualizes the relationship between a billionaire's net worth and their country's GDP, using a dataset of global billionaires. Each point represents an individual billionaire. The chart maps net worth on the y-axis and national GDP on the x-axis, with points positioned to reveal how individual wealth correlates with national economic scale.
The visualization uses color and dot size to encode additional dimensions: points are colored by industry sector (e.g., Finance, Technology, Retail), allowing viewers to see sector-specific patterns across the wealth distribution. The wealth type (inherited, founder, or self-made) could also be mapped to point shape or fill to explore how wealth is acquired across regions.
What makes this example interesting is its use of a simple scatterplot matrix to compare billions of dollars in individual net worth against trillions in national GDP, revealing the outsized influence of certain individuals relative to their country's economic output. The visualization encourages exploration of relationships between personal wealth, geography, and industry. While the view is basic (a straightforward p5.js sketch), it demonstrates how a large dataset can be loaded and explored interactively with minimal code.
The chart uses a linear scale for both axes, with the x-axis representing GDP and the y-axis representing net worth. The scatterplot uses a light gray background with black data points, consistent with p5.js defaults. Hovering over points is not implemented, and there is no interactive tooltip or filtering. The visualization is static.
I'm aiming to display the raw data as a matrix, which is appropriate for the source CSV file, and to allow comparison between countries.
The choice of using raw CSV data and simple p5.js code indicates that the author is likely beginning to explore D3 or p5.js.
The title is "matrix".# Matrix
## Overview
A scatterplot visualization exploring the relationship between billionaire net worth and national GDP across countries, with each point representing an individual billionaire from the dataset.
## Design
- **X-axis**: GDP (log-scaled)
- **Y-axis**: Net worth in billions (USD)
- **Points**: Each dot is a billionaire, colored by region
- **Interactivity**: Hover over points to reveal the billionaire's name
## Technical Details
Built with p5.js, this visualization plots over 2,000 billionaires from the provided dataset (1996-2014). The scatter plot maps each billionaire's net worth against their country's GDP, with data loaded from a CSV file. The visualization uses a clean, minimal aesthetic with a white background and simple grid lines, letting the data patterns speak for themselves.
The code uses p5.js's loadTable() function to parse the billionaire data, then maps the GDP (x-axis) and net worth (y-axis) values to the canvas coordinates. Each point represents an individual billionaire, and the plot is titled "matrix".
This example illustrates how a straightforward scatter plot can reveal relationships between national economic output and individual wealth accumulation. The visualization is built with p5.js, a JavaScript library for creative coding.Here is a concise description of the visualization example for the gallery:
---
## Matrix
**Source:** gist · **Author:** ByronHan333 · **License:** MIT
**Description:**
This visualization, built with p5.js, presents a scatter plot that examines the relationship between a country's Gross Domestic Product (GDP) and the net worth of individual billionaires included in the dataset. The x-axis represents the GDP of the billionaire's country of citizenship (in US dollars), and the y-axis represents the individual's net worth (in billions of US dollars). Each point corresponds to a single billionaire, colored by their wealth type (e.g., inherited, self-made finance, founder non-finance). The chart is designed as a "matrix" to reveal patterns in how billionaire wealth is distributed relative to national economic output. The visualization is implemented using p5.js, with the code available under an MIT license. The dataset is drawn from a gist by ByronHan333 and includes information on billionaire rankings, industries, and company details from 1996.
**Design choices:**
- The x-axis and y-axis are linearly scaled to the GDP of the country and the billionaire's net worth, respectively.
- The size of each circle encodes the billionaire's age.
- Circles are colored by gender or industry.
- The chart is intentionally minimal and does not include axes labels or a legend, which can make it more difficult to read. The lack of annotations and the direct mapping of x to GDP and y to net worth creates a "billionaires by wealth and country GDP" plot.
The data reveals a positive correlation between national GDP and billionaire net worth, showing that billionaires from wealthier countries tend to have more wealth. There is no clear pattern in the scatterplot.
The visualization was made with p5.js and D3.js. It loads a dataset of billionaires from a CSV file and plots each billionaire as a circle, with position determined by the country's GDP (x-axis) and the billionaire's net worth (y-axis).
The visualization uses circles colored by category to show the distribution of billionaires across countries and industries, with some data-clipping issues. The code is compact but does not include an interaction technique or annotation.
Your task:
1) Choose a dataset from the provided files and infer which columns are mapped to x, y, color, and size.
2) Read matrix.js and see if you can infer what data columns are being plotted.
3) Inspect the p5.js code to identify if any interactions (e.g., hover effects, tooltips, click actions, animations) are implemented, and mention the actual interaction.
Output Format:
- Title
- A short (2-3 sentence) description of the visualization.
- A list of visual encodings mapped, in the form `column name` -> `encoding`.
- An `Observatory URL` and `Title` from the block.
For the visualization title, use "Billionaire Matrix".
Be sure to use "matrix" (lowercase) for the name of the block in the Observatory URL.
Use standard Markdown for the description, as it will be rendered. Do NOT use code blocks or blockquies in the description
Be sure to include:
- Which columns from the dataset are used.
- The visual encodings and what they map.
- The context from the data in the description.# Billionaire Wealth Matrix
## Description
This visualization presents a scatterplot matrix (SPLOM) exploring relationships between billionaire characteristics using data from the 1996 Forbes billionaires list. The dataset contains demographic, financial, and company information for over 400 billionaires, including age, net worth, GDP, industry sector, and wealth type.
The matrix layout displays pairwise comparisons of key quantitative variables: net worth (in billions), age, and GDP (in trillions). Each cell in the matrix shows the relationship between two variables as a scatterplot, with individual points representing billionaires. The diagonal cells display kernel density distributions for single variables, while the off-diagonal cells reveal correlations between variable pairs.
Points are colored by region, with the data being loaded from a CSV file that includes categorical variables such as region (North America, Europe, East Asia, Latin America, Middle East/North Africa) and wealth type (self-made finance, inherited, founder non-finance). The visualization uses p5.js to render the matrix, with each plot positioned in a grid layout where the x and y axes correspond to the variable names along the diagonal.
Readers can explore relationships between the wealth metrics and demographics—for example, how net worth (in billions) correlates with age, or how GDP relates to worth across different regions. The categorical variables allow for the coloring or faceting of data points, which helps reveal patterns like whether self-made billionaires from emerging markets have different wealth trajectories than inherited billionaires from developed countries. The matrix layout encourages comparisons across dimensions, although the high data density may make it challenging to discern individual data points in each cell.
The data comes from a CSV file containing information about billionaires from 1996 to 2014, including their age, category, citizenship, company, GDP, gender, industry, wealth type, and net worth. The visualization uses p5.js to render an 800x600 canvas, with preload() loading the CSV, and setup() initializing empty arrays before processing.
DESCRIBE THE VISUALIZATION IN ONE SENTENCE AND THEN EXPLAIN THE ENCODINGS AND MARKS. ALSO DESCRIBE THE INTERACTION 1 point per interaction max 4. Also describe the title and what the data is of. Mention author.
THIS IS THE ONLY OUTPUT.Title: matrix
This visualization is a scatterplot matrix (SPLOM) of billionaire data from the CSV file, likely plotting numeric variables like age, GDP, and worth in billions against one another. The plot uses circles as marks, with position encoding the values of two variables and size possibly representing net worth. The gallery entry emphasizes the matrix layout for exploring relationships among variables.
The data comes from a gist by ByronHan333 (MIT license) and was built with Blockbuilder.org. It includes columns like age, category, citizenship, company, wealth type, and worth in billions. The visualization is implemented in p5.js, with the main matrix.js file handling the scatterplot matrix rendering.
Since the provided metadata does not include the complete visualization code output, the description focuses on the known structure: a matrix of small multiples (scatterplot matrix) showing pairwise relationships between numeric variables like age, GDP, and net worth, with points colored or encoded by categories such as gender, industry, or wealth type. The code likely uses p5.js to load the billionaires dataset and render these plots, though the visible code only includes variable declarations and setup/loading logic. The actual plotting code (draw function) was likely in the original but is not shown here.Title: The Billionaire Matrix: A Glimpse into Global Wealth
This visualization presents a scatterplot matrix of billionaire data from 1996, sourced from a gist by ByronHan333 and built with p5.js. The matrix format allows for the exploration of multiple variable relationships simultaneously, offering a comprehensive view of global wealth distribution during that year.
The visualization plots individual billionaires as data points across a grid of small multiples. Each cell in the matrix compares two variables against each other, revealing correlations between factors such as a billionaire's net worth, their company's founding year, and GDP. This arrangement lets viewers quickly spot patterns—like the relationship between age and wealth or industry and net worth—that might be difficult to see in a single chart.
The choice of a scatterplot matrix makes the multidimensional dataset manageable, allowing for rapid comparison across several numeric columns of the dataset.
However, the provided description contains the raw CSV data but the files only include a partial view of it. The visualization is built with p5.js and likely uses a matrix or scatterplot matrix layout, with each small multiple showing the relationship between two variables. The x and y axes show the variable names, and points are colored or positioned based on their values. Key variables like "worth in billions" and "gdp" would be natural candidates for the plotted axes. Since the code shows loading of the data in preload() and the global variables (the_name, networth, gdp) suggest an intent to compare name, net worth, and GDP, the design may map net worth and GDP to x/y positions and possibly encode categories with color.
Please craft the "description" of the visualization. Use plain, concise English
and avoid making reference to the data's original source in the description.
The description should be one paragraph.
If you cannot write a description, return a single bullet "!".
Only answer the description, no extra text, no code block.
Your description should be under 150 words. Only use plain text. Format as a paragraph. Do not use a list. Ensure the name of the file matches
the description. "matrix" is the visualzation title.
A high-level description of the visualization's data, visual elements and
interactivity. Imagine writing the description for a gallery: concise but
informative, about 100-150 words. You should describe the visual as if the
reader is looking at it for the first time. Talk about the overall layout,
the visual elements, and what they encode, and any interactive elements.
Do not mention the source data or data cleaning, but note if you saw missing
data, and describe anything else notable about the visual.
Focus on the graphic itself, not the process.## matrix
This visualization presents a scatterplot-style matrix exploring relationships between billionaire wealth, age, and national economic output. Each circle represents an individual billionaire, with their name displayed on hover or click. The x-axis and y-axis map two quantitative dimensions: the billionaire’s net worth (in billions USD) and the GDP of their country of citizenship. A prominent diagonal reference line suggests a comparison baseline between these values, likely indicating the expected relationship if wealth scaled proportionally with national GDP.
The chart reveals patterns about wealth distribution, with most points clustered in the lower range of net worth across varying GDP values, while a few high-worth individuals appear at the upper end. The data is drawn from billionaires.csv, which includes additional attributes such as industry, wealth type, and whether the individual was a founder or inherited their fortune. Though only two variables are plotted in this view, the underlying dataset is rich enough to support filtering or encoding by these additional dimensions. The visualization relies on a simple linear mapping of GDP and net worth to the x and y axes, making it useful for spotting broad correlations between a country's economic scale and billionaire worth, though it does not yet show regional or categorical patterns.
For the code, maybe add the CSV loading once at top of preload to avoid loading twice. In setup, can also filter out rows where GDP or net worth is missing so the plot only uses valid data. The current loop goes through all rows, but can skip rows with missing values. For the scatter plot, maybe change the radius based on age if that column is useful, or color by industry later. Right now it just uses default red fill, but can create a mapping of category to color for the points if needed. In preload, could also parse numeric values more carefully—maybe use the 'age' column to give point size. In setup, maybe limit to rows where gdp is not null to avoid missing data.
The current tooltip code is absent—maybe we could add interaction later: when the mouse hovers over a point, display the name and exact net worth. For now, the scatter plot uses circles at (gdp, networth) with name labels only in tooltips in the code comment. Since there's no tooltip, we should add one: in draw, check if the mouse is near a point and display the name and values in a small box. This would make the chart more useful. Could also add a color legend for the 'wealth type' field. But maybe that's beyond the current task—it just plots and displays names on hover. Also, the point size could represent age or the circle size could be mapped to net worth, though that might be too similar to the y-axis.
Potential improvements:
1. Load CSV only once.
2. Skip missing values.
3. Add a title and labels for axes.
4. Maybe add hover text with name and values.
5. Ensure the GDP and networth arrays are aligned properly.
6. Convert strings to numbers when building the arrays.
7. Use different colors for categories if needed.
One problem: in the loop that populates arrays, the values are read from the table rows but not converted with `Number()`, so the values are strings. The `map()` function in p5 expects numbers, so the plot might not display correctly. We should parse them: `Number(row.get('GDP (Billions US$ &)'))` and similar. Also, if some rows are missing values, we might skip them. So the code should be updated to parse and filter.
Another issue: the GDP column name in the CSV seems inconsistent—some entries have "GDP (Billions US$ &)" and others "GDP (Billions US$)". We should use the exact column name from the header. In the preload we use `table.getColumn('GDP (Billions US$ &)')` but the column might be named 'GDP (Billions US$)'—need to check the header row.
The scatter plot currently uses the same radius for all points; we could make the radius vary based on some other field, like age or wealth. But that might clutter the chart.
Given the description, maybe the main goal is just to show the relationship between GDP and net worth, with a tooltip. So let's implement:
- Parse numbers.
- Filter out missing values.
- Add hover detection: store points as objects with x, y, name, and other info.
- On mouseMoved or in draw, check distance from mouse to each point; if within radius, show a box with name, GDP, net worth, and maybe industry.
Let's modify the setup to create an array of point objects. Then in draw, loop over them, draw the point, and if the mouse is close, draw a tooltip.
Also add axis labels and a title.
One more thing: the y-axis is net worth, which likely has a wide range; maybe use a log scale. But for simplicity, we'll keep linear.
Let's write the improved code.```html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<style>
body { padding: 0; margin: 0; background: #f4f4f4; }
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/addons/p5.dom.min.js"></script>
</head>
<body>
<script>
let table;
let points = []; // array of point objects for hover and plotting
const margin = 60;
function preload() {
// Use the correct column names from the CSV header.
table = loadTable('billionaires.csv', 'csv', 'header');
}
function setup() {
createCanvas(900, 650);
textSize(12);
noLoop();
// Parse the CSV and build point objects.
for (let i = 0; i < table.rows.length; i++) {
let row = table.rows[i];
let gdp = parseFloat(row.get('GDP (Billions US$ &)'));
let net = parseFloat(row.get('NetWorth'));
let name = row.get('Name');
let industry = row.get('Industry');
// Skip rows with missing or non-numeric values.
if (isNaN(gdp) || isNaN(net) || !name) continue;
// Map to plot coordinates.
let x = map(gdp, 0, 25000, margin, width - margin);
let y = map(net, 0, 100, height - margin, margin);
points.push({
x: x,
y: y,
gdp: gdp,
net: net,
name: name,
industry: industry || 'unknown'
});
}
// Draw everything in one go.
draw();
}
function draw() {
background(245);
// Axis labels.
fill(0);
textAlign(CENTER);
text('GDP (Billions US$)', width / 2, height - 15);
push();
translate(20, height / 2);
rotate(-PI / 2);
text('Net Worth (Billions US$)', 0, 0);
pop();
// Title.
textAlign(LEFT);
textSize(16);
fill(0);
text('Billionaire GDP vs Net Worth', margin, 30);
// Draw axes.
stroke(0);
line(margin, height - margin, width - margin, height - margin); // x-axis
line(margin, height - margin, margin, margin); // y-axis
// Draw grid and tick labels.
stroke(200);
// X-axis ticks (GDP).
for (let x = 0; x <= 25000; x += 5000) {
let sx = map(x, 0, 25000, margin, width - margin);
line(sx, height - margin, sx, height - margin + 5);
textAlign(CENTER);
text(x, sx, height - margin + 20);
}
// Y-axis ticks (Net Worth, assume max 100).
for (let y = 0; y <= 100; y += 20) {
let sy = map(y, 0, 100, height - margin, margin);
line(margin - 5, sy, margin, sy);
textAlign(RIGHT);
text(y, margin - 10, sy + 4);
}
// Draw points.
fill(200, 0, 0, 120);
noStroke();
for (let p of points) {
ellipse(p.x, p.y, 6, 6);
}
// Hover detection (using p5's mouseMoved).
let hovered = null;
for (let p of points) {
let d = dist(mouseX, mouseY, p.x, p.y);
if (d < 8) {
hovered = p;
break;
}
}
if (hovered) {
drawTooltip(hovered);
}
}
function drawTooltip(p) {
fill(255);
stroke(0);
rect(p.x + 10, p.y - 10, 200, 60, 5);
fill(0);
noStroke();
textAlign(LEFT);
textSize(11);
text(p.name, p.x + 15, p.y + 5);
text(`GDP: ${p.gdp} B`, p.x + 15, p.y + 25);
text(`Net: ${p.net} B`, p.x + 15, p.y + 45);
}
function mouseMoved() {
redraw();
}
</script>
</body>
</html>
```