Force Brush

100%

✓ Published0🌍 Public

Last edited Oct 1, 2018

Created on Dec 8, 2016

A force-directed graph of character co-occurrences from *Les Misérables* allows interactive selection of nodes via a rectangular brush. Dragging the brush highlights nodes within the selected region in red, while an empty brush click deselects all nodes. Using `d3.layout.force` for the physics simulation and `d3.svg.brush` for selection, the graph colors nodes by their group with a category20 scale, drawing links weighted by co-occurrence strength.

AI-generated description

forked from <a href='http://bl.ocks.org/zrlram/'>zrlram</a>'s block: <a href='http://bl.ocks.org/zrlram/2522963'>d3 force layout with brushing and selecting of nodes</a>

mit Licensed

Similar vizzes

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

Loading thumbnail…

Force-Directed Graph

This force-directed graph visualizes character co-occurrence in *Les Misérables*, with related characters drawn closer together through a physical simulation of charged particles and springs. Nodes are colored by group and links are weighted by co-occurrence frequency. The implementation uses D3 v4’s `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to compute positions, rendered as SVG lines and circles with drag interaction. Data is from Donald Knuth’s character co-appearance compilation.

MMettiHoof

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

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

深深度碎片

81% match

Loading thumbnail…

Force Directed with Voronoi selection

This example shows a force-directed graph of character co-occurrence in *Les Misérables*, with a Voronoi overlay that creates clickable regions around each node. The D3 v4 visualization uses a physical simulation with charged particles and springs to position related characters closer together, while the Voronoi cells extend the interactive area beyond the small circles. The original node-drag interactions are preserved, but the overlay also lets users select and drag nodes by clicking anywhere within their corresponding cell. Node colors encode the character’s community group, and line thickness reflects co-occurrence frequency. The Voronoi cells are recomputed on every tick, keeping the selection areas aligned with the moving nodes.

AAlainRo

81% match

Loading thumbnail…

Force-Directed Graph

This force-directed graph visualizes character co-occurrence in Victor Hugo’s *Les Misérables*, using a physical simulation to position related characters closer together. The SVG rendering employs `d3.forceSimulation` with link, charge, and center forces to calculate node positions, while link thickness reflects co-occurrence frequency. Nodes are colored by group membership, and drag interactions allow users to adjust the layout. The data comes from Donald Knuth’s compilation of character appearances.

Mmbostock

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

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