Skip to main content
SimilarExport ZIP
100%

Chord Diagram Observable Port

✓ Published0🌍 Public
CCurran Kelleher
Last edited Jul 8, 2025
Created on Jul 8, 2025
Forked from Clickable Circles

This chord diagram visualizes directed relationships among four hair-color groups using a matrix of interaction values. Built with D3 v7, it renders arcs for each group and ribbons showing bidirectional flows, with hover highlighting related chords and click-to-select filtering. The visualization uses `d3.chord`, `d3.arc`, and `d3.ribbon` generators, includes tick marks with formatted value labels, and displays tooltips on both arcs and ribbons. Data originates from a static 4x4 matrix with named groups and custom colors, ported from an Observable notebook to vanilla JavaScript.

AI-generated description

This example was ported from the original Observable: Chord Diagram II to Vanilla JavaScript using AI (Claude 4 Sonnet in VizHub AI).

An interactive chord diagram implementation using D3.js showing directed relationships among groups. This visualization is adapted from the Observable notebook and follows a unidirectional data flow pattern.

Features

  • Interactive group selection by clicking on arcs
  • Hover effects on both groups and chords
  • Responsive design that adapts to container size
  • Tooltips showing values and relationships
  • Tick marks and labels for value reference

Data Structure

The visualization uses a matrix format where each cell represents the relationship strength between groups:

MIT Licensed

Similar vizzes

Loading thumbnail…

Chord I

A chord diagram visualizes directed relationships among four entities, with ribbons showing the magnitude of flow between groups and colored arcs representing each group’s total. The layout mirrors Circos and Martin Krzywinski’s design. Built with D3 v4, the code uses `d3.chord` to compute the chord layout, `d3.arc` for the group arcs, and `d3.ribbon` for the connecting bands. Colors come from `d3.scaleOrdinal`, and tick labels are formatted via `d3.formatPrefix`, with matrix data hardcoded in the source.

MMorganhaoyu
85% match
Loading thumbnail…

Chord Diagram

This chord diagram visualizes a 4x4 matrix of directed relationships, with ribbon thickness and arc sizes encoding the numeric values. The static SVG renders using `d3.chord()`, `d3.arc()`, and `d3.ribbon()` layouts, with group ticks and formatted labels generated by `d3.formatPrefix`. Categories are assigned colors via `d3.scaleOrdinal` over a custom palette. The code defines its own `groupTicks` function to position tick marks along each arc, while ribbons are filled by target-group color with a darker stroke.

Mmbostock
84% match
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
82% match
Loading thumbnail…

Chord Diagram Using D3 (From Graph Gallery)

A chord diagram visualizes the flow of values among four named entities—Allen, Betty, Charlie, and Dennis—using a 4x4 matrix as input. The d3.v4 library renders the diagram in SVG, with colored arcs and ribbons where each ribbon’s color matches its source group. Interactive mouseover events trigger tooltips displaying the source and target names, while a fading transition animates tooltip opacity on mouseout. The chart relies on `d3.chord()` for layout, `d3.arc` and `d3.ribbon` for geometry, and inline event handlers for tooltip display.

Eethanrampersaud@gmail.com
81% match
Loading thumbnail…

Chord

This visualization uses a chord diagram to display the pairwise relationships in a 10x10 numeric matrix, with each node representing a class from a CSV file. The diagram shows ribbons connecting the nodes, where each ribbon’s color reflects the source or target node based on which has a higher value, and its opacity is fixed at 0.5. The code loads data with `d3.csv` and `d3.json`, then uses `d3.chord` to compute the chord layout, `d3.ribbon` for the connecting paths, and `d3.arc` for the outer arcs, all rendered as SVG within a React-compatible HTML page using D3 v6.

Vvivianaaai@qq.com
81% 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
81% 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
81% match
Loading thumbnail…

Chord Diagram Using Graph Gallery Edited

This chord diagram visualizes flows between three groups (Jake, Sarah, and John) using a matrix of numeric values. The code uses D3 v4’s `d3.chord()` and `d3.ribbon()` to compute and draw the arcs and ribbons, with `d3.arc()` rendering the outer group segments in distinct colors. Mouseover tooltips display source and target names via a custom HTML overlay. The visualization is rendered as static SVG with no animation, though the tooltip transition is defined but not actively bound to mouse leave.

Eethanrampersaud@gmail.com
80% match