TP 6 DataViz

100%

✓ Published0🌍 Public

Last edited Dec 8, 2016

Created on Dec 8, 2016

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.

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>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/e4c61decd1bbee08168b453bc7226b4f'>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

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

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

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…

d3-force

A force-directed graph visualizes character interactions from Les Misérables, with 410 nodes colored by group and 410 weighted links. Users can drag individual nodes and zoom the SVG canvas. The implementation uses `d3.forceSimulation`, `forceLink`, `forceManyBody`, `forceCenter`, `d3.zoom`, and `d3.drag`, with node colors derived from `schemeCategory10` and data loaded from a TSV file.

Ttoeric

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

87% match

Loading thumbnail…

(d3v4) Force Layout w highlights

This example shows a force-directed network graph of character interactions from *Les Misérables*, rendered as SVG nodes and links. Hovering over a node or link highlights its connections by fading unrelated elements, while a tooltip displays names, groups, and link strength. Dragging nodes repositions them, and double-clicking releases them from the fixed position. The visualization uses d3.forceSimulation with link, charge, and center forces, plus d3.drag for interaction and d3.schemeSet3 for coloring nodes by group.

FFrissAnalytics

87% match

Loading thumbnail…

d3-force

A force-directed graph of the Les Misérables character co-occurrence network, rendered as SVG circles and lines. Node color encodes each character's group, derived from the number of links in the data.tsv file, which contains 410 nodes and 2,399 edges. d3.forceSimulation with forceLink, forceManyBody, and forceCenter drives the layout, while d3.drag enables node repositioning. A d3.zoom handler applies pan and zoom transforms to the entire graph.

Cchungmin-yu

87% match