Simple GitHub Calendar

100%

Simple GitHub Calendar

✓ Published0🌍 Public

Last edited Mar 9, 2017

Created on Mar 9, 2017

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.

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

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

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

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

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

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

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

73% match

Loading thumbnail…

Fork of WIP D3 Git History Viz

This visualization shows monthly commit activity across D3.js repositories as a stacked area chart, with each repository represented as a colored layer that reveals how contribution patterns shift over time. The code aggregates raw commit data by month and repository using D3’s `timeParse`, `group`, and `stack` functions, then renders the result as SVG paths generated by `d3.area` and scaled with `scaleTime` and `scaleLinear`. Axes are drawn with `axisBottom`, `axisLeft`, and grid lines, while data loads from a GitHub Gist URL containing all D3 commits.

NNita

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

72% match