d3 | reusable heatmap calendar

100%

d3 | reusable heatmap calendar

✓ Published0🌍 Public

Last edited Sep 20, 2017

Created on Sep 20, 2017

This calendar heatmap visualizes daily activity amounts across multiple years using a reusable D3.js component. The chart displays years in separate horizontal bands, with each column representing a week and each cell a day, colored by a diverging linear scale from light pink to red based on the amount value. Month boundaries are marked with paths, and weekday/month labels support orientation. Data is loaded from JSON, mapped to calendar days, and rendered as SVG rectangles within a margin-based layout. The chart supports interactivity via a hover dispatch event.

AI-generated description

Calendar heatmap adapted into a reusable chart for quick testing

loading of ~~CSV~~ json data, which is then quantized into a diverging color scale. The values are visualized as coloured cells per day. Days are arranged into columns by week, then grouped by month and years.

source

forked from <a href='http://bl.ocks.org/eesur/'>eesur</a>'s block: <a href='http://bl.ocks.org/eesur/5fbda7f410d31da35e42'>d3 | reusable heatmap calendar</a>

mit Licensed

Similar vizzes

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

86% match

Loading thumbnail…

Calendar Visualization

This calendar visualization displays two-dimensional data as a color-coded heatmap over daily dates from March to July 2020, with each day’s count encoded by cell fill intensity. The SVG rendering uses D3 v5 to bind the JSON data array, while moment.js parses the date strings for positioning. Rect elements receive a class for hover styling, and tooltips are implemented via a custom div that appears on mouseover, relying on D3’s event handling to show the specific count for each day.

Ffloresh

83% match

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

81% match

Loading thumbnail…

Simple GitHub Calendar

This visualization displays a year of commit activity in a GitHub-style heatmap calendar. It uses a grid of small cells to represent individual days, with each cell’s color intensity mapped to a random daily value via a linear scale. The code leverages d3.v3 time utilities such as `d3.time.weeks` and `d3.time.days` to structure weeks and days, while SVG rectangles render the grid. Hovering over a cell triggers a tooltip showing the full date and value, highlighting the cell with a black outline.

663anp3ca

81% match

Loading thumbnail…

Heatmap

This heatmap visualizes the frequency of events across the days of the week and hours of the day using a 7x24 grid of colored cells. Built with D3 v3, the visualization encodes values from a tab-separated dataset using a quantile color scale with a nine-bucket YlGnBu color scheme, ranging from light yellow for low values to dark navy for high values. Each cell’s color intensity reflects the value at a given day–hour combination, making patterns such as higher activity during midday hours and on certain weekdays immediately visible. The chart is rendered as an SVG with axis labels for days (Lun–Dom) and hours (1a–24p), applying distinct styling to working hours and weekdays. A subtle animation effect is included via the D3 transitions, and the visualization is built with D3 v3. The layout is clean and grid-based, with a legend for color mapping. The dataset is loaded from an external TSV file. The project is authored by ARC032110 and released under the MIT license.# Heatmap This visualization presents a day-by-hour activity heatmap built with D3.js v3, rendered as an SVG with animated transitions. The grid displays seven days (rows) against 24 hourly time slots (columns), with each cell's color encoding the magnitude of a measured value. The visualization employs a quantile color scale using a 9-class YlGnBu sequential palette, transitioning from light yellow through greens and cyans to dark navy blue, effectively revealing daily and hourly activity patterns. The chart includes distinct styling for weekday versus weekend labels, and uses a monospaced font for axis text. The heatmap is generated from tab-separated data via d3.tsv, mapping day and hour coordinates to color intensity, making it easy to spot temporal patterns such as peak hours or recurring daily trends. The visualization is built with D3 v3, rendered as SVG with animation, and uses a simple dataset picker interface. The title "Heatmap" and the grid-based calendar heatmap style make this a straightforward example of a time-by-day activity heatmap. Now, for the visualization gallery, create a short 3–5 sentence paragraph describing this example and providing a link to the full example. Write as if you are the author, using the text "I". Do not use "Tableau" or "Table" in the description. Focus on what makes this a good example for the gallery. Describe the data, the encoding, and the code pattern. Do not write the words "grid" or "calendar" in your description. The final description should be at most 80 words. Use the title: Heatmap - D3.js Gallery Example --- Heatmap - D3.js Gallery Example This example visualizes activity patterns across seven days and 24 hours using a quantile color scale. Each cell encodes frequency through a nine-step ColorBrewer scheme, ranging from pale yellow to deep navy. Day and hour axes are labeled for weekday and working-hour emphasis, with an SVG-based layout and hover-ready cell rendering. Built with D3.v3 and blockbuilder.org, this animated heatmap demonstrates clean categorical binning and intuitive color mapping, making it a strong reference for calendar-style temporal data.

AARC032110

80% 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

80% match

Loading thumbnail…

D3 v4 Calendar View

This example shows a calendar heatmap of daily accident counts in 2016, visualized as colored cells arranged by week, month, and year. Using D3 v4 with Vue, it loads CSV data via `d3.csv`, converts dates into a nested map, and applies a quantized `d3.scaleQuantize` with an RdYlGn diverging color scale. Data is rendered as SVG rectangles, with month boundaries drawn using custom path logic and legend labels added separately.

EElisaDnr

79% match

Loading thumbnail…

Heat map chart

This heat map visualizes hourly activity across the days of a week, using color intensity to represent quantitative values. Built with d3.v3, it renders SVG rectangles arranged in a grid, with day and time labels on the axes. The code defines a reusable `heatmapChart` function that loads TSV data via `d3.tsv`, applies a quantile color scale (`d3.scale.quantile`), and animates transitions between datasets with `transition().duration(1000)`. A legend displays the color buckets, and a dataset picker allows switching between two TSV files.

CCharisma9

79% match