Fork of Heatmap: Billionaires D3

100%

Fork of Heatmap: Billionaires D3

✓ Published0🌍 Public

Last edited Feb 18, 2024

Created on Feb 18, 2024

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.

AI-generated description

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

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

83% match

Loading thumbnail…

Fork of HeatMap: Career Data

This heatmap visualizes career-related data across two categorical dimensions, with each cell’s color intensity mapped to a numeric value using a sequential Inferno color scale. The chart is built with D3 v4, rendering an SVG grid where row and column labels are derived from the dataset’s `group` and `variable` fields. Interactive tooltips display the exact cell value on hover, while the code relies on `d3.scaleBand` for axes, `d3.scaleSequential` for coloring, and `d3.interpolateInferno` for the palette, sourcing data from a raw GitHub CSV file.

謝謝惠喻

79% match

Loading thumbnail…

Fork of HeatMap: Career Data

This heatmap visualizes career-related data across grouped categories, with each cell colored on a scale from 1 to 100 using the `d3.scaleSequential` interpolator `d3.interpolateInferno`. Rows and columns are defined by the `group` and `variable` fields from the CSV data, rendered as an SVG via D3 v4. Hovering a cell triggers a custom tooltip showing the exact value, while the chart includes axis labels, a title, and a subtitle. The code loads data from a remote GitHub CSV source.

謝謝惠喻

78% match

Loading thumbnail…

Fork of HeatMap: Career Data

This heatmap visualizes career data from a CSV file, using color intensity to represent values across two categorical dimensions. The chart employs `d3.scaleBand` for axes, `d3.scaleSequential` with the `d3.interpolateInferno` color scale, and SVG rectangles for cells. A tooltip appears on hover to show exact values. The cells are made draggable through `d3.drag`, and during a drag, all rectangles in the same group turn red, highlighting their column.

PPedram

77% match

Loading thumbnail…

Untitled

This example shows a D3.js v4 heatmap that visualizes a matrix of values using the Inferno color scale, with an interactive tooltip that displays each cell’s exact value on hover. The chart loads CSV data from an external URL, builds band scales for the x and y axes, and renders colored rectangles with rounded corners. A title and subtitle are added via SVG text elements. The code also includes separate JavaScript modules for generating car reports and fetching JSON data, though these are not part of the heatmap rendering itself.

Jjesramyep1263

76% match

Loading thumbnail…

Fork of API Heatmap - brand colors round 20 steps

A responsive SVG heatmap displays companies from the GME-20 dataset, each rendered as a colored square labeled with a ticker symbol and a relative score. A three-stop linear color scale (`d3.scaleLinear`) transitions from light gray through teal to dark green, with continuous values rounded to the nearest 0.5 via `Math.ceil`, producing 50 discrete bins. Tooltips show company details on mouseover. The code imports specific functions from D3 v7, including `json`, `scaleLinear`, and `format`, and uses an API-hosted JSON file as the data source, positioning elements with a custom grid layout.

MMark Lam

75% match

Loading thumbnail…

Fork of Fork of Fork of API Heatmap - brand colors round .2 3band

This exemplar displays a grid of company cells, with each cell labeled by its stock symbol and relevance score, colored according to a three-band diverging color scale (from teal to gray to dark green). The color mapping uses a continuous d3.scaleLinear domain from 0 to 10 with outputs rounded to the nearest 0.5 bin. The visualization includes a discrete color legend constructed from 25 rectangles, and tooltips providing company details. Data is loaded via d3.json from a GitHub gist containing 20 symbols.

MMark Lam

75% match