HeatMap

100%

✓ Published0🌍 Public

Last edited Jan 10, 2018

Created on Jan 9, 2018

This interactive heatmap displays randomly generated values across categorical x- and y-axis names, with hierarchical clustering shown as dendrograms on both axes. The visualization includes a linked bar chart that updates based on selections made via a custom lasso tool, which uses SVG selection methods and absolute positioning calculations. Built with D3 v4, the example employs d3-scale-chromatic for color interpolation and d3-polygon for lasso hull computation. The heatmap renders as SVG rectangles, while the footer legend and tooltip are positioned according to configurable percentage-based layout parameters.

AI-generated description

Similar vizzes

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

82% match

Loading thumbnail…

heatmap

This heatmap visualizes the entropy of various chart types across different data variables from automotive data, using a three-color YlGnBu sequential palette to indicate value ranges. The x-axis represents data fields while the y-axis lists chart categories, with a color legend and axes labeled. Built with D3 v3, it uses d3.scale.ordinal with rangeBands for positioning rectangles, d3.scale.linear for color mapping, and d3.svg.axis for tick marks. The nested data structure applies the entropy values to each cell, with hover highlighting for interaction.

LLjfernando

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

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

80% match

Loading thumbnail…

Heat Map

A 5x5 heat map visualizes numeric values from a CSV file as colored squares, using a quantile scale with a sequential orange colormap to encode values from 1 to 20. The SVG rendering employs d3.csv for data loading, d3.scaleQuantile for color mapping, and d3.axisRight and d3.axisBottom to display axes. A tooltip appears on mouseover, showing the exact value of each cell.

CChai94

79% match

Loading thumbnail…

Magic Heat Map

This interactive heat map allows exploration of multidimensional datasets by aggregating data into two-dimensional bins and color-coding the resulting counts. Built with Chiasm and Angular, it offers controls for selecting datasets, choosing X and Y columns, adjusting bin counts, and picking the color range. The visualization supports both numeric and categorical axes, employing histogram binning for numeric columns via Chiasm's dataReduction plugin. The D3.js-based heat map component renders an SVG with axes and labeled rectangles, scaling colors from a user-specified minimum and maximum.

TThanaporn-sk

79% match

Loading thumbnail…

HeatMap: Career Data

A d3.js heatmap displays career data across two categorical axes, with each cell colored using an inferno sequential scale. The visualization maps group and variable labels to x and y coordinates, while the cell intensity reflects a numeric value. Hovering a cell reveals its exact value via a custom tooltip. Built with d3.js v4 and the d3-scale-chromatic library, the SVG chart loads data from a remote CSV file and includes axis labels, a title, and a subtitle.

SSimon Hackbert

79% match

Loading thumbnail…

HeatMap Try 2

A heatmap-like scatterplot visualizes a time series of x and y positions as a smooth, green path with a Catmull-Rom curve, overlaid with individual circle marks. The code loads CSV data from a GitHub gist, parses numeric coordinates, and uses D3 v7 scales, axes, and the `d3.line` API with `curveCatmullRom.alpha`. The SVG rendering fills the browser window, with axis tick labels styled via CSS.

KKhanAzmat

79% match