Heatmap

100%

✓ Published0🌍 Public

Last edited Nov 16, 2020

Created on Nov 16, 2020

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.

AI-generated description

MIT Licensed

Similar vizzes

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

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

77% match

Loading thumbnail…

Heatmap

A d3.js heatmap displays a matrix of values using the Inferno color scale, with each cell representing a combination of a group and variable from a CSV dataset loaded from GitHub. The SVG rendering includes band scales for axes, rounded rectangles, and a tooltip that shows the exact value on hover. The code uses d3.scaleSequential with d3.interpolateInferno, d3.axisBottom, d3.axisLeft, and mouse event handlers for interactivity.

Bbepnye@gmail.com

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

76% match

Loading thumbnail…

Heatmap

This example demonstrates interactive data updates in a heatmap visualization. Clicking the red "button rect1" replaces the initial 100-cell color grid with 110 randomly generated values, animating new rectangles as they expand and recolor through `transition().duration(300)` with staggered delays. Clicking "button rect2" instead appends blue circles of varying radii based on the data values [100, 300, 400, 500]. The code uses D3.js selection, `d3.scale.linear` for color mapping from red to green, and underscore.js’s `_.map` for data transformation, with all rendering output as SVG.

RRobinL

75% match

Loading thumbnail…

Heatmap

This heatmap visualizes the frequency of chess opening moves across a 10x10 grid of board positions, with color intensity representing move popularity. The visualization uses d3.scaleBand for axes, d3.scaleLinear for the color gradient from white to green, and d3.axisBottom/axisLeft for labels. Data loads from a CSV file containing sleep efficiency records, though the grid dimensions and labels are hardcoded. The code includes separate modules for axes and heatmap rendering, with d3.csv fetching and d3.selectAll joining rectangles to render cells.

MMartha Cash

74% match

Loading thumbnail…

import reorder.js

This visualization demonstrates matrix reordering to reveal clusters in network connectivity data. It loads a TSV file from GitHub, converts the edge list into an adjacency matrix, and applies the barycenter heuristic from the reorder.js library to permute rows and columns, grouping connected nodes. D3.js fetches the data and constructs the matrix, while the reorder.js functions `mat2graph`, `barycenter_order`, `permute`, and `transpose` handle the optimization. The resulting grid displays ones for existing links, with reordering making dense connection patterns visually apparent.

Mmagua

74% match

Loading thumbnail…

heatmap

This heatmap visualizes a 50×6 matrix of log2-ratio gene expression values, where each cell is color-coded along a diverging scale (red for positive, blue for negative, white for zero) to reveal patterns of up- and down-regulation across conditions. Built with D3 v3 and rendered as an SVG, the chart supports interactive reordering: users can apply hierarchical clustering or sort rows and columns by probe/contrast names, and click on row or column labels to reorder by their cell values. Cells can be selected by dragging the mouse, with corresponding row and column labels highlighted; holding the Alt key allows multiple block selections. The visualization is inspired by the classic Les Misérables co-occurrence matrix and includes a hover-driven tooltip for inspecting individual log2-ratio values.

IIMYin

74% match