Blocks Graph

100%

✓ Published0🌍 Public

Last edited May 31, 2018

Created on May 31, 2018

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.

AI-generated description

This shows the force-directed network of mentions in the READMEs of various bl.ocks. I cleaned Micah Stubb’s data from May 2016 slightly: I removed missing nodes, solitary nodes, self-links, and redundant links. The original dataset contains 2,101 nodes and 8,617 links, and is 1.2 MB. The cleaned dataset contains 1,238 nodes and 2,602 links, and is 281 KB.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/afecf1ce04644ad9036ca146d2084895'>Blocks Graph</a>

gpl-3.0 Licensed

Similar vizzes

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

93% match

Loading thumbnail…

Edge creation

This visualization shows a force-directed network of blocks from bl.ocks.org, where nodes represent individual blocks and edges are derived from README links between them. Using d3.v3, the graph is rendered as an SVG with nodes colored by community structure detected via the Louvain algorithm (jLouvain), with border highlights on nodes and edges that bridge different modules. The force layout uses tuned parameters like charge, link distance, and gravity to create a dense, tightly clustered view of the block ecosystem. Node size is fixed at a small radius, and edge width is uniform, emphasizing the community structure and connectivity patterns over individual attributes. The visualization was built by Curran and adapted from original work by Micah Stubbs, with data sourced from a gist and rendered entirely with D3's SVG capabilities.# Edge Creation This force-directed graph visualization maps the network of blocks published on bl.ocks.org, with connections derived from README file references between blocks. ## Visual Design The visualization displays nodes as small circles (2px radius) colored using a categorical color scale based on Louvain community detection results. Each node represents a block, with edges showing README-based links between blocks. Nodes are colored by community membership, with border highlighting distinguishing nodes that bridge multiple communities. ## Interaction The graph is interactive, supporting drag-and-drop of nodes. The force-directed layout uses charge, link strength, link distance, and gravity parameters to position nodes. Community detection is computed in the browser using the jLouvain algorithm, with border nodes and edges identified through modularity census analysis. ## Key features - **Community detection:** Louvain algorithm groups related blocks into color-coded communities - **Force-directed layout:** Nodes and edges respond to physics simulation with configurable charge, link distance, and gravity - **Modularity census:** Border nodes and edges highlighted with thicker strokes to show community structure - **Interactive:** Nodes can be dragged and repositioned by the user The visualization was created by Curran and is part of a gallery piece that demonstrates community detection on a network of code blocks from bl.ocks.org, where edges represent README references between blocks. This is a dynamic network visualization using D3's force layout, showing how community detection algorithms can be applied to a network of linked code blocks. The graph is colored by community structure, with border edges and nodes highlighted to show connections between different communities. </script> </body> </html># Edge creation A force-directed graph visualization of blocks published on bl.ocks.org, where nodes represent individual blocks and links are derived from README file references between blocks. The graph applies the Louvain community detection algorithm (via jsLouvain.js) to color-code modular communities, with nodes assigned colors from a categorical scale based on their detected community membership. The visualization highlights inter-community connections through a modularity census: edges linking different communities and nodes at community borders are visually distinguished with stronger strokes. Node positions are computed using D3's force layout with tuned parameters (charge -200, link distance 3, link strength 3, gravity 0.1) to create a tight, clustered layout. Small circles (2px radius) represent blocks, colored by community, while gray lines represent links derived from README references between blocks. The graph supports drag interactions, allowing exploration of the network structure and community boundaries.

CCurran Kelleher

79% match

Loading thumbnail…

block wall

A wall of small multiples, each representing a single D3 block from the bl.ocksplorer.org corpus. The visualization uses a force-directed layout to arrange thumbnail images of thousands of gists, where each block is positioned based on similarity—derived from data in the block-similarity file—and rendered as a webGL point cloud with an SVG overlay for hover interactions. Users can pan and zoom to explore the structure of the block universe, with colors or positions encoding clusters of related visualizations and authored work.

CCBasis

77% match

Loading thumbnail…

Edge creation

This visualization uses a force-directed graph to show connections between blocks published on bl.ocks.org, derived from links in README files. Each node is a clickable circle linking to its corresponding block, with the graph’s edges representing README-derived references between blocks. The network is constructed by parsing the edges from the underlying JSON data and building a node-link structure. Community detection using the Louvain algorithm (via the `jsLouvain.js` library) is applied, and nodes are colored by their detected module using a categorical color scale. Edges that connect nodes from different modules are highlighted with a thicker stroke, and nodes that have edges to multiple modules also receive a border. Force-directed layout positions the nodes, while edge and node groups are created with D3’s data joins. Clicking a circle navigates to the corresponding bl.ocks.org page.

CCurran Kelleher

76% match

Loading thumbnail…

fresh block

This example visualizes a network of interconnected nodes, likely representing user connections or data relationships, using a force-directed layout. The visualization employs D3’s `d3.forceSimulation` to compute the physics of node positions and link forces, while `d3.select` and SVG elements handle rendering. The scene is drawn against a dark background, with nodes as circles and links as lines, suggesting a real-time or interactive graph. The code also integrates a canvas-based `getImageData` operation, possibly for pixel-level effects or hit detection, though the primary display relies on SVG. Data appears to originate from a static gist, emphasizing structure over live data feeds.

BBolitto

75% match

Loading thumbnail…

Edge creation

This visualization displays the edge structure of a network graph derived from README file links between blocks on bl.ocks.org, with nodes omitted to highlight connectivity. The force-directed layout uses thin black links sized by edge weight, and applies Louvain community detection to color-code and analyze modular structure. Rendered in SVG with D3.js v3, the graph demonstrates how community boundaries emerge from edge patterns alone.

CCurran Kelleher

72% match

Loading thumbnail…

Example Authors

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`.

Mmbostock

72% match

Loading thumbnail…

Force-Graph

This interactive force-directed graph visualizes the network of game assets, with nodes representing individual files and links showing connections between them. The visualization uses a physics simulation to position nodes, balancing link forces, many-body repulsion, and centering forces. Built with d3.forceSimulation, d3.forceLink, and d3.forceManyBody, the SVG rendering updates each tick to reflect the evolving layout. Users can drag nodes, which temporarily reactivates the simulation to reposition the graph, with node colors assigned via a categorical color scheme.

LLo-ov

71% match