TP 6 DataViz

100%

✓ Published0🌍 Public

Last edited Dec 18, 2016

Created on Dec 18, 2016

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.

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…

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

92% 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…

Force-Directed Graph

This force-directed graph visualizes character co-occurrence in *Les Misérables*, with nodes representing characters and links indicating shared appearances. The layout uses D3 v4’s `d3.forceSimulation` and `d3.forceLink`, though the standard simulation is commented out, leaving nodes positioned randomly via `Math.random` while links are drawn with calculated coordinates. Node color encodes group membership via `d3.scaleOrdinal` and `d3.schemeCategory20`, and drag interactions are enabled with `d3.drag`. The data is compiled by Donald Knuth and rendered as SVG.

ZZhengyan Yu

90% match

Loading thumbnail…

TP 6 DataViz

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.

SSamyMe

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.

深深度碎片

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

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

89% match