Force Directed Graph Toggle to Circle

100%

Force Directed Graph Toggle to Circle

✓ Published0🌍 Public

Last edited Apr 20, 2017

Created on Apr 17, 2017

This example visualizes character co-occurrence in *Les Misérables*, letting users toggle between an animated force-directed graph and a circular chord-like layout. The nodes transition smoothly between the two arrangements, with links and circles animating to new positions over one second. Built with D3 v3, it uses `d3.layout.force` for the force simulation and `d3.scale.linear` to map node indices to circle coordinates. Radio buttons control the view, and hovering reveals character names via SVG `<title>` elements.

AI-generated description

Based on Mike Bostock's force-directed graph example showing character co-occurence in Les Misérables, this gist shows how to toggle between the animated force-directed graph and a circle formation akin to a chord diagram.

forked from <a href='http://bl.ocks.org/bricof/'>bricof</a>'s block: <a href='http://bl.ocks.org/bricof/5502b02332570c820e4a41db0b165089'>Force Directed Graph Toggle to Circle</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Force Directed Graph Toggle to Circle

This interactive visualization presents the character co-occurrence network from *Les Misérables* as a force-directed graph. Users toggle between the physics-based layout and an arranged circle formation. The D3.js v3 code uses `d3.layout.force` for the initial graph and applies a one-second transition via `transition().duration(1000)` to animate nodes and links into circular positions. The example is a fork of a gist by bricof, based on Mike Bostock's original force-directed graph example.

FFrissAnalytics

91% match

Loading thumbnail…

Force-Directed Layout

This example visualizes the character co-occurrence network from *Les Misérables* using a force-directed layout with animated node and link appearance. Nodes fade in sequentially, and links become visible only after both connected nodes have appeared. The code uses D3’s `d3.layout.force` for physics simulation and SVG circles and lines for rendering, with chained `transition()` calls and `delay` timing to stagger the entrance. Node color encodes group membership via `d3.scale.category20`, while link thickness reflects the edge value.

GGerHobbelt

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

84% match

Loading thumbnail…

Force-Directed Graph

This force-directed graph visualizes character co-occurrence in *Les Misérables*, with nodes representing characters and links indicating shared appearances. The layout uses D3 v4’s `d3.forceSimulation` and `d3.forceLink`, though the standard simulation is commented out, leaving nodes positioned randomly via `Math.random` while links are drawn with calculated coordinates. Node color encodes group membership via `d3.scaleOrdinal` and `d3.schemeCategory20`, and drag interactions are enabled with `d3.drag`. The data is compiled by Donald Knuth and rendered as SVG.

ZZhengyan Yu

84% match

Loading thumbnail…

D3.js v4 Force Directed Graph with Labels

This example shows a force-directed graph of character co-occurrences in *Les Misérables*, with character names displayed directly beside each node. The visualization uses D3.js v4’s force simulation to position nodes and links, grouping SVG circles and text labels inside `<g>` elements so names travel with their nodes during drag and layout. Node colors encode character group membership, while link thickness reflects the strength of co-occurrence. The graph is interactive—nodes can be dragged, and the simulation restarts on interaction—and is rendered entirely in SVG with a clean, minimal style.

GGerardoFurtado

84% match

Loading thumbnail…

Force directed graph

This example shows a force-directed graph of character co-occurrence data from Les Misérables, rendered as an interactive SVG animation. It uses d3.forceSimulation to position nodes and links, with draggable circles representing characters and colored convex hulls drawn around groups of three or more nodes sharing the same group attribute. The hulls are generated using d3.polygonHull and closed curves, with a dropdown to switch between curveBasisClosed, curveCardinalClosed, curveCatmullRomClosed, and curveLinearClosed. The visualization is built with D3 v4 and React, loading graph data from a JSON file.

Kkalokli8

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

深深度碎片

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

83% match