Skip to main content
100%

Force-Directed Graph with Literal Data

✓ Published0🌍 Public
Aalex-rind
Last edited Jan 2, 2019
Created on Dec 14, 2018

This interactive force-directed graph shows character co-occurrence in Victor Hugo’s *Les Misérables*, with nodes representing characters and links representing their appearances together. The layout uses `d3.forceSimulation` with `d3.forceLink` and `d3.forceManyBody` to position related characters closer together. Draggable circles are colored by group using `d3.scaleOrdinal`, and link thickness reflects co-occurrence frequency. The code loads literal, inlined data instead of an external JSON file, though a separate `miserables.json` dataset is also provided.

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 with Literal Data</a>

bsd-3-clause 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 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 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
94% 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
94% 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
93% 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
92% 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
92% 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
92% 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
92% match