Skip to main content
100%

Bipartite Graph

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

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.

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>

gpl-3.0 Licensed

Similar vizzes

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
91% 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
83% 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
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
77% 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
77% match
Loading thumbnail…

d3 node-link diagram (soc dataset)

This example visualizes the Zachary Karate Club network, a social graph of 34 members, using a force-directed node-link diagram. Nodes represent individuals and links represent friendships, with interactive features allowing users to hover over nodes to view IDs and neighbors, or drag nodes to reposition them. The visualization is built with D3 v7, using `d3.forceSimulation` for physics-based layout, `d3.forceLink` and `d3.forceManyBody` for forces, and `d3.drag` for node interaction. Data comes from a CSV file loaded via `d3.csv`, with edges and nodes rendered as SVG lines and circles.

AAndrew
76% match
Loading thumbnail…

SNA Graph

This network graph visualizes the affiliations between people and organizations at the University of Virginia, using a force-directed layout with SVG rendering. Each node represents either an individual or an organizational unit, while edges encode membership or association relationships derived from the provided CSV data. The graph is built with D3 v4, with nodes positioned by a simulated physical force and links drawn as straight lines between connected entities. This example demonstrates how a simple tabular edge list can be transformed into an interactive network visualization to explore connections across digital humanities scholars, departments, and research centers at UVA.

ZZoeLeBlanc
76% match
Loading thumbnail…

React D3 Force With Labels

This interactive force-directed graph visualizes relationships between people and database concepts, with nodes colored by category and labeled links showing connection types. Built with React and D3 v4, it uses `d3.forceSimulation` with charge, center, and collision forces to position nodes. Clicking a node highlights its immediate connections by dimming unrelated elements, implemented through React lifecycle methods and D3 selections that update circle and line opacity. The data loads from a local JSON file containing named nodes and typed links.

ZZoeLeBlanc
76% match