100%

Force Directed with Voronoi selection

✓ Published0🌍 Public

Last edited Oct 6, 2017

Created on Oct 5, 2017

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.

AI-generated description

Force Directed with Voronoi selection

This is a fork of <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/4062045'>Force-Directed Graph</a> where I've added a voronoi overlay. This could have a practical use by not having to click directly on a node in order select it and drag it.

<br><br> From the original block:

This simple force-directed graph shows character co-occurence in Les Misérables. A physical simulation of charged particles and springs places related characters in closer proximity, while unrelated characters are farther apart. Layout algorithm inspired by Tim Dwyer and Thomas Jakobsen. Data based on character coappearence in Victor Hugo's Les Misérables, compiled by Donald Knuth.

Compare this display to a force layout with curved links, a force layout with fisheye distortion and a matrix diagram.

forked from <a href='http://bl.ocks.org/alexmacy/'>alexmacy</a>'s block: <a href='http://bl.ocks.org/alexmacy/15962e97f7a9ebacd55710bf277593d4'>Force-Directed Voronoi Graph</a>

Similar vizzes

Loading thumbnail…

Force-Directed Voronoi Graph

A force-directed graph of character co-occurrence in *Les Misérables* shows relationships between characters, with a Voronoi overlay partitioning the space around each node. The code uses `d3.forceSimulation` to position nodes and `d3.voronoi` to compute polygon cells that update on each tick. Nodes and links render as SVG circles and lines, with polygons filling areas by group color. Users can drag any polygon or circle to move its associated node. Data comes from the `miserables.json` file.

AAndresAnayaIsaza

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

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

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

85% match

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

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

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

85% match

Loading thumbnail…

Fork of Node2Vec Force-Directed Graph

This example shows a force-directed graph of character co-occurrences in the novel *Les Misérables*, with nodes colored randomly by group and labeled with character names. The code uses D3 v7’s `forceSimulation`, `forceLink`, `forceManyBody`, and `forceCenter` to layout the network, while `drag` and `zoom` enable interaction. Data is fetched from a remote `miserables.json` file, and the SVG rendering includes links as lines and nodes as circles with text labels.

Rrobinjohn.inc@gmail.com

85% match