TP 6 DataViz

100%

✓ Published0🌍 Public

Last edited Dec 8, 2016

Created on Dec 8, 2016

This interactive network visualization displays the character relationships from Les Misérables as a force-directed graph. Nodes represent characters, colored by group affiliation, while links indicate connections with stroke width reflecting relationship strength. The visualization uses D3 v4's `d3.forceSimulation` with link, charge, and center forces to position nodes, and includes drag interaction via `d3.drag`. Data comes from the external `miserables.json` file, rendered as SVG circles and lines with a categorical color scale.

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 (V2)

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.

JJeremyBesson

93% match

Loading thumbnail…

TP 6 DataViz

This example shows a force-directed network graph of character interactions from *Les Misérables*, with nodes colored by group and links weighted by line thickness. It uses d3.forceSimulation with link, charge, and center forces to position the nodes, rendering SVG circles and lines. The data comes from the embedded miserables.json file, and nodes are draggable via d3.drag.

MMaximeGehin

92% match

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

92% match

Loading thumbnail…

TP 6 DataViz

This D3.js v4 force-directed graph visualizes character co-appearances in *Les Misérables*, using a JSON dataset of nodes and weighted links. The simulation uses `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to position nodes, while `d3.drag` lets users rearrange them. Nodes are colored by group via `d3.scaleOrdinal`, with link thickness scaled by connection value. The SVG rendering updates each tick, and dragging restarts the simulation with a higher alpha target.

RRomyRatolojanahary

90% match

Loading thumbnail…

Force-Directed Graph

This force-directed graph visualizes character co-occurrence in Les Misérables, grouping related characters into proximity while separating unrelated ones. Drawn as SVG circles and lines, nodes are colored by group and links weighted by interaction frequency. The data, compiled by Donald Knuth and stored in `miserables.json`, drives a `d3.forceSimulation` with link, charge, and center forces. Interactive dragging is enabled via `d3.drag`, while node positions update on each simulation tick.

NNate-Holland

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

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…

Untitled

A force-directed network diagram visualizes character relationships from Les Misérables, with nodes representing characters and curved links indicating interactions between them. The graph uses d3.forceSimulation with link, charge, and center forces to position elements, while zoom and drag interactions enable exploration. The code loads miserables.json data and renders the network as SVG, assigning colors by group membership and using intermediate nodes to create curved edge paths.

JJoker-tr

86% match