Skip to main content
SimilarExport ZIP
100%

Streamgraph Layout with No Smoothing

✓ Published0🌍 Public
CCurran Kelleher
Last edited Apr 30, 2021
Created on Apr 30, 2021

This visualization shows the evolution of D3.js git commit activity across multiple repositories over time, displayed as a streamgraph with sharp, unsmoothed edges. The stacked area chart uses d3.stack with stackOffsetWiggle and stackOrderInsideOut to layer weekly commit counts per repository. Curves are rendered as SVG paths generated by d3.area, with labels positioned using d3-area-label. The code loads commit data from a GitHub Gist, aggregates it by week and repository, and applies random RGB fills to each layer, with a CSS hover effect turning areas black.

AI-generated description

This is an experiment in visualizing D3 Git History.

ISC Licensed

Similar vizzes

Loading thumbnail…

Streamgraph Layout with Light Smoothing

This example visualizes the commit history of the D3.js repository as a streamgraph, where each stream represents a different repository and the vertical thickness shows the smoothed number of weekly commits. The layout uses a wiggle offset and inside-out stacking to minimize visual distortion. Data is loaded from a JSON file, aggregated by week, and smoothed using `array-blur`. The visualization is rendered as SVG using D3's `area` generator for paths and `d3-area-label` for labels.

CCurran Kelleher
91% 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
89% match
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
88% 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
86% 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
85% 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
84% match
Loading thumbnail…

Fork of Fork of D3 Git History Streamgraph

This streamgraph visualizes commit activity across D3 repositories, with layer thickness representing smoothed weekly commit counts and vertical order reflecting each repository’s introduction date. It reveals the monolithic early development, the 4.0 package explosion in 2014, and later concentrated work on d3-delaunay. Built with D3 v6, it loads JSON data of all D3 commits, applies array-blur smoothing, and uses d3.stack, stackOffsetWiggle, and stackOrderAppearance to generate layered areas, with d3-area-label positioning labels. An SVG envelope backdrop and interactive hover effects highlight repository layers.

Ccssergio
84% 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
83% match