Skip to main content
100%

Grouped Force Layout

✓ Published0🌍 Public
Aandrew-reid
Last edited Jan 9, 2018
Created on Dec 28, 2017

This example shows a force-directed network graph of the character relationships in Les Misérables. Nodes are grouped into clusters by assigning a group ID from the dataset, and a D3 v4 force layout positions the nodes so that connected characters attract one another while grouped nodes are drawn together. The graph is rendered as SVG, with nodes colored by group and links showing connections. This layout is based on a gist by andrew-reid.

AI-generated description

Similar vizzes

Loading thumbnail…

Grouped Force Layout

This visualization uses a grouped force layout to cluster the character network from *Les Misérables* by community. Draggable nodes are colored by group, with links showing connections, while a Voronoi overlay dynamically partitions the space to visually reinforce each cluster’s territory. The simulation runs on `d3.forceSimulation` with link and charge forces, and custom logic on each tick adjusts node positions toward their group’s centroid. The Voronoi cells, rendered as SVG paths via `d3.voronoi`, update continuously as the layout settles or as users drag nodes.

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

(d3v4) Force Layout w highlights

This interactive force-directed network visualization displays character relationships from Les Misérables, with nodes colored by community group and links sized by connection strength. Built with D3 v4, it includes a dropdown filter to select character groups, highlighting connected nodes and links while fading others. Nodes can be dragged to reposition, double-clicked to release them back to the physics simulation, and hovered to reveal tooltips with character names, group IDs, or link source/target/strength. The visualization uses SVG with animation, a categorical color scheme from d3-scale-chromatic, and a legend to map group colors.

Aalmsuarez
87% match
Loading thumbnail…

Metis Class Les Miserables Force Layout

This example visualizes the co-occurrence network of characters in *Les Misérables* as a force-directed graph. Nodes represent characters, colored by their group membership, while links show relationships between characters. Built with D3 v4, the visualization uses a force simulation with link and many-body repulsive forces to position the nodes. The SVG circles and lines update their positions on each tick of the simulation, creating a dynamic layout of the character network. The graph is rendered at 500 by 500 pixels with a categorical color scale distinguishing character groups.

EElaineYu
86% match
Loading thumbnail…

Force-Directed Graph

This force-directed graph visualizes character co-occurrence in *Les Miséables*, using a physical simulation to position related characters closer together. Based on data compiled by Donald Knuth, the layout applies charged-particle repulsion and spring-like link forces, with node color encoding community group and link thickness reflecting co-appearance frequency. The D3 v4 implementation precomputes the layout over 300 ticks, then renders static SVG circles and lines, with drag-and-drop interaction to explore the network.

GGerardoFurtado
85% 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.

深深度碎片
85% 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
85% 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
85% match