Skip to main content
100%

Force-Directed Graph with hidden Voronoi

✓ Published0🌍 Public
Aalexmacy
Last edited Jan 26, 2017
Created on Jan 26, 2017

This force-directed graph visualizes character co-occurrence in *Les Misérables*, using a D3 v4 simulation to position related characters closer together. An invisible Voronoi overlay is applied over the nodes, so clicking anywhere in the diagram selects and drags the nearest character, rather than requiring a precise click on the node. The graph is rendered as SVG with colored circles for characters and gray links for co-occurrences, and the Voronoi polygons are hidden to improve the dragging experience.

AI-generated description

This is another version of this block: <a href='http://bl.ocks.org/alexmacy/15962e97f7a9ebacd55710bf277593d4'>Force-Directed Voronoi Graph</a>, but with the polygons hidden. This is an experiment in making it easier to drag the nodes. Clicking anywhere selects the closest node instead of having to click directly on the node.

<br> From the previous block:

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

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Force-Directed Voronoi Graph

This force-directed graph visualizes character co-occurrence in Victor Hugo’s *Les Misérables*, with a Voronoi overlay added to the classic D3 example. A physical simulation of charged particles and springs positions related characters closer together, while the Voronoi tessellation partitions the space around each node, so that any point in the plane can be associated with the nearest character. This makes it easier to select and drag nodes without having to click directly on them. Each character is drawn as a small circle colored by group, with translucent Voronoi cells and gray links representing co-occurrence strength. The visualization uses d3.v4, renders to SVG, and was forked from Mike Bostock’s Force-Directed Graph. Drag any node to reposition it; the simulation and Voronoi cells update live. Data based on character co-appearance in Victor Hugo's *Les Misérables*, compiled by Donald Knuth.

Aalexmacy
94% 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
92% match
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
91% 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
90% 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
90% 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 of charged particles and springs to arrange related characters closer together and unrelated characters farther apart. Each node represents a character, colored by group, and links depict co-occurrence with stroke width proportional to connection strength. Built with D3 v4, the visualization uses SVG rendering and supports interactive dragging of nodes. The data is based on Donald Knuth’s character co-occurrence compilation.

Aakollegger
89% 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
89% 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
89% match