Fork of SiteBulb Graph

100%

Fork of SiteBulb Graph

✓ Published1🌍 Public

Last edited Jan 9, 2024

Created on Jan 9, 2024

This example visualizes a site graph for ScreenBinge, showing a main hub node connected to multiple child nodes, each with a cluster of small leaf nodes. The data structure is programmatically built in the `data.js` file, assigning sizes and colors to nodes from a palette, with links defined between connected nodes. It uses D3 v6’s `forceSimulation`, `forceManyBody`, `forceLink`, and `forceCenter` to run a physics-based layout, while the `drag` and `zoom` interactions let users reposition nodes and pan the SVG view.

AI-generated description

A graph diagram representing the network of connections of the Kenneth Rainin Foundation.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of SiteBulb Graph

A force-directed graph maps the network of connections from the Kenneth Rainin Foundation's website, using node size to distinguish main hub nodes from child and leaf nodes. Built with D3 v6, the visualization uses `d3.forceSimulation`, `forceManyBody`, `forceLink`, and `forceCenter` to position elements, while `d3.drag` and `d3.zoom` enable interaction. Node colors are defined in an exported palette from `colors.js`, and all SVG elements render in an HTML page.

DDonald Bagwell

89% match

Loading thumbnail…

Fork of SiteBulb Graph

This force-directed graph visualizes the network of connections from the Kenneth Rainin Foundation, with main nodes, child nodes, and leaf nodes sized and colored by hierarchy. Using D3.js v6, it employs `forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` to position nodes, while SVG `circle` and `line` elements render the structure. The graph supports dragging, zooming, and hover tooltips, with data generated from a `colors.js` palette and explicit node/link definitions.

AAbdul Majeed

88% match

Loading thumbnail…

SiteBulb Graph

This graph diagram visualizes the network of connections among pages on the ScreenBinge website, centered on the main domain and its Hulu-related subpages. Using D3.js v6, the visualization applies a force-directed layout with `d3.forceSimulation` and `d3.forceManyBody` to position nodes, while `d3.forceLink` and `d3.forceCenter` manage edge distances and centering. Nodes are rendered as SVG circles with sizes indicating hierarchy—larger nodes represent main pages, smaller ones child pages, and tiny leaves for individual links. The graph is interactive, allowing users to click nodes to add new connections dynamically.

AAbdul Majeed

84% match

Loading thumbnail…

Network Graph

This network graph visualizes hierarchical relationships between main nodes, child nodes, and leaf nodes using a force-directed layout. The d3.forceSimulation API with forceManyBody, forceLink, and forceCenter forces positions nodes and links, while SVG circles and lines render the graph. Node size encodes hierarchy level, and colors distinguish four main site clusters. Users can drag circles to reposition nodes, with drag interaction restarting the simulation. The data.js file programmatically defines nodes and links, including parent-child connections and inter-site links.

Mmiloparra

79% match

Loading thumbnail…

Fork of Organization Graph Diagram22

This example shows an organization graph as a force-directed network of nodes and links, with main nodes connected by thick links and child nodes surrounded by leaf nodes. The data is generated programmatically in `data.js` with hierarchical structures like `APP-021` and `Community Arts Stabilization Trust`. It uses `d3.forceSimulation` with `forceManyBody` and `forceLink` to compute layout, and renders SVG circles, lines, and text. Node colors come from a predefined palette in `colors.js`, and drag interaction is enabled via `d3.drag`.

JJacob Pingel Lauridsen

78% match

Loading thumbnail…

Fork of Network Graph

This example shows a small network of six named nodes connected by weighted links, displayed as an SVG force-directed graph. The visualization uses D3 v4 with the legacy `d3.layout.force` API to simulate physical forces that position nodes and draw straight lines between them. Node labels and circles are rendered via SVG groups, with link stroke widths scaled by the square root of the link weight, and the data is loaded from a local `data.json` file.

Bbhargavarathod

78% match

Loading thumbnail…

Fork of Network Graph

Four labeled nodes form a small network of three connected links, rendered in SVG and fully interactive through mouse dragging. The graph uses `d3.forceSimulation` with link, charge, and center forces to position nodes, while a `d3.drag` handler lets users move nodes and update their fixed positions. Elements are drawn with D3 selections, appending `line` and `g` elements whose coordinates are updated on each simulation tick. The code relies on D3 v7's `forceLink` and `forceManyBody` APIs, with text labels placed relative to each node.

KKhanin Sisaengsuwanchai

77% match

Loading thumbnail…

Fork of Force Directed Graph Starter

This example demonstrates a simple force-directed graph visualization using D3.js. It shows three circular nodes connected by two links, representing a small network of relationships. The layout uses d3.forceSimulation with forceManyBody, forceLink, and forceCenter to position the nodes dynamically. Data is loaded from a CSV file containing movie information, though the current implementation focuses on the basic graph structure. The visualization renders using SVG elements, with circles for nodes and lines for links, updating their positions on each simulation tick.

KKyle?

77% match