screenshot-commits

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.

64% match

a set of scripts to pull the git history from the d3 git repositories

This example provides a set of Node.js scripts that extract and consolidate commit history from the D3 GitHub repositories. The scripts clone each repository, use `git log` to output commit data with custom delimiters, parse that text into JSON, and combine results into a single `all-d3-commits.json` file containing author, date, and repository name for each commit. The data is sourced from D3’s package.json dependencies and can be used to visualize contributor activity over time.

63% match

Productising Git History Streamgraph

This streamgraph visualizes the commit history of the D3 repository ecosystem, with each layered area representing a separate D3 package and its thickness showing the smoothed number of commits per week. The layer order is determined by each package’s first commit date, revealing the initial monolithic development and later explosion of packages around the 4.0 release. The code uses `d3.stack` with `stackOffsetWiggle`, `d3.area`, and `d3.scaleTime` to render the SVG, alongside the `d3-area-label` library for labels and `array-blur` for data smoothing. Source data comes from a JSON file of all D3 commits.

KKamalabot

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.

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.

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

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.

61% match