Curved Links

100%

✓ Published0🌍 Public

Last edited Jul 17, 2016

Created on Jan 23, 2013

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.

AI-generated description

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

gpl-3.0 Licensed

Similar vizzes

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

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

深深度碎片

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

89% match

Loading thumbnail…

Untitled

This example visualizes the character co-occurrence network from Victor Hugo’s *Les Misérables* as an interactive force-directed graph. Nodes represent characters, colored by group, while links show relationships with thickness scaled by connection weight. The visualization uses D3 v4’s `d3.forceSimulation` with link, charge, and center forces to position elements, and `d3.drag` enables node dragging. Rendered in SVG, it labels each node with the character’s name and includes hover tooltips. Data comes from the bundled `miserables.json` file.

NNathannous

86% match

Loading thumbnail…

Force-Directed Graph

A force-directed graph visualizes the co-occurrence of characters in Victor Hugo’s *Les Misérables*, rendered as nodes and links on a Canvas. Using D3 v4’s `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter`, the layout iteratively positions nodes based on link forces. The animation updates on each tick, clearing the canvas and redrawing edges and nodes as gray lines and white-stroked circles. Data comes from the bundled `miserables.json` file.

Mmbostock

86% match

Loading thumbnail…

Force-Directed Graph

This force-directed graph visualizes character co-occurrence in Victor Hugo’s *Les Misérables*, using a physical simulation to position related characters closer together. The SVG rendering employs `d3.forceSimulation` with link, charge, and center forces to calculate node positions, while link thickness reflects co-occurrence frequency. Nodes are colored by group membership, and drag interactions allow users to adjust the layout. The data comes from Donald Knuth’s compilation of character appearances.

Mmbostock

86% match

Loading thumbnail…

Untitled

This interactive force-directed network graph visualizes character relationships from Victor Hugo’s *Les Misérables*, with nodes representing characters and links showing interactions. The code uses D3 v4’s `d3.forceSimulation` with link, charge, and center forces to position nodes, while SVG elements render colored circles and text labels. Dragging nodes is enabled via `d3.drag`, and link thickness reflects interaction strength from the miserables.json dataset.

Mmuzzheng

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

85% match