Skip to main content
SimilarExport ZIP
100%

cord-links

✓ Published0🌍 Public
11wheel
Last edited Aug 22, 2016
Created on Jun 16, 2015

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.

AI-generated description

Similar vizzes

Loading thumbnail…

Untitled

This example shows a chord diagram visualizing flows between four groups, with colored ribbons representing connections and arcs along the outer ring marking each group's total. The code uses d3.chord() to compute group and chord angles from a hardcoded 4×4 matrix, then renders the result as SVG paths. d3.arc() draws the outer segments, while d3.ribbon() generates the linking bands, with fill colors derived from each ribbon's source group. The visualization is built with d3.v4 and embedded in a minimal HTML page.

Mmaviszv
75% match
Loading thumbnail…

Gist 939947

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.

CCaged
74% match
Loading thumbnail…

Untitled

This visualization displays a circular arc diagram of node-link data, with nodes positioned along a horizontal axis and connected by curved paths. Hovering over a node highlights it and its associated links while dimming others and enlarging its label. The code uses D3.js v4 with d3.scaleOrdinal for group colors, d3.scalePoint for x-axis positioning, and d3.scaleLinear for node sizes. It renders as an SVG, loading data from a CSV file and applying a color palette from d3-scale-chromatic.

SSRC199
74% match
Loading thumbnail…

Untitled

This example visualizes a chord diagram showing relationships between four groups, with ribbon thickness representing the magnitude of connections between them. The code uses `d3.chord()` to compute group and link data from a hardcoded 4x4 matrix, then renders the outer arcs with `d3.arc()` and the connecting ribbons with `d3.ribbon()`. Each arc and ribbon is colored based on its source group using a predefined color array. The SVG is appended to a div, centered within a 440x440 viewport, with stroke outlines on all paths for clarity.

Mmaviszv
73% match
Loading thumbnail…

Untitled

This example visualizes a chord diagram showing relationships between four groups, with ribbon thickness representing the magnitude of connections between them. The code uses `d3.chord()` to compute group and link data from a hardcoded 4x4 matrix, then renders the outer arcs with `d3.arc()` and the connecting ribbons with `d3.ribbon()`. Each arc and ribbon is colored based on its source group using a predefined color array. The SVG is appended to a div, centered within a 440x440 viewport, with stroke outlines on all paths for clarity.

Mmaviszv
73% 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
72% match
Loading thumbnail…

Untitled

This visualization displays a chord diagram representing bilateral relationships between countries, with the thickness of each chord indicating the strength of the connection. It uses d3.forceSimulation to position nodes and d3.ribbon to draw the connecting arcs, with all elements rendered as SVG. The graph supports interactive highlighting, where hovering over a group or value emphasizes the corresponding connections. Data is loaded from a hardcoded array in the source, and the visualization is built using d3.v4 and React.

JJasonXu1244
71% match
Loading thumbnail…

Chord Layout

A chord diagram displays three groups of flows, with each group’s values (`10, 20, 30`, etc.) represented as ribbons connecting around a circle. The diagram uses d3’s `d3.chord` layout to compute chord paths and `d3.ribbon` with a fixed radius of 200 to generate the curved ribbon shapes. Static example data is loaded directly from a JavaScript array, and the SVG output is styled via CSS with light fills and strokes. The visualization renders paths inside a `<g>` element translated to center the layout.

Ffloresh
71% match