Unipartite Larger Community Graph

100%

Unipartite Larger Community Graph

✓ Published0🌍 Public

Last edited May 31, 2018

Created on May 31, 2018

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.

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 Larger Community Graph</a>

gpl-3.0 Licensed

Similar vizzes

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

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

88% match

Loading thumbnail…

Bipartite Graph

This bipartite graph visualizes relationships between individuals and universities using a force-directed layout in D3 v4. Nodes are rendered as colored circles (grouped by category) with labels displayed alongside, implemented by wrapping circles and text in SVG groups. Links show connections between people and institutions, with simulation forces including charge, center, x, and y positioning. The visualization is adapted from Mike Bostock's Les Misérables co-occurrence graph, extended here to show node labels and support drag interactions. Data is loaded from a JSON file containing people and universities, with force-directed positioning and draggable nodes.

ZZoeLeBlanc

83% match

Loading thumbnail…

Unipartite Community Graph

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.

ZZoeLeBlanc

82% match

Loading thumbnail…

Bipartite Larger Community Graph

A bipartite force-directed graph displays two groups of nodes—people and topics—connected by links, with nodes colored by community. The graph uses D3 v4’s `d3.forceSimulation` with link, charge, and centering forces, and renders SVG circles and text labels within grouped nodes. The code loads data from a JSON file and supports dragging interaction to reposition nodes.

ZZoeLeBlanc

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…

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…

Matrix diagram

This matrix diagram visualizes co-occurrence relationships among characters from Les Misérables, with rows and columns ordered and colored by community structure identified through Louvain modularity. Each cell’s color intensity reflects the frequency of character interactions, while light gray indicates no interaction. Rendered as an SVG using D3 v4, the diagram groups characters into colored communities along both axes, making clustered relationships readily apparent. Compared to node-link diagrams, which often become unreadable "hairballs" in dense networks, the matrix format is simpler and easier to scan—though its readability depends heavily on the ordering of rows and columns, and tracing multi-step paths between nodes is difficult. With very large graphs, fitting hundreds or thousands of labeled rows and columns on screen becomes a challenge. The data come from a JSON file of academic alumni, with nodes representing people and departments, edges representing affiliations, and communities determined by Louvain modularity.

ZZoeLeBlanc

79% match