Unipartite Community Graph

100%

Unipartite Community Graph

✓ Published0🌍 Public

Last edited May 31, 2018

Created on May 31, 2018

This interactive force-directed graph visualizes character co-occurrence in Game of Thrones, adapted from Mike Bostock's Les Misérables example. Nodes represent individual characters, with each node's fill color indicating its community membership as determined by the data’s community attribute. Edges connect characters that appear together. Unlike the original, this version labels every character directly on the graph by wrapping each circle and text label in a shared SVG group, making it easy to identify who is who. The layout uses d3.v4's force simulation to position nodes, with the simulation dynamically adjusting as users drag nodes around. Character labels are drawn from the dataset and move with their associated circles. The graph is rendered with SVG, using color to distinguish community clusters and enable quick visual inspection of group structure.

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>

forked from <a href='http://bl.ocks.org/ZoeLeBlanc/'>ZoeLeBlanc</a>'s block: <a href='http://bl.ocks.org/ZoeLeBlanc/00123a7aa2b8d4016a63a62ce3d64af0'>Unipartite Community Graph</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Game of Thrones Co-occurrence

This visualization displays a force-directed network of 43 Game of Thrones characters, with nodes grouped by narrative affiliation and links sized by co-occurrence frequency from the show’s scripts. Built with D3 v4, the SVG animation renders an interactive matrix that encodes interaction strength as link thickness, while colored node clusters reveal character communities. The visualization is constructed from a JSON dataset of character relationships, using a physics simulation to layout the network and animate it into view.

ZZoeLeBlanc

84% match

Loading thumbnail…

Unipartite Larger Community Graph

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.

ZZoeLeBlanc

84% match

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

82% match

Loading thumbnail…

Game of Thrones Interactions Web

A force-directed network graph maps character co-occurrence in *Game of Thrones*, with line thickness proportional to interaction frequency above a threshold of 55. Node colors represent character groups, and labels identify each figure. Built with D3 v4, the visualization uses `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to position nodes, while SVG circles and lines render the network. Data comes from the included `GoT_interactions_draft.json` file.

LLichtphyz

81% match

Loading thumbnail…

Bipartite Community Graph

This bipartite force-directed graph visualizes connections between people and institutions, with nodes colored by community and labeled with their names. The network layout is computed using D3 v4's force simulation, applying link, charge, and centering forces. Nodes are rendered as small circles with adjacent text labels, created by wrapping circle and text elements in SVG groups, while links are drawn as gray lines. The data shows relationships among individuals and universities, with node color encoding community membership and node position determined by the simulation. Users can drag nodes to rearrange the network, and the visualization updates in real time. This example adapts Mike Bostock's classic force-directed graph of character co-occurrence in *Les Misérables* to display a bipartite network of people and institutions.

ZZoeLeBlanc

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

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

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

79% match