Adjustable Link Strength

100%

Adjustable Link Strength

✓ Published0🌍 Public

Last edited Sep 3, 2018

Created on May 13, 2017

This example displays a force-directed graph of character relationships from *Les Misérables*, rendered as nodes and links on a Canvas. A slider control adjusts the link strength parameter of the simulation, and the graph dynamically repositions to reflect the new force balance. The visualization uses D3 v4’s `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter`, and on each slider input it updates the link strength and restarts the simulation with `simulation.alpha(1).restart()`. The network data comes from the included `miserables.json` file.

AI-generated description

This example demonstrates how to modify the parameters of a force-directed graph. After modifying the desired parameter (here link.strength), you should reheat the simulation using simulation.alpha and simulation.restart. Alternatively, you can prevent the simulation from cooling by setting simulation.alphaDecay to 0, or by setting simulation.alphaTarget to a positive value.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/aba1a8d1a484f5c5f294eebd353842da'>Adjustable Link Strength</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Adjustable Link Strength

A force-directed network graph of character co-occurrences in Les Misérables visualizes the social structure of the novel. A slider labeled "Link Strength" directly adjusts the `strength` parameter of the `d3.forceLink` force within the `d3.forceSimulation` API. Dragging the slider triggers a callback that updates the force’s strength and calls `simulation.alpha(1).restart()`, reheating the simulation to re-layout the nodes. The Canvas-based rendering draws nodes as small circles and links as lines, with the graph’s layout responding in real time to the user’s input.

Mmbostock

93% match

Loading thumbnail…

Untitled

This interactive network visualization displays the character relationships from Les Misérables, with nodes representing individuals and links showing their connections. Users can adjust force simulation parameters through control panels, including charge strength, collision radius, link distance, and X/Y gravity forces. The graph renders as SVG circles and lines using D3 v4's force simulation APIs (d3.forceSimulation, d3.forceLink, d3.forceManyBody, d3.forceCollide, d3.forceCenter). Node dragging and tooltips are implemented with d3.drag, while the simulation alpha value is visualized as a dynamic progress bar.

Nnoe-d

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

83% match

Loading thumbnail…

29. Curved Links

This example visualizes the character relationships from *Les Misérables* as a force-directed network of colored nodes and curved Bézier links. It builds on a standard D3 force layout, but inserts an invisible intermediate node into each link so that connections render with aesthetic curves rather than straight lines. The implementation uses `d3.forceSimulation`, `d3.forceLink`, and `d3.forceManyBody`, with each relationship’s path drawn as an SVG path using a smooth quadratic curve command. The graph is interactive, allowing users to drag nodes while the simulation continues to adjust link positions.

深深度碎片

82% match

Loading thumbnail…

Force Dragging III

This example shows an interactive force-directed graph of character co-occurrence in *Les Misérables*, rendered as nodes and links on a Canvas. Users can click and drag any node to reposition it, which temporarily fixes that node to the pointer and reheats the simulation. The code uses d3.forceSimulation with link, charge, and center forces, while d3.drag handles the drag gesture. Data comes from the bundled miserables.json file, and the visualization redraws on each simulation tick.

Mmbostock

82% 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.

深深度碎片

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

81% match

Loading thumbnail…

Untitled

This example shows a force-directed network graph of character co-appearances in Les Misérables, with curved links connecting nodes. The visualization uses D3 v4’s `d3.forceSimulation` to compute node positions and `d3.drag` for interactive dragging. Each original link is split into two straight segments through an intermediate node, and `path` elements with quadratic Bézier curves (`S` commands) render these bilinks as smooth arcs. Node colors are assigned by group using `d3.scaleOrdinal` with `d3.schemeCategory20`, and the data comes from the included `miserables.json` file, rendered as SVG.

RRivaan

81% match