Gist 9cf3726653a19fb89c2574bdde940323

100%

Gist 9cf3726653a19fb89c2574bdde940323

✓ Published0🌍 Public

Last edited Jul 23, 2018

Created on Jul 23, 2018

This example visualizes the character co-occurrence network from *Les Misérables*, grouping nodes by community and bundling edges to reveal hierarchical structure. It adapts an Observable notebook to run directly in a browser via a JavaScript module, loading data with `d3-require`. Using `d3.cluster` for layout and `d3.radialLine` with `d3.curveBundle`, it draws curved paths between characters with a steelblue, semi-transparent stroke and multiply blending. Labels are rotated and positioned radially around the 640-pixel square SVG.

AI-generated description

A demonstration of repurposing code from an Observable notebook without Observable’s reactive runtime.

Similar vizzes

Loading thumbnail…

Gist 524f4fcde9f1a572fcb66439053a99d1

A radial hierarchical edge bundling diagram visualizes the Les Misérables character co-occurrence network, grouping nodes into a two-level hierarchy by numbered communities. Curved steel-blue paths link each character to their targets, using `d3.radialLine` with a bundled curve and `d3.cluster` for circular leaf placement. Labels rotate around the circumference, and the code’s data structure maps group children and target IDs before rendering with D3 v5 selections.

Mmbostock

86% match

Loading thumbnail…

Untitled

This example visualizes the character co-occurrence network from *Les Misérables* as a force-directed graph. Nodes represent characters, colored by group, with links sized by interaction weight. The visualization uses D3 v4’s `d3.forceSimulation` with link, charge, and center forces to position elements, while SVG circles and text render the nodes and labels. Data loads from a local `miserables.json` file, and nodes support dragging via `d3.drag`.

NNathannous

82% match

Loading thumbnail…

Gist 5776628

This force-directed graph visualizes character co-occurrence in Victor Hugo’s *Les Misérables*, using D3’s `d3.layout.force` to simulate charged particles and spring-like links. Nodes represent characters, colored by `d.group` via a categorical scale, while link thickness encodes co-occurrence strength (`Math.sqrt(d.value)`). SVG circles and lines update positions on each tick, with drag and zoom support for interaction. The layout algorithm, inspired by Tim Dwyer and Thomas Jakobsen, spatially clusters related characters. Data derives from Donald Knuth’s Stanford GraphBase compilation of character co-appearances.

11wheel

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

81% match

Loading thumbnail…

D3.js v4 Force Directed Graph with Labels

This force-directed graph visualizes character co-occurrence in *Les Misérables*, adapted from Mike Bostock’s original with added permanent labels. Each character is represented by a circle colored by group via an ordinal scale, and a text label is placed beside it by grouping both elements inside a shared SVG `<g>` container. Node positions are computed with D3 v4’s force simulation, including link, charge, and centering forces, with drag behavior to reposition nodes. Edge thickness encodes co-occurrence strength, and labels update in place as the simulation runs, making the network easier to explore than the unlabeled original.

GGerardoFurtado

81% match

Loading thumbnail…

Clustered Network

A clustered network of character co-occurrences from Les Misérables is visualized using D3’s force layout with SVG rendering. Nodes represent characters, grouped by community, while edges show coappearance weights. The animation supports interactive expansion and collapse of clusters via clicks, with a slider for debug levels and force parameters. Grid-based collision avoidance is attempted through position quantization, though the README notes this failed to improve layout stability.

GGerHobbelt

81% match

Loading thumbnail…

Untitled

A force-directed network graph of character co-appearances from *Les Misérables* is shown. The layout separates nodes by community group with color, and hovering a node highlights only that node's neighborhood, dimming other links and text labels. The code uses `d3.forceSimulation` for both the main graph and a secondary label layout, plus `d3.drag`, zoom via `d3.zoom`, and SVG circles and lines. Node labels are positioned with a custom spring-like offset calculation based on text bounding boxes.

Ssgzzhinde

81% match

Loading thumbnail…

TP 6 DataViz

This example visualizes the co-occurrence network of characters in *Les Misérables*, using D3 v4’s force-directed simulation. Nodes represent individual characters, colored by their group, while links show relationships weighted by their value. The graph is rendered as SVG circles and lines, with node labels available via tooltips. The simulation includes charge and center forces, and nodes are draggable. The data is loaded from a local JSON file, and the tick function is present but commented out, meaning the layout is computed but node/link positions are not updated on screen—a possible bug in the example.

JJulesSauvinet

81% match