Example of Heatmap using D3 with React

100%

Example of Heatmap using D3 with React

✓ Published4🌍 Public

Last edited Jul 27, 2021

Created on Jul 26, 2021

This heatmap displays a 10-by-10 grid of values using a white-to-teal linear color scale (`d3.scaleLinear`) mapped from a CSV dataset loaded via `d3.csv`. The graphic uses React to render SVG rectangles for each cell, with `d3.scaleBand` positioning the rows and columns. Axis labels for groups (A–J) and variables (v1–v10) are drawn as SVG text elements. The full window is filled with the visualization, and the chart includes a title above the plot area.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

Loading thumbnail…

Heatmap with D3 Overlay

This example displays a heatmap of 100 data points across 10 variables and 10 groups, with each cell colored on a teal-to-green gradient using d3.scaleLinear. A large white "D3" text overlay is positioned at the center of the SVG canvas, creating a visual watermark effect. The React component loads CSV data via d3.csv and renders the chart using d3.scaleBand for axes and SVG rect elements. The overlay text is drawn directly within the same SVG group, demonstrating how to combine data-driven visualizations with static annotations in a React-D3 workflow.

LLewis Ward

90% match

Loading thumbnail…

Heatmap with Tooltip in React

A heatmap displays a 10x10 matrix of values as colored squares, using a white-to-teal linear scale to represent the data range from 1 to 100. The visualization is rendered as an SVG chart using React components, D3.js scales (scaleBand, scaleLinear), and data loaded from a CSV file via d3.csv. Hovering over a square toggles its border and reveals the exact value in bold text, implemented through React's useState hook for interactive tooltips.

LLewis Ward

88% match

Loading thumbnail…

Heatmap D3 random

This example shows a 50-by-50 heatmap with randomly generated values, where each cell’s color scales from light teal to dark green. It renders as an SVG using React, with d3.scaleBand for x and y positioning and d3.scaleLinear for the color range. The data is created in-memory via Math.random, and the chart fills the entire browser window.

LLewis Ward

87% match

Loading thumbnail…

D3 - Heatmap

This heatmap visualizes impact magnitudes across locations and months from January to September 2016, using color intensity to convey variation. The D3.js v7 code loads CSV data via `d3.csv`, maps locations and months to x- and y-axes using `d3.scaleBand`, and fills rectangles with the sequential `d3.interpolateViridis` color scale. The SVG rendering includes axis labels, a chart title, and a grey background, with the heatmap cells styled with rounded corners and white strokes.

CChandana Srinivas

82% match

Loading thumbnail…

Heatmap with tooltip

This example shows a 10x10 heatmap with a custom tooltip that reveals the exact value of each cell on hover. The data is loaded from a CSV file and rendered as colored squares, with a linear color scale mapping values from white to teal. Built with D3 version 6, the visualization uses `d3.scaleBand` for axes, `d3.scaleLinear` for the color encoding, and event listeners for mouse interactions. The tooltip is a styled HTML div appended to the page, positioned using the event’s coordinates and updated on mousemove.

LLewis Ward

82% match

Loading thumbnail…

MouseOver SVG Color Change

This example displays a heatmap of categorical data, with groups (A-J) on the x-axis and variables (v1-v10) on the y-axis, colored by a linear scale from white to teal. The React component fetches CSV data via `d3.csv` and renders it using SVG, though it currently only draws a black background. The `d3.scaleBand` and `d3.scaleLinear` functions define the axes and color mapping, while a mouse enter handler attempts to change the background color, serving as a minimal interactive demonstration.

LLewis Ward

81% match

Loading thumbnail…

Heatmap

This heatmap displays binary matrix values as colored cells, with rows and columns labeled for reference. The visualization supports three ordering strategies: random permutation, optimal leaf ordering, and initial order restoration, all controlled by buttons. Built with D3.js and the reorder library, the SVG renders cells colored on a white-to-orange scale based on value intensity, while the table.js component handles responsive reordering with animated transitions.

Iimsohandsome123

79% match

Loading thumbnail…

Untitled

This example shows a 10-by-10 heatmap of categorical data, where each cell’s fill pattern encodes a numeric value instead of color. Four texture patterns with different circle sizes are mapped to value ranges via a `d3.scaleOrdinal`. The chart is built with D3 v4, using `d3.scaleBand` for axes and SVG `<rect>` elements for cells. Data is loaded from a remote CSV file, and textures are generated with the textures.js library.

Zzoniyac

79% match