D3 force layout with WebAssembly!

100%

D3 force layout with WebAssembly!

✓ Published0🌍 Public

Last edited Oct 30, 2017

Created on Oct 10, 2017

This example shows the classic Les Misérables character co-occurrence graph rendered as an animated force-directed network. It demonstrates `d3-wasm-force`, a drop-in replacement for `d3.forceSimulation` that runs the physics calculations in WebAssembly for improved performance. The visualization uses SVG circles and lines to represent characters and their relationships, with colors encoding group membership. The simulation ticks on an interval and supports drag interactions on nodes.

AI-generated description

This block demonstrates d3-wasm-force, a partial re-implementation of d3-force using WebAssembly.

This demo is based on Mike Bostock's force-directed graph that shows character co-occurence in Les Misérables, where d3-wasm-force is almost a drop-in replacement.

Built with blockbuilder.org

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

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

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

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

80% match

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

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

79% match

Loading thumbnail…

Bounded Force Layout

The visualization shows a bounded force-directed graph of the character co-occurrence network from *Les Misérables*, with nodes restricted to stay within the rectangular SVG canvas. The code leverages the custom `d3.layout.force` API from D3 v3 to simulate the physics, while the `tick` callback clamps each node's `cx` and `cy` attributes to the range `[radius, width - radius]` and `[radius, height - radius]`. The graph reads from a `graph.json` file, and the force simulation is driven by `force.drag` for user interaction.

FFrissAnalytics

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

79% match