Force-directed layout

100%

Force-directed layout

✓ Published0🌍 Public

Last edited Mar 12, 2026

Created on Mar 12, 2026

This interactive force-directed layout visualizes the network of characters from the novel *Les Misérables*, loaded as JSON data. Using D3.js v4's `d3.forceSimulation` API, it renders nodes as SVG circles and edges as lines, with forces for charge (repulsion/attraction), collision, centering, and links. A control panel exposes sliders and checkboxes to adjust simulation parameters like alpha, charge strength, and link distance in real time, allowing users to explore how these forces shape the graph’s arrangement.

AI-generated description

Steve Haroz's force directed layout example from https://gist.github.com/steveharoz/8c3e2524079a8c440df60c1ab72b5d03

MIT Licensed

Similar vizzes

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

90% match

Loading thumbnail…

(^^)

A force-directed network diagram displays the relationships among characters in the novel *Les Misérables*. Nodes represent individual characters, colored by their community group, while links indicate co-appearance, with line thickness proportional to interaction strength. Nodes can be dragged interactively, causing the simulation to adjust the layout. The visualization uses `d3.forceSimulation` for physics, `d3.drag` for node manipulation, and `d3.schemePaired` for categorical coloring, rendering in SVG within a React framework. Data is loaded from a JSON file hosted on GitHub.

CCyc-Evelyn

89% 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 visualizes character co-occurrence in *Les Misérables*, with nodes positioned so related characters cluster together. The simulation uses d3.forceSimulation with link, charge, and center forces, while nodes are draggable circles colored by cluster and links are lines with stroke-width scaled by co-occurrence value. The code loads data from a JSON file and renders everything as SVG.

MMNoichl

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

88% match

Loading thumbnail…

Untitled

This interactive network visualization displays the character relationships from Les Misérables, with nodes representing individuals and links showing their connections. Users can adjust force simulation parameters through control panels, including charge strength, collision radius, link distance, and X/Y gravity forces. The graph renders as SVG circles and lines using D3 v4's force simulation APIs (d3.forceSimulation, d3.forceLink, d3.forceManyBody, d3.forceCollide, d3.forceCenter). Node dragging and tooltips are implemented with d3.drag, while the simulation alpha value is visualized as a dynamic progress bar.

Nnoe-d

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

88% match