Example Authors

100%

Example Authors

✓ Published0🌍 Public

Last edited Feb 26, 2019

Created on May 1, 2016

This example visualizes the contributions of authors to bl.ocks.org, a platform for sharing D3 code blocks. The data is shown as a circular bubble chart, where the size of each leaf node represents the number of blocks by that author, and hover highlights the hierarchy path. The visualization uses D3 v4’s `d3.pack` layout to compute the circle positions and sizes, with SVG circles, text, and clip paths for labels, and `d3.hierarchy` to structure the JSON data. The data is a handcrafted `authors.json` file, and the code reads it via `d3.json`.

AI-generated description

Source: Stewart Noyce, Christophe Viau.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Example Authors

This example uses a circle-packing layout to display the hierarchical structure of authors aggregated by their domains, with each author's circle size proportional to their number of contributions. The visualization, built with D3 v4 and rendered as SVG, employs the `d3.pack` API to compute the circle positions and sizes based on the hierarchical JSON data. Interactive hover states highlight the ancestors of the hovered node by applying a CSS class, while leaf nodes show truncated text labels using `clipPath` elements.

FFrissAnalytics

83% match

Loading thumbnail…

Blocks Graph

The visualization shows a force-directed network of 1,238 bl.ocks examples, with nodes representing individual gists colored by author and links indicating mentions between README files. The network layout is computed using `d3.forceSimulation` with many-body charge, link, and position forces, and rendered directly to a Canvas `getContext("2d")` surface. Nodes are drawn as small circles with a 3-pixel radius, and hovering reveals a link to the original bl.ock, while dragging interactively repositions nodes. The data is a cleaned subset of Micah Stubb’s May 2016 dataset, filtered to remove missing and redundant entries.

Mmbostock

74% match

Loading thumbnail…

D3 Bar Chart

This bar chart displays the number of contributions per author from a local CSV file, with values multiplied by 1,000 for scaling. The visualization uses D3 v5 to load the data, apply a linear scale for the x-axis and a band scale for the y-axis, and render steel-blue bars in an SVG. Axes are added using `axisLeft` and `axisBottom`, while styling is handled through an external stylesheet.

MMJR1997

74% match

Loading thumbnail…

Bar Chart

This bar chart displays the number of contributions made by each author, sourced from a CSV file. The chart renders as steelblue rectangles via SVG. The code uses d3’s `select`, `csv`, `scaleLinear`, and `max` functions to load the data and map the maximum contribution count to the scale’s domain, though the current implementation sets a fixed rectangle size rather than scaling the bars to their data values.

MMJR1997

72% match

Loading thumbnail…

Blocks Graph

This visualization displays a force-directed network of mentions among bl.ocks examples. Each node represents a block, colored by its author, and links show when one block's README references another. The graph is rendered on a Canvas using d3.forceSimulation with forces for many-body repulsion, link attraction, and positioning, and supports interactive dragging and hover to reveal block details. It uses cleaned data from Micah Stubb’s original 2016 dataset.

FFrissAnalytics

72% 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

71% match

Loading thumbnail…

Fork of A Visual History of Stamen Open Source Contributors

This visualization presents a streamgraph of commit activity from the top 100 contributors to Stamen’s open source repositories, with each colored layer representing an individual author and its thickness reflecting weekly commit counts after smoothing via `array-blur`. Layer order follows the timing of first commits, so reading from bottom to top reveals the sequence of contributor involvement. Built with React and D3, it uses `d3.stack` with `stackOffsetWiggle`, `d3.area`, and `d3-area-label` for labels, rendering as SVG from JSON data loaded via `d3.json`.

SShane Gibney

70% match

Loading thumbnail…

Fork of A Visual History of Stamen Open Source Contributors

This example visualizes the commit activity of the top 100 contributors to Stamen’s open source repositories, using a modified streamgraph where layer order reflects the timing of each contributor’s first commit. It uses D3 v6 with `d3.stack`, `stackOffsetWiggle`, and `stackOrderInsideOut` to build the layered chart, and applies smoothing via the `array-blur` library. Each layer’s thickness encodes commits per week, with repository names as labeled anchors. Data comes from a JSON file of all commits, rendered as SVG with hover interactions highlighting individual layers.

777tinna

70% match