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

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.

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>

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

gpl-3.0 Licensed

Similar vizzes

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

89% match

Loading thumbnail…

Weighted nodes and curved links v4

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.

BBTKY

85% match

Loading thumbnail…

Force Directed Graph

This example shows a force-directed graph with nodes connected by links of varying weights, representing relationships between chemical elements and compounds. The code uses d3.forceSimulation to position the circular nodes and curved paths for the links, with text labels for each node. The visualization is rendered as an SVG using D3 v5, with node colors and stroke widths determined by the link values in the static JSON dataset.

Yyakupermurat

81% match

Loading thumbnail…

DONE: NODES, LINKS FROM FILE WITH WEIGHTS AND GRAVITY

A force-directed graph visualizes weighted connections between nodes loaded from a CSV file, with gravity pulling all nodes toward the center. Users can run Dijkstra, breadth-first, or depth-first search from a specified root node, highlighting the resulting path in red while dimming passed nodes and links. Built with React for UI controls and D3 v3's `d3.layout.force` for physics, the visualization renders nodes and curved links as SVG paths with animated tick updates, link labels showing weights, and arrow markers.

JJediquu

80% match

Loading thumbnail…

Force-Graph

This example shows a force-directed graph of four named nodes connected by weighted links, rendered as SVG within a React framework. The code uses `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to position nodes, while the simulation’s `tick` event updates node and link coordinates. Nodes are draggable via `d3.drag`, and links are colored using a `d3.scaleOrdinal` based on `d3.schemeCategory10`. Data is loaded from a local JSON file, and node labels are displayed as text elements.

RRafael Campos

80% match

Loading thumbnail…

Network Graph

A network graph displays six named nodes connected by six weighted links, with link thickness proportional to each connection’s weight. Using D3 v4’s force layout (`d3.layout.force`) and SVG rendering, the visualization positions nodes through simulated gravity, charge, and distance parameters. Node circles are blue with labels, and the layout updates continuously during the `tick` event to animate the graph. Data comes from a local `data.json` file containing node names, group assignments, and link weight values.

Ttarungunda

79% match

Loading thumbnail…

graph2

A force-directed network graph displays weighted relationships between named individuals, with nodes as circles and links as paths whose thickness reflects link value. The layout is computed using D3 v3's `d3.forceSimulation` (likely `d3.layout.force`), rendering to SVG with CSS styling for node fill, stroke, and text labels. Data is hardcoded as a JavaScript array of link objects specifying source, target, and numeric value, which drives node positioning without external data files.

Ccyanea1

79% match

Loading thumbnail…

Untitled

This example shows a small directed graph with four nodes and two weighted links rendered as an SVG. Nodes are labeled with their names from a JSON file, and link stroke width encodes the weight value. The visualization uses the D3.js v2 force-directed layout API, `d3.layout.force`, to position nodes, with link coordinates updated on each simulation tick. Node dragging is enabled via the `force.drag` call.

Ccharliemok

79% match