Force-Directed Graph

100%

Force-Directed Graph

✓ Published0🌍 Public

Last edited May 13, 2016

Created on May 13, 2016

A force-directed graph depicts character co-occurrence in Victor Hugo’s *Les Misérables*, with nodes representing characters and links showing shared appearances, based on data compiled by Donald Knuth. The visualization uses d3.v3’s `d3.layout.force` to simulate charged particles and springs, positioning related characters closer together while colors from `d3.scale.category20()` group characters by community. SVG circles and lines render the layout, with link thickness scaled by co-occurrence frequency and hover tooltips revealing names.

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 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

96% match

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

96% 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

95% match

Loading thumbnail…

Force-Directed Graph

This force-directed graph shows character co-occurrence in Victor Hugo’s *Les Misérables*, using a physical simulation to place related characters close together and unrelated ones farther apart in an SVG visualization. The code uses `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to compute positions, while links are drawn as lines with stroke widths proportional to co-occurrence frequency. Nodes are colored by group using `d3.scaleOrdinal` with `d3.schemeCategory20`, and the data comes from Donald Knuth’s compiled character network, with drag interactions enabled via `d3.drag`.

SSpaceActuary

95% match

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 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.

RRestuta

95% 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

94% 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

94% match

Loading thumbnail…

Force-Directed Graph

This force-directed graph visualizes character co-occurrence in *Les Misérables*, with related characters drawn closer together through a physical simulation of charged particles and springs. Nodes are colored by group and links are weighted by co-occurrence frequency. The implementation uses D3 v4’s `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to compute positions, rendered as SVG lines and circles with drag interaction. Data is from Donald Knuth’s character co-appearance compilation.

MMettiHoof

91% match