M.Saleh Tibi

@aSalehTibi·2 public vizzes

Dracola

This example uses the JavaScript graph library Graphdracula to render a small network diagram. It creates a graph with two explicit nodes, “strawberry” and “cherry,” and an edge between them that implicitly adds the source node. A Spring layout algorithm positions the nodes, and the Raphael renderer draws the result onto an SVG canvas within an 800-by-800 pixel container. The page loads Graphdracula from a CDN and runs the layout and rendering code inside the `index.js` script.

May 18, 2022

Loading thumbnail…

Fork of Fork of ICE8 - Social Network Graph

This example visualizes a small social network as a force-directed graph, showing eight people as red circular nodes and their “Friend with” relationships as directed, arrow-headed lines. Node labels display each person’s name. The layout is computed with d3.forceSimulation, combining d3.forceLink, d3.forceManyBody, d3.forceCollide, and d3.forceCenter to manage link distances, repulsion, collision, and centering. Users can drag nodes via d3.drag, and hovering triggers a focusNode/ blurNode interaction that changes the node stroke to green. Data is loaded from a JSON file using d3.json.

May 10, 2022