Fork of Relation Graph with d3-force

100%

Fork of Relation Graph with d3-force

✓ Published0🌍 Public

Last edited Feb 16, 2021

Created on Feb 16, 2021

Forked from 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.

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…

Fork of Relation Graph with d3-force

This visualization shows the network of character co-appearances in Les Misérables as a force-directed graph, with nodes colored by group using d3.schemeCategory10 and links weighted by interaction frequency. The graph supports interactive dragging of individual nodes via d3.drag, and users can zoom and pan the entire view using d3.zoom with a scale range up to 8x. The simulation is computed with d3.forceSimulation, combining forceLink, forceManyBody, and forceCenter, while the SVG rendering updates node positions on each tick. Data is loaded asynchronously from a JSON file containing the Miserables dataset.

VVictor Lorena

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

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

89% match

Loading thumbnail…

Relation Graph with d3-force

This interactive relation graph visualizes the character co-occurrence network from Victor Hugo's *Les Misérables*. Using `forceSimulation` from the `d3-force` library alongside the standard d3.v6 API, it maps characters to circles and their interactions to weighted lines. The SVG rendering supports both node dragging via the `drag` behavior and view zooming controlled through the `zoom` extension, which applies transforms to the network elements. Nodes are colored by their group assignment using the `schemeCategory10` palette.

Llintonylin

89% match

Loading thumbnail…

Fork of Network

This force-directed network graph visualizes character relationships from Les Misérables, with nodes colored by group category (Document, Email, Person, Location, etc.) and link thickness scaled by connection value. The simulation uses d3.forceSimulation with forceLink, forceManyBody, and forceCenter to position nodes, while a colorLegend component renders the categorical color scale. SVG circles and lines are updated on each tick, and the data loads from a JSON file containing nodes and weighted links.

Xxbambambs

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

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

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

88% match