A Visual History of Stamen Open Source

100%

A Visual History of Stamen Open Source

✓ Published2🌍 Public

Last edited May 7, 2024

Created on Apr 26, 2021

A visual history of Stamen's open-source activity. Each repository is a layer whose thickness represents smoothed commits per week, ordered from bottom to top by the date of first commit. The streamgraph uses D3's `stack` with `stackOffsetWiggle` and `stackOrderInsideOut`, with an area generator and `d3-area-label` for labels. The data is loaded from a JSON file, and the visualization is rendered with React and SVG.

AI-generated description

This is an experiment in visualizing Stamen's Open Source activity over the years. Each layer is a Stamen repository. The thickness of each layer is the number of commits per week with smoothing applied. This visualization uses a modified Streamgraph technique where the layer order is determined by the time of the first commit. So, as you read the labels from bottom to top, that corresponds to the history of when each repository was introduced.

ISC Licensed

Similar vizzes

Loading thumbnail…

A Visual History of Stamen Open Source Contributors

This visualization presents a streamgraph of commit activity from the top 100 contributors to Stamen’s open source repositories, with each colored layer representing a contributor’s weekly commit count over time. Layers are ordered chronologically by first commit, creating a vertical timeline that traces when contributors joined the projects. The code uses d3.stack with stackOffsetWiggle and stackOrderInsideOut to build the streams, applies smoothing via array-blur, and renders the result as SVG paths with interactive hover effects and links to each contributor’s GitHub profile.

CCurran Kelleher

92% match

Loading thumbnail…

Fork of A Visual History of Stamen Open Source Contributors

This example visualizes the commit activity of the top 100 contributors to Stamen’s open source repositories, using a modified streamgraph where layer order reflects the timing of each contributor’s first commit. It uses D3 v6 with `d3.stack`, `stackOffsetWiggle`, and `stackOrderInsideOut` to build the layered chart, and applies smoothing via the `array-blur` library. Each layer’s thickness encodes commits per week, with repository names as labeled anchors. Data comes from a JSON file of all commits, rendered as SVG with hover interactions highlighting individual layers.

777tinna

89% match

Loading thumbnail…

Fork of A Visual History of Stamen Open Source Contributors

This visualization presents a streamgraph of commit activity from the top 100 contributors to Stamen’s open-source repositories, with each layered area representing a contributor’s weekly commits over time. The layer order follows each contributor’s first commit, so reading from bottom to top reveals the chronological introduction of contributors. The graphic uses D3’s `stack` with `stackOffsetWiggle` and `stackOrderInsideOut`, applies smoothing via the `array-blur` library, and labels layers using `d3-area-label`. Data comes from a remote JSON file of all commits, rendered as SVG with a black backdrop to mask gridline artifacts.

RRoland

89% match

Loading thumbnail…

Fork of A Visual History of Stamen Open Source Contributors

This visualization presents a streamgraph of commit activity from the top 100 contributors to Stamen’s open source repositories, with each colored layer representing an individual author and its thickness reflecting weekly commit counts after smoothing via `array-blur`. Layer order follows the timing of first commits, so reading from bottom to top reveals the sequence of contributor involvement. Built with React and D3, it uses `d3.stack` with `stackOffsetWiggle`, `d3.area`, and `d3-area-label` for labels, rendering as SVG from JSON data loaded via `d3.json`.

SShane Gibney

88% match

Loading thumbnail…

Fork of A Visual History of Stamen Open Source Contributors

This visualization displays Stamen open source contributor activity over time, with each smooth, colored layer representing one of the top 100 contributors by commit count. Layer thickness corresponds to weekly commit volume, and vertical ordering follows the chronological introduction of each repository. The data comes from a GitHub gist of commit records, aggregated into weekly counts and smoothed using `blur` from the array-blur library. Rendering is done with React and D3 (including `d3.stack`, `d3.stackOffsetWiggle`, and `d3.area`), with interactive SVG paths linking to the contributing repositories.

Pprofminia

88% match

Loading thumbnail…

Eric's Fork of A Visual History of Stamen Open Source

This streamgraph shows the commit history of Stamen’s D3-related repositories across time, with each repository as a colored layer whose thickness represents weekly commit counts after smoothing via `array-blur`. Layer order reflects when each repo was first introduced, revealing the monolithic `d3` repository phase (2010–2014) followed by a burst of packages around the 4.0 release and later focused work on `d3-delaunay`. Built with React and D3, it uses `d3.stack` with `stackOffsetWiggle`, `d3.areaLabel` for labels, and SVG paths rendered from JSON data on commit activity.

EEric Rodenbeck

85% match

Loading thumbnail…

Stamen Open Source Git Scraper

This visualization shows commit activity across the Stamen organization’s GitHub repositories. It plots each commit as a point in time, with the data sourced from Git logs scraped via the GitHub API and processed through shell scripts. The visualization uses React and WebGL for rendering, likely with a library like regl or Three.js to display the points. Each commit’s date and author are visible, allowing patterns of development activity across different projects to be compared.

CCurran Kelleher

84% match

Loading thumbnail…

D3 Git History Streamgraph

This streamgraph visualizes commit activity across D3’s GitHub repositories over time, with each layer representing a repository and its thickness reflecting smoothed weekly commit counts. The layer order follows each repository’s first commit, revealing the shift from the monolithic d3 repo to a package explosion during the 4.0 release. Using d3.stack with stackOffsetWiggle and stackOrderAppearance, the code applies array-blur smoothing to the data, renders SVG paths via d3.area, and adds hover effects that highlight individual layers. The visualization links each layer to its repository, and labels are positioned using d3-area-label. Data comes from a JSON file of all D3 commits.

CCurran Kelleher

73% match