Weighted nodes and curved links v4

100%

Weighted nodes and curved links v4

✓ Published0🌍 Public

Last edited Sep 23, 2017

Created on Sep 23, 2017

This force-directed graph visualizes word co-occurrence in a dataset of government, military, gender, media, trade, and science terms. Node size reflects word frequency, and links connect co-occurring words. The graph uses `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCollide` forces to position related words closer together. Nodes are rendered as circles with labels, and curves are drawn as SVG paths. The data is a JSON file based on word co-occurrence, not the original Les Misérables character data.

AI-generated description

This simple force-directed graph shows character co-occurence in Les Misérables. A physical simulation of charged particles and springs places related characters in closer proximity, while unrelated characters are farther apart. Layout algorithm inspired by Tim Dwyer and Thomas Jakobsen. Data based on character coappearence in Victor Hugo's Les Misérables, compiled by Donald Knuth.

Compare this display to a force layout with curved links, a force layout with fisheye distortion and a matrix diagram.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/4062045'>Force-Directed Graph</a>

forked from <a href='http://bl.ocks.org/riyazshaikh/'>riyazshaikh</a>'s block: <a href='http://bl.ocks.org/riyazshaikh/2a2ad9a6eed7f21c66b10f11155d9bac'>Force-Directed Graph</a>

forked from <a href='http://bl.ocks.org/donpinkus/'>donpinkus</a>'s block: <a href='http://bl.ocks.org/donpinkus/f02531d86e3d8028d5216f9c72d40e1d'>Weighted nodes and curved links v4</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Weighted nodes and curved links v4

A force-directed graph shows relationships among concepts extracted from news articles, with node size reflecting frequency and colors representing thematic categories. Curved links connect related terms, and the layout separates clusters by topic. The visualization uses D3 v4's `d3.forceSimulation` with link, charge, collision, and centering forces, and renders nodes and curved paths as SVG. Data comes from a JSON file of nodes and links, with node values stored as strings.

BBTKY

85% match

Loading thumbnail…

Weighted nodes and curved links

A weighted force-directed graph displays words and thematic categories from JSON data, with node size scaled by a square-root transform and colors assigned by category class. Curved links, drawn as SVG paths, connect nodes using a single-arc approximation that produces dual parallel curves between pairs. The example uses D3 v3 with `d3.layout.force` for the physics simulation and `d3.scale.sqrt` for sizing, rendering entirely as SVG within an HTML page.

BBTKY

85% match

Loading thumbnail…

Zoomable forcegraph

This visualization shows a weighted force-directed network of co-occurring words from a text corpus, with node size proportional to word frequency and curved links between related terms. The graph uses the classic Les Misérables dataset structure, though with custom node and link values. Built with D3 v4, it applies `d3.forceSimulation` with link, charge, collision, and centering forces, while `d3.forceLink` distances depend on node radii. Labels appear on each node, and a semi-transparent overlay rectangle enables zooming via `d3.zoom` with pan and scale limits between 0.5 and 4×.

BBTKY

83% match

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

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

深深度碎片

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

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

深深度碎片

76% match

Loading thumbnail…

D3.js v4 Force Directed Graph with Labels

This example shows a force-directed graph of character co-occurrences in *Les Misérables*, with character names displayed directly beside each node. The visualization uses D3.js v4’s force simulation to position nodes and links, grouping SVG circles and text labels inside `<g>` elements so names travel with their nodes during drag and layout. Node colors encode character group membership, while link thickness reflects the strength of co-occurrence. The graph is interactive—nodes can be dragged, and the simulation restarts on interaction—and is rendered entirely in SVG with a clean, minimal style.

GGerardoFurtado

76% match