Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Chord Diagram Using D3 (From Graph Gallery)

Public visualization

Chord Diagram Using D3 (From Graph Gallery)

0 stars1🌍 Public
Eethanrampersaud@gmail.com
Last edited Aug 14, 2025
Created on Aug 14, 2025

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.

AI-generated description

Comments

Sign in to join the discussion.

MIT Licensed