Weighted nodes and curved links

100%

Weighted nodes and curved links

✓ Published0🌍 Public

Last edited Sep 23, 2017

Created on Sep 23, 2017

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.

AI-generated description

This is a quick hack to draw two parallel links between nodes. Yes, you can scale it to more than two nodes, but it gets increasingly awkward. The alternative is to compute the paths manually, say by computing the perpendicular vector of the vector between the node centers, and offsetting the links accordingly.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/3037015'>Weighted nodes</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

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…

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

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

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

77% match

Loading thumbnail…

Network tree

This example shows a force-directed network tree with six nodes and five weighted links, rendered as draggable orange circles with text labels. The code uses d3.layout.force (v4) to simulate gravity, charge, and link distance, while rendering SVG lines and groups. Node weights set stroke-width via Math.sqrt(d.weight), and data loads from an external graphFile.json containing name, group, and link target/source arrays. The visualization updates node positions on each tick using the force layout’s tick event.

Uubl2

76% match

Loading thumbnail…

Gist 41688f44df38ac0b35d9

This example shows a force-directed network graph where nodes are connected by curved links, with a color scheme that differentiates clusters. The visualization uses D3.js’s `forceSimulation` API to compute the physics-based layout, while the links are drawn as Bézier curves using the `d3.geoPath` generator. Node positions and link paths are updated iteratively in a custom simulation loop, with the rendering performed on an HTML5 Canvas element. The code reads a static JSON dataset embedded within the HTML file, providing the node and link definitions for the graph.

MMyoshu

76% match

Loading thumbnail…

force_node_simple

This example shows a simple force-directed network graph rendered as SVG, displaying labeled circular nodes and weighted links. It loads node and link data from a JSON file and uses the d3.layout.force API from d3.v2 to simulate physics with configurable gravity, distance, and charge. Each link’s stroke width reflects its weight value, and nodes are draggable via d3.force.drag. A tick handler updates line coordinates and node transforms continuously.

CCyc-Evelyn

76% match