D3 Git History Streamgraph

D3 Git History Streamgraph v3

This visualization displays the commit history of the D3.js repository as a streamgraph, with each colored layer representing a different repository or subproject. The graph uses weekly aggregated commit counts, smoothed with a blur filter, and arranged using a wiggle offset to minimize visual overlap. Built with D3 v6 and the `d3-area-label` library, it renders as SVG with an interactive hover effect that highlights areas by turning them black. The data comes from a JSON file of all D3 commits, and the streamgraph is scaled to fill the entire browser window.

93% match

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.

90% match

D3 Git History Streamgraph v2

This visualization shows the evolution of D3 repository commits over time as a streamgraph, with each colored area representing a different repository and its width reflecting smoothed commit counts. The code loads JSON commit data, aggregates it by week and repository, and applies Gaussian blur smoothing via the `array-blur` library. It then uses D3's `stack` with `stackOffsetWiggle` and `stackOrderInsideOut` to generate the streamgraph layout, rendered as SVG paths with `areaGenerator`. The `d3-area-label` library positions labels within each stream, while hover interactions turn areas black.

90% match

D3 Git History Streamgraph v1

This streamgraph visualizes the weekly commit history across D3.js repositories, with each colored area representing a repository’s smoothed commit counts over time. Using D3 v6, it loads JSON data, aggregates commits by UTC week and repository, applies Gaussian blur via `array-blur`, and stacks the series with `stackOffsetWiggle`. The SVG rendering uses `area` generators, `scaleTime`, and `scaleLinear`, while `d3-area-label` positions repository names. Hovering an area turns it black, and each area includes a tooltip title showing the repository name.

89% match

D3 Git History Streamgraph by Author

This visualization shows the development history of the D3.js repository as a streamgraph, where each colored layer represents a contributor with three or more commits, and layer thickness indicates weekly commit counts with blur-based smoothing. The code uses `d3.stack` with `stackOffsetWiggle` and `stackOrderAppearance` to order layers chronologically by first commit, while `d3.areaLabel` positions author names. Data comes from a JSON file of all D3 commits, rendered as SVG paths with `d3.area`, and filtered to 71 authors to avoid performance issues with over 294 total contributors.

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.

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

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