tgu007

@tgu007·3 public vizzes

Clustered Network

This interactive visualization displays a clustered network using the Les Misérables character co-occurrence data, grouping nodes into colored convex hulls that represent character communities. Each cluster can be expanded or collapsed, with force-directed layout positioning nodes and links between them. The implementation leverages D3 v2’s force layout, SVG rendering, and custom convex hull path generation, with React managing the interface and smooth animations for cluster expansion and collapse.

Nov 14, 2021

Loading thumbnail…

Untitled

A radial tree diagram displays hierarchical publication data, with publications, authors, affiliations, and addresses as nested nodes. The visualization uses an animated radial layout, transitioning between collapsed and expanded states. Built with D3.js and React, the SVG rendering employs `d3.layout.tree` for node positioning and `d3.svg.diagonal.radial` for curved links. Interactive clicking collapses or expands child nodes, revealing the structured relationships across the dataset.

Nov 14, 2021

Loading thumbnail…

D3 Example

This example demonstrates a basic force-directed network graph with three nodes and two links, rendered as SVG circles. The visualization uses `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` forces to position the nodes, while a tick event updates each circle’s `cx` attribute based on the simulated x-coordinates. The code defines nodes and links as static arrays, with positions calculated entirely by the physics simulation. The example relies on D3 v6 and selects an SVG container by ID, but the script tag references a missing `bundle.js` file, so the simulation may not execute in practice.

Nov 14, 2021