Skip to main content
Log in
H

Hariharan1828

@Hariharan1828·4 public vizzes

Loading thumbnail…

instructor version

This visualization displays a force-directed network graph of employee connections, with labeled nodes representing team members and links showing relationships such as "Worked together in the past" or "Referred to Join". It uses `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` to position nodes, with circles and images rendered in SVG. Node colors encode project membership via predefined palettes, while text labels and drag-and-drop interaction via `d3.drag` enhance exploration. Data comes from static `team_data.js` and `colors.js` modules.

Jun 22, 2023
Loading thumbnail…

Fork of Fork of Organization Graph Diagram dupe

A force-directed graph visualizes the network of connections between organizations funded by the Kenneth Rainin Foundation, with colored nodes and links representing four main program areas and their sub-organizations. The simulation uses d3.forceSimulation with forceManyBody, forceLink, and forceCenter to position nodes, while drag interaction lets users manually reposition them. Rendered as SVG circles and lines, the graph encodes node size by hierarchy level—main nodes are largest, followed by child nodes and small leaf nodes with unlabeled IDs. Data is defined programmatically in data.js, with colors generated from a predefined palette.

Jun 12, 2023
Loading thumbnail…

Unislink Network

This example demonstrates a small, three-node network graph using D3’s force-directed simulation. It shows two links connecting Alice to Bob and Bob to Carol, with nodes positioned through a combination of many-body repulsion, link attraction, and centering forces. The code initializes the simulation with `d3.forceSimulation`, then applies `d3.forceManyBody`, `d3.forceLink`, and `d3.forceCenter` to compute the layout, logging a message on each tick to confirm the simulation is running. The nodes and links are defined as plain JavaScript arrays.

Jun 12, 2023
Loading thumbnail…

Unislink Network

This example demonstrates a minimal force-directed network layout with three named nodes and two links, showing how nodes naturally position themselves under simulated physical forces. Using the D3.js library, it initializes a `d3.forceSimulation` object with the node and link data, then applies three forces: `d3.forceManyBody()` for repulsion between all nodes, `d3.forceLink()` to pull connected nodes together, and `d3.forceCenter()` to keep the group anchored. The setup code defines the simulation but does not render the result to the screen.

Jun 12, 2023