Calendar-YearHour view

100%

Calendar-YearHour view

✓ Published0🌍 Public

Last edited May 11, 2017

Created on Apr 29, 2017

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.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

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

93% match

Loading thumbnail…

Heatmap YearHour Calendar View

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.

TThanaporn-sk

82% match

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

76% match

Loading thumbnail…

Calendar Alternate Orientation v4 update

This calendar visualization displays daily fact counts for 2016 as an exploded month grid, with each day colored on a red-to-green scale based on value intensity using a d3.scaleQuantize and a polylinear color gradient. The code uses d3.timeDays, d3.timeMonths, and d3.timeYears to structure the layout, while d3.timeFormat handles date parsing and week/month calculations. A hover tooltip appears via d3.csv-loaded data, and the animation-ready SVG layout arranges months in rows with white grid lines separating cells.

BBBischof

75% match

Loading thumbnail…

Calendar View v4

A calendar view displays daily Dow Jones Industrial Average returns from 2010, with each day colored by the percent change between opening and closing prices. The visualization arranges days into a grid of weeks and months across multiple SVG charts, one per year, using a diverging RdYlGn color scale from Cynthia Brewer. The code loads CSV data via `d3.csv`, processes it with `d3.nest` and `rollup` to compute daily returns, and maps values through `d3.scaleQuantize` to eleven color classes. Layout uses `d3.timeDays`, `d3.timeMonths`, and custom path generation to delineate month boundaries.

TThanaporn-sk

74% match

Loading thumbnail…

Simple GitHub Calendar

A GitHub-style commit calendar displays a year of daily activity as color-coded cells arranged in weekly columns. The visualization uses D3 v3 to generate an SVG grid, with each cell representing a day and its intensity mapped through a linear color scale from white to sky blue. Hovering reveals a tooltip with the exact date and value, while a highlighted outline marks the selected cell. The code relies on `d3.time.weeks`, `d3.time.days`, and `d3.time.format` to structure the time series, with randomized data standing in for real commit counts.

TThanaporn-sk

72% match

Loading thumbnail…

circular calendar

This circular calendar visualizes a year of events as concentric rings, with each month occupying a colored arc segment and individual days marked along the circumference. Event markers, color-coded by project (DS, N, S, special), appear as highlighted points on their corresponding dates. The visualization is built with D3 v4, using SVG paths and arcs generated via `d3.arc()` with computed start and end angles derived from each day-of-year. The code also defines custom arc segments for months and spring/summer/autumn color schemes, with a large “middle” text element at the center.

TThanaporn-sk

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

72% match