Skip to main content
SimilarExport ZIP
100%

Force-Directed Graph

✓ Published0🌍 Public
RRestuta
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 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`.

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*, 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
97% 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
97% 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
97% 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
97% match
Loading thumbnail…

Force-Directed Graph

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.

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