Heatmap with tooltip: Billionaires D3

100%

Heatmap with tooltip: Billionaires D3

✓ Published1🌍 Public

Last edited Mar 14, 2024

Created on Feb 18, 2024

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`.

AI-generated description

Billionaires Dataset From the CORGIS Dataset Project 'https://corgis-edu.github.io/corgis/csv/billionaires/' Edited to only 3 columns 'region', 'wealth_type', 'wealth_worth', and all being grouped by region and wealth type.

MIT Licensed

Similar vizzes

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

96% match

Loading thumbnail…

Fork of Heatmap: Billionaires D3

This fork of the Billionaires D3 example displays a heatmap where each cell’s color intensity, using the Inferno interpolator via `d3.scaleSequential`, encodes a numeric value from a CSV file. The chart renders as an SVG with `d3.axisBottom` and `d3.axisLeft` for the categorical group and variable axes. Interactive tooltips are created with a `div` element and updated through `mouseover`, `mousemove`, and `mouseleave` events, showing the exact value of the hovered cell. The code uses D3 v6 and loads external data from GitHub.

EEunice Tu

83% match

Loading thumbnail…

Bubble Chart - Cereal

This heatmap visualizes billionaire wealth by region and wealth type, using a linear color scale from white to steelblue to represent total wealth worth in billions. The tooltip reveals each cell’s exact value on hover. The code employs d3.csv to load data, d3.scaleBand for axes, d3.scaleLinear for color encoding, and SVG rectangles with mouse event handlers for interactivity. The dataset, sourced from the CORGIS Billionaires Dataset, is grouped by region and wealth type in the CSV.

EEunice Tu

82% match

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

81% match

Loading thumbnail…

New Bar Chart D3

This bar chart displays the wealth of billionaires, grouped by company name, with bar heights and colors scaled to each billionaire’s net worth in billions of dollars. Built with D3 v6 and React, the visualization loads CSV data from a GitHub gist, uses `d3.scaleBand` and `d3.scaleLinear` for axes, and renders bars as SVG rectangles with hover effects via CSS. Axes are drawn using `d3.axisBottom` and `d3.axisLeft`, and each bar includes a tooltip title showing its value.

AAllen Ho

80% match

Loading thumbnail…

barchart

This bar chart visualizes the distribution of billionaires’ wealth across different age groups, using data from a CSV file of billionaires. The chart is rendered with D3 v4 as SVG, using a band scale for the x-axis categories and a linear range for the y-axis. The bars are colored steel blue, with margins configured to fit a standard 960×500 canvas. The x-axis is categorical and rotated to accommodate longer labels, while the y-axis is quantitative, representing counts or values from the dataset. Built with Blockbuilder.org, this example demonstrates how to load and map tabular data into a clean, static bar chart with D3's scalable vector graphics approach.

BByronHan333

79% match

Loading thumbnail…

Visualization

This visualization explores the relationship between billionaire wealth and global GDP growth, offering three interactive views: a bar chart showing total wealth by industry, a scatter plot comparing GDP growth to individual net worth, and a heatmap displaying a simplified correlation metric. The bar chart aggregates data by category and displays total wealth per industry, while the scatter plot plots GDP growth from 2019-2024 against billionaire wealth with interactive tooltips. The heatmap uses a viridis color scale to represent correlation values. Built with d3.v7, the visualization loads CSV data and renders SVG graphics using d3.scaleBand, d3.scaleLinear, d3.nest(), and d3.axisBottom.

Nnitishsurneni@gmail.com

79% match

Loading thumbnail…

Billionaires Bar Chart with D3

This bar chart visualizes the relationship between inheritance type and the average net worth of billionaires, using a dataset from the CORGIS Billionaires project. It shows how average worth in billions varies across different inherited-type categories, with horizontal bars whose lengths encode the values. The visualization is built with D3 v7, using `scaleLinear` for the x-axis, `scaleBand` for categorical y-axis positioning, and `axisBottom`/`axisLeft` to render axes with light gray gridlines. Data is loaded via `d3.csv`, and hover states change bar colors to orange via CSS.

EEunice Tu

79% match