Skip to main content
SimilarExport ZIP
100%

TP 6 (V2)

✓ Published0🌍 Public
JJeremyBesson
Last edited Dec 11, 2016
Created on Dec 11, 2016

This interactive network graph visualizes character co-occurrence in *Les Misérables*, with nodes colored by group and sized by degree. The force-directed layout uses `d3.forceSimulation` with link, charge, and center forces, rendering circles and lines as SVG elements. Data comes from a JSON file (`miserables.json`) containing 77 nodes and 254 weighted links. Nodes are draggable via `d3.drag`, with the simulation restarting to adjust positions, while link opacity and stroke width reflect relationship strength.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/nbonneel/'>nbonneel</a>'s block: <a href='http://bl.ocks.org/nbonneel/91f6d433810029851e170ba668436340'>TP 6 DataViz</a>

mit Licensed

Similar vizzes

Loading thumbnail…

TP 6 DataViz

This example visualizes the co-occurrence network of characters in *Les Misérables*, using D3 v4’s force-directed simulation. Nodes represent individual characters, colored by their group, while links show relationships weighted by their value. The graph is rendered as SVG circles and lines, with node labels available via tooltips. The simulation includes charge and center forces, and nodes are draggable. The data is loaded from a local JSON file, and the tick function is present but commented out, meaning the layout is computed but node/link positions are not updated on screen—a possible bug in the example.

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

深深度碎片
88% match
Loading thumbnail…

Untitled

This example visualizes the character co-occurrence network from *Les Misérables* as a force-directed graph. Nodes represent characters, colored by group, with links sized by interaction weight. The visualization uses D3 v4’s `d3.forceSimulation` with link, charge, and center forces to position elements, while SVG circles and text render the nodes and labels. Data loads from a local `miserables.json` file, and nodes support dragging via `d3.drag`.

NNathannous
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
87% match
Loading thumbnail…

Les misérables (graphe)

This D3.js force-directed graph visualizes the character interactions in Victor Hugo’s *Les Misérables*, using a JSON dataset of nodes (characters) and weighted links (co-appearances). The SVG rendering uses `d3.forceSimulation` with link, many-body charge, and centering forces to position nodes, while node fill colors are assigned by categorical group via `d3.scaleOrdinal`. Link stroke-width encodes interaction strength, and nodes are draggable, with a tooltip showing each character’s name.

JJulesSauvinet
87% 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
87% match
Loading thumbnail…

Les Mis Force practice

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.

335degrees
86% 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
86% match