Skip to main content
100%

Bipartite Larger Community Graph

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

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.

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…

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
89% 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
82% 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
81% match
Loading thumbnail…

Force-Directed Graph hierarchy

A hierarchical force-directed graph displays clustered communities as large nodes, with links connecting them at the top level. Clicking a community navigates to a subgraph of its member nodes, rendered via `d3.forceSimulation`, `forceLink`, and `forceManyBody`. The SVG visualization uses `scaleOrdinal` for node positioning and zoom/pan via `d3.zoom`. Data is parsed from a fetched text file using `parseGraphDataset`, with node and link stroke properties scaled by link weight.

KKhanin Sisaengsuwanchai
79% match
Loading thumbnail…

Force-Directed Graph

A force-directed graph displays 13 nodes and 18 links, using a physical simulation to position the circles and lines in an organic, interconnected layout. The D3 v3 code constructs an SVG scene with `d3.layout.force`, applying a negative charge to repel nodes and a tick handler to update the `x`, `y`, `cx`, and `cy` attributes of the line and circle elements. The graph’s structure is defined by a hard-coded nodes array and links array, representing an abstract network for the visualization.

Mmbostock
78% match
Loading thumbnail…

graph

This example shows a force-directed graph of interconnected arts organizations, with four main groups—Arts Web, Social Impact Commons, Community Arts Stabilization Trust, and AmbitioUS—each linked to child nodes and leaf nodes. The visualization uses D3 v6’s `forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` to layout nodes, while `drag` enables interactive repositioning. Node sizes vary by hierarchy level (main, child, leaf), and link distances are customized per connection. The data is defined in a separate `data.js` module, and the rendering draws colored circles, links, and text labels directly in an SVG container.

BBrooke Joseph
78% match
Loading thumbnail…

Force-Directed Graph V2

This force-directed graph maps a network of arts organizations and their related projects, with nodes grouped into four color-coded clusters and connected by weighted links. The visualization uses D3’s `forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` to position nodes, while a drag interaction lets users move nodes and restart the simulation. Node sizes vary by hierarchy level, and labels appear directly on nodes as SVG text. Data is generated programmatically in `data.js`, with link distances and node styling defined per connection.

Sschneich
77% 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
77% match