Skip to main content
SimilarExport ZIP
100%

29. Curved Links

✓ Published0🌍 Public
深深度碎片
Last edited Aug 4, 2016
Created on Aug 4, 2016

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.

AI-generated description

This variation of a force-directed graph uses intermediate nodes in links to create aesthetically-pleasing Bézier curves.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/4600693'>29. Curved Links</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Curved Links

This example visualizes the character co-occurrence network from Victor Hugo’s *Les Misérables* as a force-directed graph. It replaces straight links with smooth Bézier curves by inserting an intermediate node into each connection, then uses a physical simulation to position all nodes. The code employs `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` forces, rendering circles and curved paths as SVG via `d3.select` and `append`. Dragging nodes is enabled through `d3.drag`, and the data comes from the embedded `miserables.json` file.

Mmbostock
91% match
Loading thumbnail…

Curved Links

This example visualizes the co-appearance network of characters in Victor Hugo’s *Les Misérables* as a force-directed graph, where links between characters are drawn as smooth Bézier curves. The original straight links are replaced by curves using an intermediate node placed between each source and target, creating a visually elegant layout that reduces overlap and improves clarity. Nodes are colored by group membership using a categorical color scale, and each node is draggable, allowing interactive exploration of the network structure. The simulation uses d3.forceLink with a short distance and moderate strength, combined with charge and centering forces, to arrange the characters. Curved paths are rendered as SVG paths with a quadratic Bézier command (S) for smooth, aesthetically pleasing connections.

GGerardoFurtado
91% 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
88% 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.

深深度碎片
85% 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
85% 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.

深深度碎片
85% 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.

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