Github Punchcard

100%

Github Punchcard

✓ Published0🌍 Public

Last edited Jan 14, 2016

Created on Jan 13, 2016

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.

AI-generated description

Built with blockbuilder.org

Similar vizzes

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…

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

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

74% match

Loading thumbnail…

Gist 890029

This visualization maps the timestamps of Gist 890029 commits as a radial time-series layout, showing activity across days of the week and hours. It uses d3.forceSimulation to position circular nodes on a spiral, with each point encoded by day and time. The rendering relies on d3.quadtree for collision detection and a custom path generator via d3.curveLinear, while axis labels and tick marks are drawn using d3.axisTop and d3.axisLeft. The source data comes from the gist’s file list, where each line is a timestamp parsed into a Date object. Color intensity varies by frequency, and the visualization highlights daily rhythms through a stacked circular band.

CCaged

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

71% match

Loading thumbnail…

Fork of D3 Git History Viz by Week

A stacked area chart visualizes weekly commit counts across D3 repositories. The x-axis shows time, and each colored band represents a different repository. The visualization transforms raw commit data into weekly aggregates, then uses d3.stack and d3.area to render the SVG paths. Data loads from a remote JSON file containing all D3 git history. Random colors are assigned to each repository band. The chart fills the entire browser window.

Uunixr

69% match

Loading thumbnail…

Fork of WIP D3 Git History Viz

This interactive visualization displays the commit history of the D3.js repository over time, revealing patterns of development activity across various sub-repositories. The chart aggregates commits by month and repository, then renders them as a stacked area chart filled with randomly assigned colors. The code utilizes D3's `group`, `stack`, `scaleTime`, `scaleLinear`, and `area` APIs to process and visualize JSON data fetched from a GitHub Gist. The React framework is declared in the package metadata, though rendering is performed directly via SVG manipulation using D3's `select` and `append` methods.

CCurran Kelleher

68% match

Loading thumbnail…

Circular hours per week

This example visualizes multiple weeks of hourly data as concentric circular rings, with each ring representing one week and each segment an hour colored by intensity (daylight hours in yellow, nighttime in blue). The code uses D3.js to generate arc paths via `d3.svg.arc`, mapping random intensity values to color and opacity scales, and includes interactive overlay arcs that highlight an hour on mouseover. The visualization is rendered in SVG with an animated transition, based on a gist by GitNoise built with blockbuilder.org.

PPatrick Wojda

68% match