SiteBulb Graph

100%

SiteBulb Graph

✓ Published2🌍 Public

Last edited Jan 9, 2024

Created on Jan 8, 2024

Forked from Fork of Organization Graph Diagram

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.

AI-generated description

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

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of SiteBulb Graph

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.

KKamran Nawaz

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

81% match

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

78% match

Loading thumbnail…

Fork of Organization Graph Diagram

A force-directed graph diagram maps connections within the Kenneth Rainin Foundation network, using colored nodes and links to show relationships between a central hub and numerous child nodes representing Hulu-related URLs. Built with D3 v6's `forceSimulation`, the visualization applies `forceManyBody` charge, `forceLink` distance constraints, and `forceCenter` attraction to position elements, while supporting drag interactions. Nodes are rendered as SVG circles with distinct sizes and colors defined in a separate palette, with the data structured through helper functions that assemble parent-child leaf clusters.

AAbdul Majeed

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

73% match

Loading thumbnail…

Network Graph

A network graph displays 49 nodes organized around five central hubs, with connecting links forming a clustered hierarchy. The visualization uses D3 v5’s `d3.forceSimulation` with charge, link, and collision forces to position nodes, which are rendered dynamically on a Canvas via `getContext('2d')`. Node colors and radii are assigned programmatically, and drag interaction is enabled through D3’s drag behavior. Data comes from a local CSV file, and the underlying simulation and rendering are orchestrated by a custom `relation` class.

PPulkit Rohilla

70% match

Loading thumbnail…

Fork of Fork of graph

This graph visualization shows the relationships between streaming platforms and their original shows, with Netflix and Hulu as platform nodes connected to their respective series. The force-directed layout uses d3.forceSimulation with link, charge, and center forces to position nodes dynamically, while SVG lines and circles represent links and nodes, colored by group. The code binds node labels directly and updates positions on each simulation tick, creating an interactive-looking network diagram rendered entirely in SVG.

Nnishanththouta16@gmail.com

70% match

Loading thumbnail…

Network Graph

This example visualizes a social network as an interactive force-directed graph using D3.js. The SVG renders circular nodes labeled with person names and blue directed links with arrowheads, showing friendship connections weighted by a numeric value. The layout relies on `d3.forceSimulation` with `forceLink`, `forceManyBody`, `forceCollide`, and `forceCenter` to position the nodes. Nodes are draggable via `d3.drag`, and hovering highlights a node by adding a CSS class. Data comes from the local `graph.json` file.

Ssuryavamsi00024

69% match