Fork of D3 Git History Streamgraph

100%

Fork of D3 Git History Streamgraph

✓ Published0🌍 Public

Last edited May 15, 2021

Created on May 15, 2021

This visualization uses a streamgraph to show D3's Git commit history, with each layer representing a D3 repository and thickness indicating weekly commit counts after smoothing. The layer order reflects when each repository was first introduced, revealing the transition from the monolithic `d3` repository to the 4.0 package explosion. Built with D3 v6, it uses `d3.area`, `d3.stack` with `stackOffsetWiggle`, and `d3-area-label` for labeling, while loading commit data from a JSON gist. Interactivity includes hyperlinks to each repository.

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.

ISC Licensed

Similar vizzes

Loading thumbnail…

Fork of D3 Git History Streamgraph

This visualization displays the commit history of D3 repositories as a streamgraph, where each layer represents a repository and its thickness shows smoothed weekly commit counts. The layer order follows the chronological introduction of each repository, revealing the shift from the monolithic d3 repository to the 4.0 package explosion. The code uses d3.stack with stackOffsetWiggle and stackOrderAppearance, array-blur for smoothing, d3-area-label for labeling, and d3.scaleOrdinal with hcl colors. Data comes from a JSON file of all D3 commits, rendered as SVG paths with hover effects that highlight individual layers.

CCecilia831

97% match

Loading thumbnail…

Fork of D3 Git History Streamgraph

This streamgraph visualizes the commit history of every D3 repository, with each layer representing a package and its thickness showing the smoothed number of commits per week. The layer order follows the first commit date, revealing the shift from the monolithic d3 repository to the 4.0 package explosion. The code uses d3.stack with stackOffsetWiggle and stackOrderAppearance, d3.area for rendering, and d3-area-label for labels. Data comes from a JSON file aggregating all D3 commits, smoothed via array-blur.

PPhilippe Rivière

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

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

94% match

Loading thumbnail…

Fork of D3 Git History Streamgraph

This visualization shows the commit history of the D3.js organization’s GitHub repositories as a streamgraph, with each layer representing a different D3 package and its thickness indicating smoothed weekly commit counts. The layer order reflects when each repository was first created, revealing the monolithic early development of `d3` and the 2014 explosion of packages. Built with D3 v6, it uses `d3.stack` with `stackOffsetWiggle`, `stackOrderAppearance`, `d3.area`, and the `d3-area-label` library, rendering to SVG. Data comes from a JSON file of all D3 commits.

Ccssergio

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

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

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

93% match