Skip to main content
Log in
C

Claire Ahn

@syclaire·3 public vizzes

Loading thumbnail…

Untitled

This visualization shows the financial ecosystem of the U.S. prison system, mapping how government entities connect to private companies across sectors like healthcare, telecommunications, and construction. A circular dendrogram layout positions 76 nodes around the perimeter, with bundled radial links tracing relationships between entities. The code uses `d3.cluster` and `d3.radialLine` with `curveBundle` to draw the hierarchical connections. Hovering over a node highlights its direct connections in red and green, emphasizing source and target relationships. The data comes from a local `prisons.json` file containing nodes and links between government agencies and private corporations.

Oct 22, 2021
Loading thumbnail…

Untitled

This visualization displays the dependency structure of the Flare class hierarchy as a radial dendrogram. The code uses D3 v4's `d3.cluster` layout and `d3.radialLine` with a curve bundle to draw curved paths between connected classes, with node labels around the perimeter. When hovering over a class, its source and target dependencies are highlighted in red and green, respectively, with the associated links thickened. The data comes from the `flare.json` file containing class names, sizes, and imports, rendered as SVG text and paths.

Oct 22, 2021
Loading thumbnail…

D3 page template

This example presents a hierarchical edge bundling visualization of the Flare software package’s import relationships, rendered as an SVG inside a React framework. It uses D3 v4’s `d3.cluster` and `d3.radialLine` with `curveBundle` to draw curved links around a circular layout. Nodes are labeled with text elements rotated along the radius, while imports from the `flare.json` data file are mapped into paths between leaves. The code follows a bare-minimum HTML page template with inline CSS and JavaScript.

Oct 22, 2021