Kamran Nawaz

@kamrannawaz·2 public vizzes

Forced Network Graph

This example demonstrates a basic forcedirected network graph with three test nodes and two links. The code uses d3.forceSimulation with forceManyBody, forceLink, and forceCenter to calculate node positions, rendering the result as SVG circles inside a fixed 960x960 viewport. On each simulation tick, the `x` and `y` coordinates update the circle attributes, creating continuous positioning. The data is hardcoded in the JavaScript, and the visualization relies on D3 v6’s simulation API without additional user interaction or styling.

Jan 9, 2024

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.

Jan 9, 2024