Les Mis Force practice

100%

Les Mis Force practice

✓ Published0🌍 Public

Last edited Jun 24, 2017

Created on Jun 24, 2017

This network diagram visualizes character co-appearances in Les Misérables, using a force-directed layout. Nodes are colored by group via d3.schemeAccent, with link stroke width proportional to connection value. The simulation uses d3.forceLink and d3.forceManyBody, and nodes are draggable with SVG circles. Hovering shows character names via tooltips. Data comes from the classic Les Misérables co-occurrence JSON, rendered entirely in SVG with D3 v4.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Metis Class Les Miserables Force Layout

This example visualizes the co-occurrence network of characters in *Les Misérables* as a force-directed graph. Nodes represent characters, colored by their group membership, while links show relationships between characters. Built with D3 v4, the visualization uses a force simulation with link and many-body repulsive forces to position the nodes. The SVG circles and lines update their positions on each tick of the simulation, creating a dynamic layout of the character network. The graph is rendered at 500 by 500 pixels with a categorical color scale distinguishing character groups.

EElaineYu

90% match

Loading thumbnail…

29.Force-Directed Graph

This example shows a force-directed graph of character co-appearances in *Les Misérables*, with nodes colored by group membership and link thickness scaled by interaction weight. Using D3 v4, it loads data from `miserables.json` and runs a `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to compute positions. Nodes and links render as SVG circles and lines, and the visible `ticked` function updates their coordinates. The code also wires up `d3.drag` handlers to let viewers reposition nodes.

深深度碎片

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

89% match

Loading thumbnail…

(^^)

A force-directed network diagram displays the relationships among characters in the novel *Les Misérables*. Nodes represent individual characters, colored by their community group, while links indicate co-appearance, with line thickness proportional to interaction strength. Nodes can be dragged interactively, causing the simulation to adjust the layout. The visualization uses `d3.forceSimulation` for physics, `d3.drag` for node manipulation, and `d3.schemePaired` for categorical coloring, rendering in SVG within a React framework. Data is loaded from a JSON file hosted on GitHub.

CCyc-Evelyn

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

88% match

Loading thumbnail…

Force-Directed Graph

This force-directed graph visualizes character co-occurrence in *Les Miséables*, using a physical simulation to position related characters closer together. Based on data compiled by Donald Knuth, the layout applies charged-particle repulsion and spring-like link forces, with node color encoding community group and link thickness reflecting co-appearance frequency. The D3 v4 implementation precomputes the layout over 300 ticks, then renders static SVG circles and lines, with drag-and-drop interaction to explore the network.

GGerardoFurtado

88% match

Loading thumbnail…

Force Directed Graph

A force-directed graph displays character relationships from Les Misérables, with nodes colored by group affiliation and labeled with character names. The visualization uses d3.forceSimulation to position nodes and links, while a secondary label simulation keeps text labels readable. Hovering highlights a node's immediate neighbors by adjusting opacity. The SVG rendering includes zoom and drag interactions, and the data comes from the bundled data.json file.

KKarkG

88% match

Loading thumbnail…

Network

This network visualization shows the relationships between characters from *Les Misérables*, with nodes colored by group and link thickness representing connection strength. The force-directed layout uses `d3.forceSimulation` with link, many-body charge, and center forces to position the SVG elements. The code loads JSON data, creates circles and lines, and updates their positions on each simulation tick using D3's selection API.

Llukeod

88% match