Heatmap YearHour Calendar View

100%

Heatmap YearHour Calendar View

✓ Published0🌍 Public

Last edited May 12, 2017

Created on May 12, 2017

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.

AI-generated description

Built with blockbuilder.org

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

88% match

Loading thumbnail…

Day Hour HeatMap

This example shows a day-by-hour heatmap of activity counts, with each cell colored on a blue-yellow quantile scale. The SVG chart lays out seven days of the week as rows and 24 hours as columns, using a fixed grid size. Day and hour labels are styled with monospaced fonts, and the color scale maps nine buckets from light yellow to dark navy. The visualization uses D3 v3 to load TSV data and render the heatmap with SVG, and it includes a simple dataset picker for switching data sources. The design supports quick pattern recognition of peak and off-peak periods across the week.

AARC032110

83% match

Loading thumbnail…

Calendar-YearHour view

This calendar-year hour view displays a 12-month grid of hourly cells for the year 2017, with each month rendered as a separate SVG panel. Days run vertically and hours horizontally, with date and hour labels along the axes. The code uses D3 v4’s `d3.timeHours` and `d3.timeDays` to generate the time intervals, and `d3.timeFormat` to format the data for tooltips. Each rectangular cell is appended with a `title` element showing the full timestamp, while month outlines and borders are drawn via SVG `rect` elements. The visualization relies on D3 data joins and SVG rendering to compose the compact grid layout.

TThanaporn-sk

82% match

Loading thumbnail…

d3 | reusable heatmap calendar

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.

CCBasis

81% match

Loading thumbnail…

Day / Hour Heatmap in v4

This heatmap visualizes concurrent user sessions across days of the week and hours of the day, with cell color intensity encoding the session count. The SVG-based chart uses `d3.scaleQuantile` with a nine-color YlGnBu palette and includes a legend showing quantile thresholds. It reads TSV data via `d3.tsv`, renders labeled day and hour axes, and animates color transitions with `transition().duration(1000)` when switching between two datasets using the dataset picker buttons.

TThanaporn-sk

81% match

Loading thumbnail…

Calendar-Month/Hour view

This example presents a calendar-style grid mapping days of the month on the y-axis against hours on the x-axis for January 2017. Each hour-cell is rendered as a small SVG rectangle, with tooltips revealing the date and hour. The code uses D3 v4’s `d3.timeHours` to generate the hourly intervals and `d3.timeFormat` to label data, storing formatted strings via `.datum()`. The layout is fixed at 900 by 900 pixels, with cells sized at 17 pixels and axes labeled generically (“xxx”), suggesting a template for time-series exploration.

TThanaporn-sk

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

80% match

Loading thumbnail…

Day / Hour Heatmap

This heatmap visualizes the frequency of user sessions by day of week (rows) and hour of day (columns), with color intensity representing the recorded value. Built with D3 v3 and rendered as SVG, the chart includes an animated transition that smoothly swaps between two datasets (data.tsv and data2.tsv) when triggered. The color scale maps low to high values to a sequential palette, and hover tooltips reveal exact values. The example is inspired by Trulia Trends, uses concurrent user session data from a development environment, and is MIT licensed.

663anp3ca

80% match