Edge creation

100%

✓ Published0🌍 Public

Last edited Nov 24, 2015

Created on Nov 22, 2015

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.

AI-generated description

A force directed graph visualization of blocks published on bl.ocks.org. The links in the graph are derived from links from README files of blocks to other blocks. Derived from original work by Micah Stubbs found at github.com/micahstubbs/readme-vis

Each circle is a link to the block it represents on bl.ocks.org, so try clicking on the circles!

forked from <a href='http://bl.ocks.org/curran/'>curran</a>'s block: <a href='http://bl.ocks.org/curran/1da93bab4cdc708f41ae'>Blocks Graph</a>

<div align="center"><a href="http://www.simplehitcounter.com" target="_blank"><img src="http://simplehitcounter.com/hit.php?uid=1980877&f=16777215&b=0" border="0" height="18" width="83" alt="web counter"></a></div>

Similar vizzes

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

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

91% match

Loading thumbnail…

Edge creation

This interactive network visualization demonstrates edge creation through drag-and-drop. Users drag a node onto another node to create a new link, with a background circle lighting up to indicate proximity. The visualization uses circular nodes, making connection detection straightforward by measuring center-to-center distances. After new links are formed, community structure is recalculated using the jLouvain algorithm, with nodes colored by module and border styles indicating inter- or intra-community connections. The dataset represents relationships between healthcare entities like patient demographics, providers, and encounters, rendered as an SVG force-directed graph with D3 v3.

663anp3ca

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

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

76% match

Loading thumbnail…

Edge labeling

This example demonstrates edge labeling in a network visualization built with D3 v6, showing nodes connected by curved vertical paths with labels that orient along link direction. The code defines a network of server and device nodes with fixed coordinates, rendered as SVG elements using custom icon glyphs from Font Awesome. Links are drawn with `d3.linkVertical()` paths and labeled dynamically based on connection type, with forces applied via `forceStrength` and `linkStrength` constants to adjust layout. The visualization includes tooltips on hover and highlights forward versus reverse traffic flow between nodes.

FFereidoun Mianji

73% match

Loading thumbnail…

Gist b287c640477b69e13e008ebfa52e8a86

This example shows a network graph of Linux-related articles and links, with nodes representing individual web pages and edges connecting them by shared references. The visualization uses a force-directed layout via `d3.forceSimulation` to position nodes, while the SVG rendering relies on standard D3 selections and `d3.forceLink` for edge constraints. Node color and size encode the source domain (opensource.com versus rootsudo.wordpress.com) and degree, respectively. The graph updates dynamically as the simulation runs, with drag interaction enabled through `d3.drag` for repositioning nodes.

MMistyBlunch

72% match

Loading thumbnail…

Gist 05ff2219cb2cc463ad1612e8a501c400

This visualization uses a force-directed simulation to show a network of interconnected nodes, with each node represented as a colored circle and links drawn between related points. The code relies on `d3.forceSimulation` and `d3.forceLink` to compute the layout, while `d3.drag` enables user interaction to move nodes. A canvas element renders the graph, with the simulation updating positions each tick. The data appears to be a small custom-generated dataset of nodes and edges, with node colors mapping to distinct groups, and the visualization does not include any external data source or geographic rendering.

MMistyBlunch

72% match