Skip to main content
SimilarExport ZIP
100%

Heatmap

✓ Published0🌍 Public
RRobinL
Last edited Jun 24, 2016
Created on Jun 24, 2016

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.

AI-generated description

Similar vizzes

Loading thumbnail…

Heatmap random points

A clickable red button triggers a randomized heatmap of up to one thousand points, where each point’s color interpolates from red to green based on its randomly generated value. The number of points and columns is recalculated on each click, and the heatmap cells are appended as SVG rectangles using D3.js and Underscore.js. When the button is clicked, new rectangles enter with a zero width and animate to full size, while exiting rectangles shrink to nothing, with staggered transitions creating a cascade effect. The animation uses D3’s `transition()` and `.delay()` to sequence the updates.

RRobinL
85% 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
78% 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
Loading thumbnail…

heatmap

This animated visualization shows five circles of varying sizes and colors moving across a black canvas, each expanding from a point of zero radius to its full size before settling into its final position. The circles are drawn with distinct neon hues, including blue and magenta, and are positioned at different coordinates throughout the frame. The animation is implemented using the D3.js library, specifically leveraging the `select`, `transition`, and `easeLinear` APIs to manage the enter, update, and exit states of each circle as the data changes. The data is hardcoded in the script, and the circles transition over a two-second duration with a delayed stagger effect.

Aalexis
76% 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
75% match
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
75% 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
75% 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
74% match