SafiMohammed

@SafiMohammed·2 public vizzes

fresh block

A radial tree diagram shows the hierarchical structure of the Flare software library, with each node represented as a small circle and curved links connecting parent and child categories. The layout uses a circular arrangement where the depth of each node determines its distance from the center. Built with D3 v4, the code employs `d3.stratify` to convert the CSV data into a hierarchy and `d3.tree` to compute the radial positions, then renders the visualization as SVG paths and circles. Node labels are rotated to maintain readability along the circular branches.

Oct 28, 2016

Loading thumbnail…

D3 v4 - force layout

This example demonstrates a force-directed graph layout using D3 v4's physical simulation API. The visualization shows 100 labeled nodes connected by random links, with node sizes varying between 8 and 28 pixels. The simulation applies multiple forces—link attraction, collision avoidance, many-body repulsion, and centering—to position the nodes dynamically. Dragging nodes with the mouse temporarily restarts the simulation with higher alpha, allowing interactive manipulation of the network. The code uses `d3.forceSimulation`, `d3.forceLink`, `d3.forceCollide`, `d3.forceManyBody`, and `d3.drag` to render SVG circles and lines, updating positions on each simulation tick.

Oct 27, 2016