Skip to main content
SimilarExport ZIP
100%

Magic Heat Map

✓ Published0🌍 Public
TThanaporn-sk
Last edited Aug 17, 2016
Created on Aug 17, 2016

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.

AI-generated description

This example shows how to use Chiasm to build an interactive heat map visualization. This is a 2 dimensional variant of the example Magic Bar Chart (browserified). The original data is aggregated by counting along both the X and Y axes.

<!-- Start of SimpleHitCounter Code --> <div align="center"><a href="http://www.simplehitcounter.com" target="_blank"><img src="http://simplehitcounter.com/hit.php?uid=1959739&f=16777215&b=0" border="0" height="18" width="83" alt="web counter"></a></div> <!-- End of SimpleHitCounter Code -->

forked from <a href='http://bl.ocks.org/curran/'>curran</a>'s block: <a href='http://bl.ocks.org/curran/a54fc3a6578efcdc19f4'>Magic Heat Map</a>

MIT Licensed

Similar vizzes

Loading thumbnail…

Magic Heat Map

This visualization uses the Chiasm library to build an interactive heat map from the adult census dataset. The data is aggregated by counting records along both the X and Y axes, and the resulting two-dimensional bin counts are rendered as colored cells in an SVG heat map. The view supports interaction, allowing users to explore patterns in the dataset. The project, authored by Curran, is a 2D adaptation of the earlier Magic Bar Chart example, reusing its reactive/data-joining approach for the heat map case.

CCurran Kelleher
84% match
Loading thumbnail…

HeatMap

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.

SSumNeuron
79% 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
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
75% match
Loading thumbnail…

Heatmap (2D Histogram, CSV)

This heatmap displays the frequency of values across dates and time buckets, with color intensity representing the count. The visualization uses a 2D histogram where each rectangle's fill color maps to the count value, from white to steelblue. Built with D3 v3, the code loads CSV data via `d3.csv`, parses dates with `d3.time.format`, and renders the tiles as SVG rectangles. Axes and a color legend are generated using `d3.svg.axis` and the linear scale functions.

Mmbostock
74% 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
74% match
Loading thumbnail…

Calendar Heatmap

This calendar heatmap combines a yearly calendar view with a day-hour heatmap, showing monthly data across 24-hour segments with color-coded values. The visualization renders two SVG charts: a calendar grid for each month and a detailed hour-by-day matrix, both using D3 v3 with quantile color scales and d3-tip tooltips. Sample data includes daily amounts for January 2017, color-coded through custom color schemes and animated transitions for interactive exploration.

MMagicTK
73% match
Loading thumbnail…

Heatmap YearHour Calendar View

A calendar-style heatmap displays data for 2014 across twelve monthly SVG panels, with each day of the month plotted against the 24 hours of the day. The intensity of each hour is encoded through a linear color scale from white to blue, representing percentage values (PER) loaded from a CSV file. The visualization uses d3.nest to group and roll up the data, and d3.scaleLinear to map value ranges to colors. Rectangles are positioned using d3.timeHours and d3.timeDays iterators, with month labels and hour/date legends derived from the time scale.

TThanaporn-sk
73% match