Skip to main content
SimilarExport ZIP
100%

Heatmap: Billionaires D3

✓ Published2🌍 Public
EEunice Tu
Last edited Feb 18, 2024
Created on Feb 17, 2024
Forked from D3 Starter

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.

AI-generated description
MIT Licensed

Similar vizzes

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
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
84% 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
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
83% 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…

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

2nd task

This treemap visualizes the distribution of billionaire wealth across twelve industries, using a color-coded hierarchy where rectangle size corresponds to total industry wealth. Built with D3 v7, the code uses `d3.hierarchy` and `d3.treemap` to compute spatial layout, then renders each leaf as an SVG `rect` with a text label. The visualization includes interactive tooltips that display the industry name and total wealth on hover, with smooth opacity transitions. The color scheme uses `d3.schemeSet3` for categorical distinction.

Nnitishsurneni@gmail.com
78% 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