Force-Directed Graph

100%

Force-Directed Graph

✓ Published0🌍 Public

Last edited Dec 26, 2016

Created on Dec 26, 2016

This force-directed graph visualizes character co-occurrence in Victor Hugo’s *Les Misérables*, using a physical simulation to place related characters closer together and unrelated ones farther apart. The code employs D3 v4’s `d3.forceSimulation` with link, charge, and centering forces, rendering nodes as SVG circles colored by group via `d3.scaleOrdinal` and edges as lines. Data comes from a JSON file (initially compiled by Donald Knuth), and the graph is interactive, allowing nodes to be dragged and repositioned.

AI-generated description

This simple force-directed graph shows character co-occurence in Les Misérables. A physical simulation of charged particles and springs places related characters in closer proximity, while unrelated characters are farther apart. Layout algorithm inspired by Tim Dwyer and Thomas Jakobsen. Data based on character coappearence in Victor Hugo's Les Misérables, compiled by Donald Knuth.

Compare this display to a force layout with curved links, a force layout with fisheye distortion and a matrix diagram.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/4062045'>Force-Directed Graph</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Force-Directed Graph

This force-directed graph visualizes character co-occurrence in Victor Hugo’s *Les Misérables*, using a physical simulation to position related characters closer together. The SVG rendering employs `d3.forceSimulation` with link, charge, and center forces to calculate node positions, while link thickness reflects co-occurrence frequency. Nodes are colored by group membership, and drag interactions allow users to adjust the layout. The data comes from Donald Knuth’s compilation of character appearances.

Mmbostock

97% match

Loading thumbnail…

Force-Directed Graph

This force-directed graph visualizes character co-occurrence in Victor Hugo’s *Les Misérables* using data compiled by Donald Knuth. It shows how related characters cluster together through a physical simulation of charged particles and springs, while unrelated characters remain distant. Rendered in SVG, the visualization uses D3 v4’s `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to compute layout positions, with `d3.drag` enabling interactive node movement. Link thickness encodes co-occurrence frequency, and node colors distinguish character groups via `d3.scaleOrdinal` with `d3.schemeCategory20`.

RRestuta

97% match

Loading thumbnail…

Force-Directed Graph

This force-directed graph visualizes character co-occurrence in Victor Hugo's *Les Misérables*, placing related characters closer together through a physical simulation. The SVG rendering uses D3 v4's `d3.forceSimulation`, `d3.forceLink`, and `d3.forceManyBody` to compute layout, with link width and color mapping to co-occurrence frequency. Nodes are draggable via `d3.drag`. Data comes from Donald Knuth's character co-appearance compilation, with a linear color scale from red to blue encoding link strength.

ZZhengyan Yu

96% match

Loading thumbnail…

Force-Directed Graph

This force-directed graph maps character co-occurrence in Victor Hugo’s *Les Misérables*: each circle is a character, each line a shared scene. A D3 force simulation with charge and link forces groups related characters together, while node color encodes the character’s group and line thickness reflects co-occurrence strength. Built with D3 v4 and rendered as SVG, the graph is interactive — nodes can be dragged to explore the network, and the simulation repositions related characters into proximity. The data was compiled by Donald Knuth and the layout is based on prior work by Tim Dwyer and Thomas Jakobsen.

AAndresAnayaIsaza

96% match

Loading thumbnail…

test

This force-directed graph visualizes character co-occurrence in Victor Hugo’s *Les Misérables*, showing how related characters cluster together in a network. The simulation uses `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to position nodes, while links are drawn as SVG lines with opacity and stroke width based on co-occurrence frequency. Colors assign nodes to character groups via `d3.scaleOrdinal`. The chart supports interactive dragging of nodes, which restarts the simulation with a higher alpha target. Data comes from Donald Knuth’s compiled dataset, rendered as SVG circles and lines.

ZZhengyan Yu

93% match

Loading thumbnail…

Gist 5776628

This force-directed graph visualizes character co-occurrence in Victor Hugo’s *Les Misérables*, using D3’s `d3.layout.force` to simulate charged particles and spring-like links. Nodes represent characters, colored by `d.group` via a categorical scale, while link thickness encodes co-occurrence strength (`Math.sqrt(d.value)`). SVG circles and lines update positions on each tick, with drag and zoom support for interaction. The layout algorithm, inspired by Tim Dwyer and Thomas Jakobsen, spatially clusters related characters. Data derives from Donald Knuth’s Stanford GraphBase compilation of character co-appearances.

11wheel

93% match

Loading thumbnail…

Force-Directed Graph

A force-directed graph visualizes the co-occurrence of characters in Victor Hugo’s *Les Misérables*, rendered as nodes and links on a Canvas. Using D3 v4’s `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter`, the layout iteratively positions nodes based on link forces. The animation updates on each tick, clearing the canvas and redrawing edges and nodes as gray lines and white-stroked circles. Data comes from the bundled `miserables.json` file.

Mmbostock

93% match

Loading thumbnail…

Force-Directed Graph

A force-directed graph visualizes character co-occurrence in *Les Misérables*, with nodes positioned so related characters cluster together. The simulation uses d3.forceSimulation with link, charge, and center forces, while nodes are draggable circles colored by cluster and links are lines with stroke-width scaled by co-occurrence value. The code loads data from a JSON file and renders everything as SVG.

MMNoichl

92% match