Zoomable forcegraph

100%

Zoomable forcegraph

✓ Published0🌍 Public

Last edited Sep 23, 2017

Created on Sep 23, 2017

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×.

AI-generated description

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/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 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

83% match

Loading thumbnail…

Zoomable Force Directed Graph d3v4

This graph uses a force-directed layout to arrange a network of named characters, with gray links showing relationships and black circles for nodes. Users can zoom and pan the entire visualization via mouse interactions. The example is built with d3.v4, using d3.forceSimulation with d3.forceLink and d3.forceManyBody, and renders to SVG. The node and link data are hardcoded in the script, with links flagged as allies or enemies.

FFrissAnalytics

81% match

Loading thumbnail…

Force-Directed Graph new format

This interactive network visualization displays the connections between characters in the Les Misérables dataset using a force-directed layout. Nodes represent individual characters, colored by their assigned group, while links show relationships with stroke width and opacity scaled by connection weight. The graph is rendered as an SVG that supports zooming, with node labels appearing on hover. The implementation uses d3.forceSimulation, d3.forceLink, d3.forceManyBody, d3.forceCenter for physics-based positioning, and d3.zoom for interactive exploration. Data is fetched from a remote source and parsed into a graph structure with a custom function.

KKhanin Sisaengsuwanchai

81% match

Loading thumbnail…

d3-force

A force-directed graph visualizes character interactions from Les Misérables, with 410 nodes colored by group and 410 weighted links. Users can drag individual nodes and zoom the SVG canvas. The implementation uses `d3.forceSimulation`, `forceLink`, `forceManyBody`, `forceCenter`, `d3.zoom`, and `d3.drag`, with node colors derived from `schemeCategory10` and data loaded from a TSV file.

Ttoeric

80% match

Loading thumbnail…

d3-force

A force-directed graph of the Les Misérables character co-occurrence network, rendered as SVG circles and lines. Node color encodes each character's group, derived from the number of links in the data.tsv file, which contains 410 nodes and 2,399 edges. d3.forceSimulation with forceLink, forceManyBody, and forceCenter drives the layout, while d3.drag enables node repositioning. A d3.zoom handler applies pan and zoom transforms to the entire graph.

Cchungmin-yu

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

80% match

Loading thumbnail…

Fork of Relation Graph with d3-force

This example shows a force-directed network graph of relationships between characters in Les Misérables, with nodes colored by group and sized by link value. Users can drag nodes to reposition them and zoom into the graph using their mouse or trackpad. The visualization is built with d3-force’s forceSimulation, forceLink, forceManyBody, and forceCenter, along with d3’s zoom and drag behaviors. Data is loaded as JSON from a GitHub gist, and all elements are rendered as SVG.

JJames Bradbury

80% match

Loading thumbnail…

Fork of Force-Directed Graph

This is an interactive force-directed graph that visualizes the network of characters from *Les Misérables*, based on the classic `miserables.json` dataset. Nodes are colored by their assigned group and can be dragged around the canvas, triggering the physics simulation to recalculate positions. Implemented with D3.js functions `forceSimulation`, `forceLink`, `forceManyBody`, `forceCenter`, and `drag`, the graph also supports zooming and panning via a `d3Zoom` handler, while node labels appear on hover. The SVG rendering displays nodes and links in full-screen, with node positions updated on each simulation tick.

KKhanin Sisaengsuwanchai

80% match