Skip to main content
SimilarExport ZIP
100%

D3 Git History Streamgraph v2

✓ Published1🌍 Public
CCurran Kelleher
Last edited Apr 23, 2021
Created on Apr 23, 2021

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.

AI-generated description

This is an experiment in visualizing D3 Git History.

ISC Licensed

Similar vizzes

Loading thumbnail…

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.

CCurran Kelleher
96% match
Loading thumbnail…

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.

CCurran Kelleher
95% 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
93% 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
91% match
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
90% match
Loading thumbnail…

D3 Git History Streamgraph

This visualization shows the commit history of the D3.js project as a streamgraph, revealing patterns of development activity across different repositories over time. The chart displays stacked colored areas, with each color representing a different repository and the vertical thickness indicating monthly commit counts. Built using D3.js version 6.5.0 within a React application, the code leverages d3’s `json`, `scaleTime`, `scaleLinear`, `area`, and `stack` APIs to transform and render the data. The SVG output is generated from aggregated monthly commit data grouped by repository, with colors randomly assigned to each area.

CCurran Kelleher
90% 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
90% 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
89% match