Darren Kay

@dkayucf·3 public vizzes

Fork of Fork of Organization Graph Diagram

This interactive graph illustrates the network of connections between the Kenneth Rainin Foundation and its related organizations. Using D3.js v6, it constructs a force-directed layout with `d3.forceSimulation` and applies `forceLink` and `forceManyBody` physics to position nodes. Nodes are sized by hierarchy level (main, child, leaf) and colored by sector from a predefined palette. The data comes from a local `companies.json` file, which is loaded via `d3.json`, and includes company names, sectors, and optional icon URLs. The visualization renders as SVG, with lines representing links and circles for nodes.

Aug 14, 2023

Loading thumbnail…

Force Directed Network Graph

This example shows a force-directed network graph representing companies and the connections between them. It visualizes companies as circular nodes with labels, linked by lines to show relationships. The data is loaded from `companies.json` using `d3.json`. The graph is rendered as an SVG using D3 v6, with the layout computed by `d3.forceSimulation`, which combines `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to position nodes. Node icons and sector information exist in the data but are not displayed in this rendering.

Aug 14, 2023

Loading thumbnail…

Fork of Organization Graph Diagram

This visualization uses a force-directed graph to map organizational connections within the Kenneth Rainin Foundation’s network. Nodes represent main entities, child organizations, and leaf nodes, with links showing relationships between them. The code employs `d3.forceSimulation`, `forceManyBody`, `forceLink`, and `forceCenter` to position elements, while SVG circles, lines, and text render the data. Node colors and sizes are defined in a separate data file, and drag interactions use d3’s `drag` behavior to let users reposition nodes dynamically.

Aug 12, 2023