d3-force

100%

✓ Published0🌍 Public

Last edited Nov 4, 2020

Created on Nov 1, 2020

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.

AI-generated description

Relation Graph with Grab and Zoom features implemented.

TODO:

Legends, Class of Links

Based on force-directed-graph. The data comes from Les Misérables.

MIT Licensed

Similar vizzes

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

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

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

深深度碎片

90% match

Loading thumbnail…

Force Directed Graph

A force-directed graph displays character relationships from Les Misérables, with nodes colored by group affiliation and labeled with character names. The visualization uses d3.forceSimulation to position nodes and links, while a secondary label simulation keeps text labels readable. Hovering highlights a node's immediate neighbors by adjusting opacity. The SVG rendering includes zoom and drag interactions, and the data comes from the bundled data.json file.

KKarkG

88% match

Loading thumbnail…

(d3v4) Force Layout w highlights

This example shows a force-directed network graph of character interactions from *Les Misérables*, rendered as SVG nodes and links. Hovering over a node or link highlights its connections by fading unrelated elements, while a tooltip displays names, groups, and link strength. Dragging nodes repositions them, and double-clicking releases them from the fixed position. The visualization uses d3.forceSimulation with link, charge, and center forces, plus d3.drag for interaction and d3.schemeSet3 for coloring nodes by group.

FFrissAnalytics

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

87% match

Loading thumbnail…

Force-Directed Graph V3

This example shows a force-directed network graph of character interactions from the novel Les Misérables. The visualization displays nodes as unlabeled circles and links as straight lines, with the layout computed dynamically through a physics simulation. Using D3 v6 within a React framework, the code applies `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` to position the 17 nodes and 14 links. The SVG elements update their coordinates on each simulation tick, though the data only includes a subset of the full character relationships.

Sschneich

87% match

Loading thumbnail…

Force-Directed Graph click

This interactive visualization shows the character network from Les Misérables as a force-directed graph. Users can pan and zoom the SVG canvas, while hovering over nodes reveals character names and dragging nodes rearranges the layout dynamically. The graph uses d3.forceSimulation with forceLink and forceManyBody to position nodes, with link thickness and opacity scaled by connection weight via d3.scaleLinear. Node colors are randomly assigned per group, and the data comes from a text file parsed by a custom graphUtils function that extracts nodes, links, and weights from whitespace-separated values.

KKhanin Sisaengsuwanchai

87% match