Skip to main content
SimilarExport ZIP
100%

Blocks Graph

✓ Published0🌍 Public
TThanaporn-sk
Last edited Apr 24, 2017
Created on Apr 24, 2017

This force-directed network visualization maps the relationships between 1,238 bl.ocks posts, using a cleaned subset of Micah Stubbs' README mention data. Nodes represent individual posts, colored by author, and links show which READMEs mention others. The visualization runs in a Canvas context, with d3.forceSimulation handling the physics and d3.drag enabling mouse interaction for repositioning nodes and revealing metadata through hyperlinks.

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

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
91% 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
90% match
Loading thumbnail…

Blocks Graph VI

A force-directed graph of d3.js blocks, where each node represents a block and links show connections between them. Nodes are colored by author, and hovering over a node displays that block's thumbnail image in a tooltip. The visualization uses d3.forceSimulation for layout and renders to a Canvas element via its 2D context. Dragging nodes is supported through d3.drag, and block data is loaded from a JSON file.

PPooky2011
83% match
Loading thumbnail…

Blocks Graph - w/thumbnails

This interactive block graph shows a network of D3 examples, where each node represents a gist and links connect related blocks. The graph is rendered as a Canvas using D3's force simulation (`d3.forceSimulation`) with charge, link, and position forces. Hovering over a node triggers a tooltip that loads and displays the gist’s thumbnail image via `loadTooltipThumb`. The node data comes from `graph.json`, which lists gist IDs, user names, and descriptions. The visualization uses D3 v4 and a WebGL/Cavas approach to handle the dynamic layout and hover interactions.

TThanaporn-sk
79% match
Loading thumbnail…

Blocks Graph - w/thumbnails

This interactive block graph shows a network of D3 examples, where each node represents a gist and links connect related blocks. The graph is rendered as a Canvas using D3's force simulation (`d3.forceSimulation`) with charge, link, and position forces. Hovering over a node triggers a tooltip that loads and displays the gist’s thumbnail image via `loadTooltipThumb`. The node data comes from `graph.json`, which lists gist IDs, user names, and descriptions. The visualization uses D3 v4 and a WebGL/Cavas approach to handle the dynamic layout and hover interactions.

TThanaporn-sk
79% 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
76% 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
74% 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
73% match