LovepritSingh

@LovepritSingh·4 public vizzes

Org Chart

This example shows an organization chart as a force-directed network. It displays rectangular nodes for different systems (such as “CCK.L2.PCS.IntHub”) and grey lines for their reporting relationships. The visualization uses d3.forceSimulation to compute the layout, with forces like d3.forceManyBody, d3.forceLink, and d3.forceCenter. The SVG is rendered using d3.select and d3.append, with node color determined by a numeric code: green for level 5, red for level 2, and blue for level 3.

Feb 27, 2023

Loading thumbnail…

Fork of Org Chart

This example shows a fork of an org chart rendered as a simple force-directed graph of eight circles (labeled A–H) in an SVG container. Initially all nodes start at the center, then `d3.forceSimulation` applies a center force, a positive charge force (`d3.forceManyBody`), and a collision force (`d3.forceCollide`) to separate the circles and distribute them around the 450×450 area. The code uses D3 v7 to append circles, update their positions on each tick, and relies on the simulation’s internal alpha decay to halt movement. Data is hardcoded as dummy objects, and only the "sol" div is active.

Feb 8, 2023

Loading thumbnail…

collapisible

A force-directed network diagram shows nodes as circles connected by links, with a simulation that continuously adjusts their positions. The visualization uses d3.forceSimulation with forceManyBody, forceLink, and forceCenter forces to compute layout dynamics, while d3.select appends SVG circles and lines for rendering. Data comes from a local `data.json` file containing a hierarchical structure with an "SOL" root node, though the example only visualizes the flattened nodes and links arrays. The simulation updates node coordinates on each tick, repositioning the SVG elements accordingly.

Feb 3, 2023

Loading thumbnail…

Force Directoed Graph Template

A force-directed graph template renders three labeled nodes—Alice, Bob, and Carol—connected by two directed links, using D3.js v7’s `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` APIs. The SVG output shows circles positioned dynamically by the simulation’s tick events, with black lines tracing the edges between them. The code selects elements via `d3.select` and binds data to circles and lines, updating their coordinates on each tick. The minimal example demonstrates core force-layout mechanics without labels or interaction.

Feb 3, 2023