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
68% match