Skip to main content
SimilarExport ZIP
100%

(d3v4) Force Layout w highlights

✓ Published0🌍 Public
FFrissAnalytics
Last edited Oct 3, 2018
Created on Aug 19, 2018

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.

AI-generated description

D3 v4 forcelayout example with dropdown filters.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/2675ff61ea5e063ede2b5d63c08020c7'>Force Dragging I</a>

forked from <a href='http://bl.ocks.org/almsuarez/'>almsuarez</a>'s block: <a href='http://bl.ocks.org/almsuarez/851ed69e6b5b9cacaa4f5b1295a36ebe'>Force Layout v4 with Filters</a>

forked from <a href='http://bl.ocks.org/almsuarez/'>almsuarez</a>'s block: <a href='http://bl.ocks.org/almsuarez/de31c723360df5a1390164b35f1cbff8'>Force Layout v4 with Filters v2</a>

forked from <a href='http://bl.ocks.org/almsuarez/'>almsuarez</a>'s block: <a href='http://bl.ocks.org/almsuarez/4333a12d2531d6c1f6f22b74f2c57102'>(d3v4) Force Layout w highlights</a>

gpl-3.0 Licensed

Similar vizzes

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…

d3-force

A force-directed graph rendered in SVG displays 410 nodes and 1,217 links from the Les Misérables character co-occurrence dataset. Nodes are colored by group using `d3.schemeCategory10`, based on the number of links each character has. The graph uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to compute layout, while `d3.drag` enables node repositioning and `d3.zoom` supports panning and scaling. Link width reflects connection weight.

Eerin1234567
88% match
Loading thumbnail…

Force-Directed Graph V3

This example shows a force-directed network graph of character interactions from the novel Les Misérables. The visualization displays nodes as unlabeled circles and links as straight lines, with the layout computed dynamically through a physics simulation. Using D3 v6 within a React framework, the code applies `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` to position the 17 nodes and 14 links. The SVG elements update their coordinates on each simulation tick, though the data only includes a subset of the full character relationships.

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

Force-Directed Layout

This example visualizes the character co-occurrence network from *Les Misérables* using a force-directed layout with animated node and link appearance. Nodes fade in sequentially, and links become visible only after both connected nodes have appeared. The code uses D3’s `d3.layout.force` for physics simulation and SVG circles and lines for rendering, with chained `transition()` calls and `delay` timing to stagger the entrance. Node color encodes group membership via `d3.scale.category20`, while link thickness reflects the edge value.

GGerHobbelt
87% match
Loading thumbnail…

29. force drag 1

A force-directed network graph displays character relationships from Les Misérables, with nodes representing characters and links showing their connections. The visualization uses d3.forceSimulation with link, charge, and center forces to position the nodes, while the links are rendered as SVG lines and nodes as circles. Users can drag any node to interact with the layout, as the code enables d3.drag on the circles with start, drag, and end handlers that fix and release the dragged node's position during the simulation.

深深度碎片
87% match
Loading thumbnail…

29. force drag 1

A force-directed network graph displays character relationships from Les Misérables, with nodes representing characters and links showing their connections. The visualization uses d3.forceSimulation with link, charge, and center forces to position the nodes, while the links are rendered as SVG lines and nodes as circles. Users can drag any node to interact with the layout, as the code enables d3.drag on the circles with start, drag, and end handlers that fix and release the dragged node's position during the simulation.

深深度碎片
87% 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
87% match