Max Davydenko

@maxdavydenkouo·4 public vizzes

ZTLCSTN

This example visualizes a graph dataset with force-directed layout, rendering nodes as circles with labels and links as connecting lines within an SVG canvas. It uses D3.js v6 with the `d3.forceSimulation` API for physics-based positioning, incorporating forces like link attraction, many-body repulsion, and centering, while enabling interactive drag and zoom through `d3.drag` and `d3.zoom` behaviors. The graph data is prepared by mapping coordinate fields, filtering inactive or broken links, and then animated in real-time as the simulation ticks update node and link positions.

May 23, 2023

Loading thumbnail…

Untitled

Three colored nodes with no initial connections are added to a force-directed network through a repeated cycle of adding, removing, and re-adding links. The simulation, restarted via `simulation.alpha(1).restart()`, updates the node positions on each tick. The code uses `d3.forceSimulation`, `d3.forceManyBody`, `d3.forceLink`, and `d3.forceX`/`d3.forceY`, with the general update pattern applied to both circles and lines rendered in SVG.

May 23, 2023

Loading thumbnail…

Broken organizations graph network fork

This example shows a force-directed graph network of organizations, where nodes are colored circles connected by lines and sized by importance. The visualization uses D3 v6 with the `forceSimulation`, `forceManyBody`, `forceLink`, and `forceCenter` APIs to compute the layout physics, and the `drag` interaction allows nodes to be repositioned. Circle positions and link coordinates update on each simulation tick, and the data appears to be loaded from static node and link arrays generated from a local source.

May 21, 2023

Loading thumbnail…

Graph network reference

A force-directed graph shows the network of organizations connected to the Kenneth Rainin Foundation, with four main nodes branching into smaller child nodes and leaf nodes. The visualization uses `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` to position elements, rendered as SVG circles and lines with labels. Dragging nodes via the `drag` interaction updates their fixed positions. Node colors are sourced from a palette in `colors.js`, and link distances vary by hierarchy level.

May 21, 2023