Sputniza

@Sputniza·3 public vizzes

Force Layout Example 1

This example demonstrates a minimal force-directed graph with five nodes and four links arranged in a branching structure, rendered as circles and lines in an SVG container. The code uses the D3.js v3 `d3.layout.force()` API to simulate the layout, with node positions and link distances updated after the simulation ends. It defines dimensions of 640x480 pixels, adds nodes and links as SVG elements before applying the force simulation, and sets a link distance based on half the canvas width. The visualization shows the basic mechanics of force layout without additional interaction or styling beyond grayscale fills.

Aug 5, 2016

Loading thumbnail…

Force-Directed Tree

A force-directed tree visualizes a small hierarchical dataset of D3 module names as circles connected by lines. The graph is loaded from a local `graph.json` file containing nodes and links, and rendered to SVG using D3 v3’s `d3.layout.force` with a negative charge and link distance. During each tick, source nodes are pushed upward and target nodes downward to create a weak tree structure, while node colors come from a categorical `d3.scale.category20` fill. Circle radii are fixed, and strokes use a darker shade of the same fill.

Aug 5, 2016

Loading thumbnail…

Force-Directed Tree

A randomly generated tree of 1,000 nodes is laid out using D3’s `d3.forceSimulation` with charge, link, and centering forces, and rendered on a Canvas 2D context. The links connect each node to its parent based on a square-root index mapping. The code includes drag interaction via `d3.drag`, allowing users to pin and move nodes. The visualization updates on each simulation tick, redrawing nodes as small circles and links as gray lines on a 960×960 canvas.

Aug 5, 2016