Simple GitHub Calendar

100%

Simple GitHub Calendar

✓ Published0🌍 Public

Last edited Oct 16, 2018

Created on Oct 16, 2018

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.

AI-generated description

A simple version of the GiHub commit calendar, just to try to simplify this exemple by using d3.time utilities. if you need this type of calendar, you should know about the cal-heatmap plugin.

forked from <a href='http://bl.ocks.org/biovisualize/'>biovisualize</a>'s block: <a href='http://bl.ocks.org/biovisualize/31eb70a0880f66262cda'>Simple GitHub Calendar</a>

mit Licensed

Similar vizzes

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

93% match

Loading thumbnail…

Github activity overview

This example simulates a GitHub contribution heatmap, displaying 365 days of activity as a grid of colored squares. Each square’s color encodes a random activity value from 0 to 9, using a linear scale with an RGB interpolator that transitions from light gray to green; zero-value days appear in light gray. Hovering over a square reveals its value in a tooltip positioned near the cursor. The visualization is built with D3 v5, using `d3.select`, `d3.scaleLinear`, `d3.interpolateRgb`, and `d3.randomInt` to generate and render the data.

Rrohame

81% 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…

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

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

77% match

Loading thumbnail…

Britecharts Heatmap MVP

This example renders a heatmap of GitHub commit activity for the Britecharts repository, using data from the GitHub punch_card API. The visualization displays days of the week on one axis and hours on the other, with colored boxes representing commit quantities. Built with d3.v4, it uses `d3.scaleLinear` with `d3.interpolateHcl` to map data values to a red color gradient. The chart exposes custom mouse event dispatchers via `d3.dispatch` and renders boxes as SVG elements within a container group.

GGolodhros

77% match

Loading thumbnail…

Github Punchcard

A GitHub punchcard visualizes commit activity across the days of the week and hours of the day. Random intensity values drive the size of circles plotted for each hour, with day names and tick marks providing structure. The code uses D3.js version 3.5.5 to build an SVG with scales for positioning, transitions to animate circle radii from zero, and data binding to generate all elements dynamically.

PPatrick Wojda

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

76% match