Skip to main content
SimilarExport ZIP
100%

Magic Heat Map

✓ Published0🌍 Public
CCurran Kelleher
Last edited Oct 5, 2015
Created on Oct 5, 2015

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.

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 -->
MIT Licensed

Similar vizzes

Loading thumbnail…

Magic Bar Chart

This example demonstrates a Magic Bar Chart, a reusable visualization component built with Chiasm and bundled with Browserify for production use. The chart animates the transition of bar positions and heights based on changing data, rendering smooth, dynamic updates with SVG. The visualization reads from the `adult.csv` dataset, which contains demographic records including age, education, occupation, and income category. The chart likely groups or aggregates this data by income category and animates between different categorical groupings (such as sex, race, or workclass) using Chiasm's reactive dataflow. The SVG-based rendering and animation make the bar chart transitions fluid, providing an interactive and engaging way to explore the dataset. The example demonstrates how Chiasm can be used to build a reusable, production-ready data visualization component.# Magic Bar Chart This example demonstrates a reusable bar chart built with Chiasm and bundled using Browserify. It visualizes the UCI Adult dataset, showing income distributions across demographic categories. The chart uses animated SVG transitions to smoothly morph between different data groupings, making it easy to compare income patterns across attributes like education, occupation, and native country. The visualization showcases how Chiasm's reactive dataflow architecture enables clean, maintainable visualization code in production environments. The "magic" refers to the chart's ability to automatically update and animate when the underlying data or configuration changes. ---

CCurran Kelleher
79% match
Loading thumbnail…

Magic Bar Chart

This interactive bar chart, built with SVG and powered by a Chiasm + AngularJS architecture, lets users explore UCI Machine Learning datasets. Users select a dataset, choose a column to visualize, and adjust orientation and color via linked widgets. For numeric columns, values are binned into histograms; categorical columns produce bars for each unique value. The visualization reads data such as the adult census data, illustrating that changing the data or encoding triggers declarative configuration updates that the Chiasm runtime applies by diffing against the previous state. Note that tick labels may overlap on dense axes.

CCurran Kelleher
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
70% 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
68% 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
68% match
Loading thumbnail…

Visualization Editor

This interactive visualization, built with the Chiasm runtime, combines a scatter plot with lines and a line chart to explore temperature data from the Data Canvas - Sense Your City API. The lower line chart displays temperature over time for all cities, while the upper chart allows zooming via brushing, inspired by the D3 Focus+Context example. Brushing in the top chart filters the scatter plot to show only the selected time range. The editor uses reactive dataflow to update scales, axes, and brush interactions dynamically.

CCurran Kelleher
68% 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
67% match
Loading thumbnail…

D3 - Heatmap

This heatmap visualizes impact magnitudes across locations and months from January to September 2016, using color intensity to convey variation. The D3.js v7 code loads CSV data via `d3.csv`, maps locations and months to x- and y-axes using `d3.scaleBand`, and fills rectangles with the sequential `d3.interpolateViridis` color scale. The SVG rendering includes axis labels, a chart title, and a grey background, with the heatmap cells styled with rounded corners and white strokes.

CChandana Srinivas
67% match