Heatmap

100%

✓ Published0🌍 Public

Last edited Nov 25, 2020

Created on Nov 25, 2020

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Heatmap

This heatmap visualization reorders rows and columns of a binary matrix using the `reorder.v1.js` library. The matrix cells are rendered as SVG rectangles, with fill color intensity mapped through a D3 linear scale. Buttons trigger algorithms like optimal leaf ordering and random permutation, with a D3 transition smoothly animating the reordering over 1.5 seconds. The `table.js` script sets up the grid and labels, while the `science.v1.js` library provides supporting statistical functions.

WWei-Che Chang

91% match

Loading thumbnail…

heatmap

This heatmap visualizes a co-occurrence matrix of 50 row items by 5 column contrasts, with cell colors encoding log2 ratio values from -3 (blue) to +4 (red). Built with D3 v3 and rendered as SVG with animation, the heatmap supports reordering via hierarchical clustering, probe/contrast name sorting, and interactive row/column label clicks to re-sort cell values. Users can select cells with the mouse, and Alt-clicking enables multiple block selection, with corresponding row and column labels highlighted upon selection.

IIMYin

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

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

79% match

Loading thumbnail…

Example of Heatmap using D3 with React

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.

LLewis Ward

79% match

Loading thumbnail…

heatmap

This interactive heatmap visualizes a 50×5 co-occurrence matrix, where each cell’s color encodes a log2 ratio value from the accompanying TSV dataset. Built with D3 v3 using SVG, the chart supports reordering via hierarchical clustering or by row/column labels, and clicking a row or column label sorts the corresponding cells. Users can click individual cells to highlight their row and column labels, or select multiple cell blocks while holding the Alt key. Hovering or selecting cells highlights the associated row and column labels, and the interface includes animated transitions for reordering. The example is adapted from GerardoFurtado’s block and is distributed under the MIT license.

GGerardoFurtado

78% match

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

77% match

Loading thumbnail…

Heat Map

This heat map visualizes a sequential color scale transitioning from purple to orange across a continuous spectrum. The view fills the browser window with 100 vertical rectangular bands, each colored via the `d3.scaleSequential` interpolator. The code uses `d3.interpolate` to blend the two colors, `d3.scaleLinear` for positioning, and SVG `<rect>` elements rendered with D3 v7. The example demonstrates how to construct a full-viewport gradient bar for quantitative data mapping.

KKhanAzmat

77% match