Skip to main content
100%

Unipartite Larger Community Graph

✓ Published0🌍 Public
ZZoeLeBlanc
Last edited May 31, 2018
Created on May 31, 2018

This visualization displays a force-directed graph of character co-occurrence in *Les Misérables*, with names visible for each node. The graph is rendered as SVG, with nodes grouped as both circles and text labels, using D3 v4's force simulation. Node sizes reflect a value attribute, colors indicate community membership, and link widths encode connection weights. The visualization is a unipartite adaptation of Bostock's original diagram, showing all characters labeled for easier identification.

AI-generated description

A quick adaptation of Mike Bostock's force-directed graph showing character co-occurence in Les Misérables. In this version, the character names are displayed. This is accomplished by wrapping both circles and text svg components within a group svg component.

Compare to the original diagram by Mike Bostock.

forked from <a href='http://bl.ocks.org/heybignick/'>heybignick</a>'s block: <a href='http://bl.ocks.org/heybignick/3faf257bbbbc7743bb72310d03b86ee8'>D3.js v4 Force Directed Graph with Labels</a>

forked from <a href='http://bl.ocks.org/ZoeLeBlanc/'>ZoeLeBlanc</a>'s block: <a href='http://bl.ocks.org/ZoeLeBlanc/25dffd0935ab26bf3235b8226c32a8bc'>Bipartite Graph</a>

forked from <a href='http://bl.ocks.org/ZoeLeBlanc/'>ZoeLeBlanc</a>'s block: <a href='http://bl.ocks.org/ZoeLeBlanc/80631e045340d4dc26995227c5a5fc85'>Bipartite Community Graph</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Unipartite Larger Community Graph

This visualization is a force-directed network graph showing co-occurrence relationships among people and topics, adapted from Mike Bostock's original *Les Misérables* character graph. The unipartite layout presents all nodes uniformly, with each node representing either a person (e.g., Zoe, Paul) or a topic (e.g., "blogging", "data visualization"). Node size encodes a value attribute, and color encodes community membership via a categorical scale. Labels for every node are displayed by grouping each circle and its text label within an SVG group, with a force simulation controlling layout and drag interactions for manual repositioning. Link stroke widths are proportional to connection weight. The graph is rendered in SVG using D3 v4.

ZZoeLeBlanc
91% 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
87% 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
87% match
Loading thumbnail…

Force-Directed Graph

This force-directed graph visualizes character co-occurrence in Les Misérables, grouping related characters into proximity while separating unrelated ones. Drawn as SVG circles and lines, nodes are colored by group and links weighted by interaction frequency. The data, compiled by Donald Knuth and stored in `miserables.json`, drives a `d3.forceSimulation` with link, charge, and center forces. Interactive dragging is enabled via `d3.drag`, while node positions update on each simulation tick.

NNate-Holland
86% match
Loading thumbnail…

Metis Class Les Miserables Force Layout

This example visualizes the co-occurrence network of characters in *Les Misérables* as a force-directed graph. Nodes represent characters, colored by their group membership, while links show relationships between characters. Built with D3 v4, the visualization uses a force simulation with link and many-body repulsive forces to position the nodes. The SVG circles and lines update their positions on each tick of the simulation, creating a dynamic layout of the character network. The graph is rendered at 500 by 500 pixels with a categorical color scale distinguishing character groups.

EElaineYu
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
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
86% match
Loading thumbnail…

Graph for picture taking

This force-directed graph visualizes character co-occurrence in *Les Misérables*, showing how often pairs of characters appear together. The D3 `d3.forceSimulation` API positions related characters closer together while repelling unrelated ones, with link stroke width reflecting co-occurrence frequency. Nodes are colored by cluster and rendered as SVG circles, with tooltips showing character names. The layout uses D3 v4 forces including `forceManyBody`, `forceLink`, and `forceCenter`, with drag interactions enabled via `d3.drag`. Data comes from Donald Knuth’s compiled character co-appearances.

MMNoichl
86% match