Day / Hour Heatmap

100%

Day / Hour Heatmap

✓ Published0🌍 Public

Last edited Feb 13, 2017

Created on Feb 12, 2017

This heatmap visualizes concurrent user sessions across days of the week and hours of the day, inspired by Trulia Trends. Using D3 v3 and SVG, it renders a grid where each cell represents one hour of one day, colored by the recorded session count from a development environment. The chart includes a color legend to map values to hues and an animated transition that cycles through two datasets (data.tsv and data2.tsv), smoothly updating the cell colors to compare patterns between the two periods. Rows correspond to days (1–7), columns to hours (0–23), and the color scale highlights peak usage times, with the animation providing a temporal comparison of activity distributions.

AI-generated description

Inspired by Trulia Trends - but with code and using SVG.

Example data shows concurrent user sessions over time, taken from a development environment.

MIT Licensed, see LICENSE.MD.

forked from <a href='http://bl.ocks.org/tjdecke/'>tjdecke</a>'s block: <a href='http://bl.ocks.org/tjdecke/5558084'>Day / Hour Heatmap</a>

mit Licensed

Similar vizzes

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

97% match

Loading thumbnail…

Day / Hour Heatmap

This heatmap visualizes concurrent user sessions over time, with days on the y-axis (1–7) and hours on the x-axis (1–24), colored by activity intensity. Built with D3 v3 and rendered as SVG, it supports animated transitions between two datasets via a toggle, using a diverging color scale to highlight high- and low-usage periods. The example is inspired by Trulia Trends and demonstrates how a compact grid layout can reveal daily and hourly usage patterns, such as peak session activity during mid-afternoon and lower overnight usage. Two TSV datasets are provided to compare different usage distributions, and the chart updates smoothly when switching between them.

Aandressarg

96% match

Loading thumbnail…

Day / Hour Heatmap

This heatmap visualizes concurrent user sessions by day of the week and hour of the day, using an SVG grid of 24 columns (hours) and 7 rows (days), with color intensity derived from a quantile scale of session counts. The example loads tab-separated data via `d3.tsv` and renders animated transitions between two datasets, selected by buttons, with each cell’s fill updating over 1000 milliseconds. It builds the chart with D3 v3, including `d3.scale.quantile`, SVG `rect` elements with rounded corners, axis labels for weekdays and times, and a legend showing value thresholds. Data originates from a development environment’s session logs, as noted in the README.

AAjayyy

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

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

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

85% match

Loading thumbnail…

Heatmap with data update

This heatmap displays activity levels across days of the week and hours of the day, with data updating via a dropdown menu and left/right navigation controls. The visualization uses D3 v4 to render SVG rectangles colored by a linear scale from light blue to dark gray, representing values from 1 to 10. Users can switch between different locations from a dropdown menu or navigate through them using the left/right arrows, triggering a smooth 500ms transition that recolors the heatmap cells. The chart includes day and hour labels, and is built with responsive sizing that adapts to the window dimensions.

Aachebrol

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

83% match