Skip to main content
SimilarExport ZIP
100%

heatmap

✓ Published0🌍 Public
LLjfernando
Last edited Jan 20, 2018
Created on Jan 18, 2018

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.

AI-generated description

Built with blockbuilder.org

Heatmap

  • 20 pts Create a heatmap encoding weekday versus month (or visa versa) along the x- and y-axis, and incident count using a 3-color sequential color palette.

  • 04 pts Add a compact color legend to your visualization.

  • 02 pts Add annotations for the x-axis, y-axis, and a chart title or caption. This includes axis lines, tick marks, and tick labels. The exact style is up to you.

  • 02 pts Add text annotations for the minimum and maximum values only.

  • 02 pts Add one general conclusion about the data that you can make from your visualization. This can be placed as paragraph text below your SVG.

forked from <a href='http://bl.ocks.org/junngeronimo/'>junngeronimo</a>'s block: <a href='http://bl.ocks.org/junngeronimo/e23ee02a55d3b59c47cc'>heatmap</a>

mit Licensed

Similar vizzes

Loading thumbnail…

heatmap

This heatmap visualizes hourly activity across the days of the week, using a color scale from light yellow to dark navy to represent intensity. The chart displays day labels on the y-axis and time labels (from 1a to 12p) on the x-axis, with each cell representing an hour. Built with D3 v3, the visualization renders as SVG rectangles, with colors mapped from a nine-bucket YlGnBu palette. The code loads data from external TSV files, though the rendering logic for the heatmap cells is not included in the visible snippet.

DDarienLiang
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
77% 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
75% match
Loading thumbnail…

HeatMap

This heatmap visualizes automobile specifications from a small dataset, displaying cars along the x-axis and attributes such as engine size, speed, power, and price along the y-axis. Cell colors, rendered with the `d3.scaleSequential` and `d3.interpolateInferno` color scale, encode the power value of each car. The chart is built with D3 v4, using `d3.scaleBand` for axes and SVG rectangles for cells. Interactive tooltips appear on hover, showing the car’s power value.

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

Heatmap

This heatmap shows monthly values across five years, with a white-to-orange color scale indicating magnitude from 0 to 2. Rendering as SVG, the visualization uses d3.scaleBand for month and year axes, d3.scaleLinear for color encoding, and d3.csv to load the heatmap.csv data. A tooltip appears on hover, displaying the exact cell value via mouseover, mousemove, and mouseleave handlers.

Pprateekvasi
74% match
Loading thumbnail…

heatmap with legend d3

This heatmap visualizes the average fuel economy (mpg) of cars across model years and engine displacement ranges, using color intensity to represent efficiency values. The chart is built with D3 v7, loading CSV data and using `d3.rollup` to aggregate means, `scaleBand` and `scaleTime` for axes, and a sequential color scale with `d3.interpolateBlues`. Interactive tooltips display details on hover, while the legend is generated using the d3-legend library.

Ccwb314159@gmail.com
74% 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
74% match