Gist 939947

100%

✓ Published0🌍 Public

Last edited Apr 26, 2011

Created on Apr 24, 2011

This example shows a small social network as a circular chord diagram, mapping five people (Jane, Sue, Sally, Tom, and Bob) and their connections between slices of an inner ring. The visualization displays the network structure first, then reveals the mechanics: data is hard-coded in a JavaScript array, with each person assigned an angular band. Using D3’s ordinal scale and SVG arc generator for the ring segments, the code draws chords via the d3.svg.chord API, connecting midpoints of arcs to represent each directed relationship. Labels are placed using arc.centroid, and the entire graphic is rendered in a 300×300 SVG within an HTML page, with path styling controlled by CSS.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 939901

The visualization displays a small directed graph of four people—bob, jane, sue, and tom—with their named connections drawn as curved arcs. Each person appears as a colored arc segment arranged in a circle, while the connections between them are shown as thin, curved paths that originate from the segment of the source person and end at the target person’s segment. The code builds this using an ordinal scale to map each person to an angular band, then constructs arc paths with `d3.svg.arc()` for the segments and `d3.svg.diagonal()` for the connection curves, both rendered in a centered SVG group. The data is a hardcoded JavaScript array, and the visualization uses only D3’s core SVG helpers without any simulation or layout engine.

CCaged

84% match

Loading thumbnail…

Radial Arc Diagram

An interactive radial arc diagram displays a small network of four people—Bob, Jane, Sue, and Tom—arranged in a circle, with curved paths connecting each person to their listed connections. The visualization loads data from a local JSON file and renders nodes as circles with labels, using d3.scale.ordinal with rangePoints to position them angularly around a central point. Each link is drawn as an arc using a custom curve function that calculates chord lengths, while node labels flip orientation when positioned on the left side of the circle. The code relies on d3.json for data loading and SVG elements with D3’s enter/update selections.

Mmbostock

79% match

Loading thumbnail…

Social Network

A social network diagram displays twelve named individuals as circles, grouped into five clusters, with connecting lines representing weighted links between them. The visualization uses D3’s force layout to position nodes and edges, with link thickness scaled to the square root of the connection weight. Nodes are rendered as green circles with crimson outlines and labeled with names, while pink lines show relationships. The example loads data from a local JSON file and relies on D3 v4’s `d3.layout.force` and drag behavior to create the interactive, SVG-based graph.

TTejaswi@3271

75% match

Loading thumbnail…

cord-links

Three concentric arcs of labeled rectangles represent events, people, and places, with chord links drawn between them. The visualization shows how a single event connects to the people and places associated with it. Hovering over an event highlights its connections with animated bezier curves, while hovering over a person or place highlights their associated events. The example is rendered as an SVG with D3.js and uses procedural data generation to create the node groups and their links.

11wheel

74% match

Loading thumbnail…

Social Network Graph with d3.js

This example displays a small social network of five people—John, Alice, Bob, Emily, and Michael—as a node-link diagram rendered in SVG. The graph shows connections between individuals as green links, with each person represented by a large light-green circle and a text label. The layout is computed using d3.forceSimulation with link, charge, collision, and centering forces, while d3.drag enables interactive repositioning of nodes. Hovering over a node triggers a class change to color it steelblue.

VVinay Vemuri

74% match

Loading thumbnail…

Social Network Graph

This visualization shows a small social network with five nodes (Alice, Bob, Charlie, Eve, and David) connected by friendship links. The graph is rendered as SVG elements styled with CSS, using D3.js v6’s `d3.forceSimulation` with link, charge, and center forces to position nodes dynamically. Each node displays a blue circle and a text label, while links appear as gray lines that update positions on every tick via the simulation’s tick event.

BBhavanaGIrni

74% match

Loading thumbnail…

SOCIAL NETWORK

A social network diagram displays ten named people as blue circular nodes connected by red lines, with link thickness proportional to each connection’s weight. The force-directed layout, created with `d3.layout.force`, positions nodes using gravity, charge, and distance parameters while supporting drag interaction. Data comes from an external `network.json` file containing node names and weighted links. The visualization renders in SVG, with node labels styled in red and lime text, and red strokes on both circles and links.

VVineela Reddy

74% match

Loading thumbnail…

Social Network Graph

A social network graph displays five people as circular nodes connected by five undirected edges, with labels identifying each person. The visualization uses D3 v5’s `d3.forceSimulation` with `d3.forceManyBody`, `d3.forceLink`, and `d3.forceCenter` to position nodes and links dynamically. Hardcoded data defines the nodes and links, and the SVG container updates on each simulation tick to draw lines, circles, and text labels.

UUVarshaReddy

73% match