Fork of D3 Git History Streamgraph

100%

Fork of D3 Git History Streamgraph

✓ Published0🌍 Public

Last edited Feb 5, 2022

Created on Feb 5, 2022

This streamgraph visualizes commit activity across D3’s GitHub repositories over time. Each colored layer represents a repository, with its thickness indicating weekly commit counts after smoothing with `array-blur`. The code loads commit data, aggregates it by week, and uses D3’s `stack`, `stackOffsetWiggle`, and `stackOrderAppearance` to arrange layers, while `d3-area-label` places labels. The layer order reflects the historical introduction of each repository, revealing the shift from the monolithic `d3` repository to many packages after the 4.0 release.

AI-generated description

This is an experiment in visualizing D3 Git History. Each layer is a D3 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.

On the whole, one can see that development occurred in the original monolithic d3 repository from late 2010 to mid 2014. In late 2014 we see an explosion of packages, corresponding to the 4.0 release of D3. Since that great explosion, we see a big push on d3-delaunay in 2018, and ongoing development/maintenance work pretty evenly distributed across the various D3 packages.

This piece was created as a submission for D3 Parade 2021.

It was the starting point for the open source project: stamen/git-history-streamgraph.

ISC Licensed

Similar vizzes

Loading thumbnail…

Fork of D3 Git History Streamgraph

This streamgraph visualizes commit activity across D3 repositories over time, with each colored layer representing a repository and its thickness showing weekly commit counts smoothed via `array-blur`. Layers are ordered by first commit date, revealing the monolithic `d3` repo’s dominance until 2014, followed by the explosion of modular packages around the 4.0 release. The SVG rendering uses `d3.stack` with `stackOffsetWiggle` and `stackOrderAppearance`, while `d3-area-label` positions labels and `d3.hcl` colors layers. Hover effects highlight individual areas, and each layer links to its GitHub repository.

Aall-over-yet

96% match

Loading thumbnail…

Fork of D3 Git History Streamgraph

This streamgraph visualizes the commit history of the d3 GitHub organization. Each colored layer represents a repository, with thickness indicating the number of commits per week, smoothed via the `array-blur` library. Layer order follows the first commit time, showing the shift from the monolithic d3 repo to a proliferation of packages around the 4.0 release. The visualization uses D3 v6’s `area`, `stack`, and `stackOffsetWiggle` APIs, rendering to SVG with area labels from `d3-area-label`. Data comes from a JSON file of all d3 commits.

PPareel Amre

95% match

Loading thumbnail…

Fork of D3 Git History Streamgraph

This visualization shows the commit history of D3 packages as a streamgraph, where each colored layer represents a repository and its thickness reflects the number of weekly commits, smoothed with `array-blur`. Layer order follows the first commit date, revealing the monolithic `d3` repository’s early dominance and the later explosion of packages around the 4.0 release. The code uses `d3.stackOffsetWiggle`, `d3.area`, and `d3-area-label` for the streamgraph rendering, with data loaded from a JSON file of all D3 commits. SVG output includes interactive links to each GitHub repository.

Ddaniel

95% match

Loading thumbnail…

Fork of D3 Git History Streamgraph

This streamgraph visualizes commit history across D3 repositories, with each layer representing a package and thickness showing weekly commit counts smoothed via array-blur. Layer order reflects each repository’s first commit, reading chronologically from bottom to top. The visualization uses d3.stack with stackOffsetWiggle and stackOrderAppearance, d3.area for SVG paths, d3-area-label for labels, and scales from d3.scaleTime and d3.scaleLinear. Data comes from a JSON file of all D3 commits, and hovering highlights individual layers while links open each repository on GitHub.

Sshashisurya

95% match

Loading thumbnail…

Fork of D3 Git History Streamgraph

This visualization shows a streamgraph of commit activity across the many D3 repositories, with each layer representing a package and thickness reflecting weekly commit counts with smoothing applied via the `array-blur` library. Layer order follows the time of first commit, revealing the early dominance of the monolithic d3 repo and the explosion of packages around the 4.0 release. Built with D3 v6, it uses `d3.stack()` with `stackOffsetWiggle` and `stackOrderAppearance`, plus `d3-area-label` for labels. Data comes from a JSON file of all D3 commits, rendered as SVG paths with an axis and hover effects.

GGeolffrey S Mena

95% match

Loading thumbnail…

Fork of D3 Git History Streamgraph

This streamgraph visualizes weekly commit counts for repositories in the D3 ecosystem, with each layer representing a separate D3 package. Layer order reflects when each repository first appeared, showing the original monolithic D3 development from 2010 to 2014, followed by the 4.0 package explosion and later ongoing maintenance. The visualization applies smoothing via `array-blur` and arranges layers using `stackOffsetWiggle` and `stackOrderAppearance`. Labels are placed using `d3-area-label`. Interactive links connect each layer to the corresponding GitHub repository.

JJONATHAN SIMON

95% match

Loading thumbnail…

Fork of D3 Git History Streamgraph

This fork of the D3 Git History Streamgraph visualizes commit activity across D3 repositories over time. Each layer represents a repository, with thickness scaled to the number of weekly commits, smoothed via the `array-blur` library, and stacked using `stackOffsetWiggle` with `stackOrderAppearance`. The order of layers is determined by the first commit date, so reading labels from bottom to top reveals the historical introduction of each repo. Rendered as an SVG using `d3.area`, `axisTop`, and `axisBottom`, the chart uses hover effects to highlight individual layers, making the explosion of packages around D3 4.0 clearly visible. Data comes from a JSON file of all D3 commits, sorted by week.

CChase Hall

95% match

Loading thumbnail…

Forked Fork of D3 Git History Streamgraph

This streamgraph visualizes commit activity across D3 repositories over time, with each layer representing a repository and its thickness showing smoothed weekly commit counts. Layer order follows each repository’s first commit date, so reading labels from bottom to top traces D3’s evolution from the monolithic `d3` repo through the 4.0 package explosion. The code uses `d3.stack` with `stackOffsetWiggle` and `stackOrderAppearance`, `d3.area`, `d3.areaLabel`, and `d3.scaleOrdinal` with HCL colors. Data comes from a JSON file of all D3 commits, rendered as SVG with axis ticks and hover highlighting.

Aalikanet

95% match