Skip to main content
SimilarExport ZIP
100%

D3 Git History Streamgraph v3

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

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.

AI-generated description

This is an experiment in visualizing D3 Git History.

ISC Licensed

Similar vizzes

Loading thumbnail…

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.

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

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.

CCurran Kelleher
90% match
Loading thumbnail…

Fork of D3 Git History Streamgraph

This streamgraph visualizes the commit history of the D3.js project across its many repositories from 2010 to 2021. Each colored layer represents a single D3 package, with thickness showing the number of commits per week, smoothed using `array-blur` and ordered chronologically by each repository’s first commit. The visualization uses `d3.stack` with `stackOffsetWiggle` and `stackOrderAppearance`, an SVG `area` generator, and `d3-area-label` for labels, rendering with `d3.axisTop` and `d3.axisBottom`. Data comes from a JSON file of all D3 commits, with layers hyperlinked to their respective GitHub repositories.

TTilamenceFeng
90% match