Skip to main content
100%

[SO 38995816] D3-Force updating parameters after initializing graph

✓ Published0🌍 Public
Aaltocumulus
Last edited Aug 17, 2016
Created on Aug 17, 2016

This interactive force-directed graph depicts character co-occurrence in Victor Hugo’s *Les Misérables*, using D3 v4’s `d3.forceSimulation` with link, charge, and centering forces. The novel feature is dynamic parameter updating: as the mouse moves over the SVG, the link distance is recalculated based on the cursor's distance from the center, and the simulation is restarted with an alpha of 1. This causes the graph to continuously re-layout, pulling characters closer or pushing them apart as the mouse moves. Nodes are draggable and colored by group, while link thickness encodes co-occurrence strength. The data, based on character co-appearances compiled by Donald Knuth, is rendered with SVG circles and lines.

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>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/8266529adc755d479a5d0cf6cb1f34c4'>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
91% 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
91% 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
90% 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
90% 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
90% 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
90% 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
90% 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
89% match