Skip to main content
SimilarExport ZIP
100%

PivotGraph (Rollup) Layout

✓ Published0🌍 Public
Mmbostock
Last edited Feb 9, 2016
Created on Dec 20, 2012

This example demonstrates the PivotGraph rollup layout, which collapses a small social network into aggregate nodes positioned along two categorical axes: gender and group. The visualization shows grouped circles scaled by their node counts, while curved links between them represent aggregated connections with stroke widths proportional to link value. The code uses d3.rollup with ordinal scales to map categories to x and y positions, and d3.svg.axis to display the axes. Rendering occurs in SVG with the data loaded from social.json.

AI-generated description

The d3.rollup plugin implements the “PivotGraph” technique for collapsing large graphs along categorical dimensions, as described by Martin Wattenberg in Visual Exploration of Multivariate Graphs.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Fork of GraphLayout

This visualization displays a network graph with nodes colored across a red-yellow-green ordinal scale based on a categorical value in the data, while edges connect the nodes to reveal clustering patterns. The code loads node positions and edge lists from separate CSV files, then renders circles and lines as SVG elements. It utilizes d3.scaleOrdinal with schemeRdYlGn for coloring, and includes a zoom behavior that applies transforms to the graph group for interactive panning.

Ppauldbayes@gmail.com
72% match
Loading thumbnail…

Social Network graph

This social network graph visualizes a small set of named individuals organized into four groups, with links between them representing connections of varying weight. The nodes are rendered as circles with lightgreen fills and labels, while links appear as black lines whose stroke width scales with the square root of each link’s weight. The layout is driven by d3.layout.force, which applies gravity, distance constraints, and charge to position nodes, and users can drag nodes interactively. The SVG is generated dynamically from the graph.json data file using d3.v4 and d3.v2 APIs.

LLG0498
71% match
Loading thumbnail…

Social Network graph

A social network graph displays nine named individuals as nodes grouped by color-coded categories, with weighted links connecting them by relationships. The visualization uses a force-directed layout via `d3.layout.force` to position nodes, with link stroke-width scaled by the square root of the connection weight. Node circles are styled with blue fills and pink stroke, while purple links and text labels are rendered as SVG elements defined in CSS. Data comes from an external `graph.json` file containing node names, group assignments, and weighted edge pairs, and nodes support dragging through the force layout's drag behavior.

Aadapavaishnavi12
71% match
Loading thumbnail…

Social Media Network Group graph

This example visualizes a small social media network as a force-directed group graph, showing connections between named individuals across three groups. It loads node and link data from a JSON file using `d3.json`, and applies `d3.layout.force` with gravity, distance, and charge parameters to position nodes in an SVG canvas. Circles represent people, labeled with their names, and green links with stroke widths proportional to link weight show relationships. Nodes are draggable via `force.drag`, and the tick handler updates link coordinates and node transforms in real time.

Kkirangithub23
71% match
Loading thumbnail…

Fork of Social_Network_graph_ICE-8

This example displays a small social network of nine named individuals grouped into five categories, with weighted links connecting them. It uses the D3.js library, specifically `d3.layout.force`, to simulate the network layout, rendering nodes as blue circles with red labels and edges as black lines whose thickness varies with link weight. The visualization is drawn as an SVG element and loads data from a local JSON file, allowing nodes to be dragged interactively via `force.drag`.

Aadapavaishnavi12
70% match
Loading thumbnail…

Network Graph

A social network graph renders a set of named individuals as circular nodes connected by directional links, with arrowheads indicating the relationship direction. The layout is computed using the `d3.forceSimulation` API, which applies link, charge, collision, and centering forces to position the nodes dynamically. Nodes are draggable via D3's `d3.drag` behavior, and colors highlight hovered nodes. The visualization loads data from a local `graph.json` file and draws the SVG scene with D3 v6.

Mmn0658
70% match
Loading thumbnail…

Social Network Graph

A social network graph visualizes six people connected by weighted links, with each person represented as a pink circle labeled by name. The force-directed layout positions nodes dynamically, and link stroke widths reflect relationship weights. The example uses d3.v4 with the legacy `d3.layout.force` API to simulate physics and render an SVG, loading data from the `graphFile.json` file. Nodes are draggable, and the tick handler updates link coordinates and node transforms.

Ssiddu7147
70% match
Loading thumbnail…

Network chart

This network chart visualizes a small social graph of seven individuals across four groups, with links between them weighted to indicate relationship strength. The visualization uses a force-directed layout to position nodes, with each node rendered as a circle accompanied by a text label. The code employs the `d3.layout.force` API from D3 v4 to simulate the physical forces that arrange the nodes, and users can click and drag nodes to reposition them. Links are drawn as lines with stroke widths proportional to the weight data from the `graphFile.json` source, and the SVG canvas is styled with a tan background and green node circles.

Eeravellisaimeghana
69% match