https://www.visualizing.org/assets/ChordDiagram-KhwRABWH.js

1import{j as e,L as i}from"./vendor-react-CVijXI0n.js";import{S as n,b as c,h as d,a as l}from"./index-D0o2Sutv.js";import{C as h}from"./ChartBreadcrumb-BOBTh6lg.js";import{C as x,b as m}from"./ChartFAQ-DwXxlpIj.js";const r="https://www.visualizing.org",o=[{q:"What is a chord diagram?",a:"A chord diagram is a circular visualization used to display relationships and flows between entities arranged around a ring. Each entity is represented as an arc segment on the circle, and connections between entities are drawn as curved bands (chords) that span across the interior of the circle."},{q:"When should you use a chord diagram?",a:"Use a chord diagram when showing flows or relationships between a set of entities (trade, migration, communication). It also works well when your data is a square matrix of mutual connections, and when you have fewer than ~10–12 entities to keep the diagram readable."},{q:"When should you avoid a chord diagram?",a:"Avoid a chord diagram when you have more than 12–15 entities — chords become impossible to distinguish. It is also a poor fit when your audience is not familiar with circular layouts — use a simpler network chart, or when you need to show hierarchical structure — use a tree or Sankey diagram."},{q:"Is a chord diagram suitable for dashboards?",a:"Yes — a chord diagram can work well in dashboards as long as the panel is large enough for readers to perceive the encoded values, has a clear title, and includes the legend or axis labels needed to interpret it."},{q:"What category of chart is a chord diagram?",a:"Chord Diagram belongs to the Network family of charts. Charts in that family are designed to answer the same kind of question, so they often work as alternatives when one doesn't quite fit your data."},{q:"How do you read a chord diagram?",a:"Start with the axis labels and legend, then look at the overall shape before zooming into individual marks. Compare prominent features against the rest of the data, and verify any conclusion against the underlying numbers when precision matters."}],p=m("/chord-diagram",o),g={"@context":"https://schema.org","@graph":[{"@type":"WebPage","@id":`${r}/chord-diagram/#webpage`,url:`${r}/chord-diagram`,name:"Chord Diagram — The Definitive Guide",description:"Learn what a chord diagram is, how to read one step by step, when to use chord diagrams vs other chart types, and common mistakes to avoid.",isPartOf:{"@id":`${r}/#website`},breadcrumb:{"@id":`${r}/chord-diagram/#breadcrumb`},mainEntity:{"@id":`${r}/chord-diagram/#article`},inLanguage:"en"},c({slug:"/chord-diagram",caption:"Example chord diagram",width:620,height:280}),{"@type":["Article","LearningResource"],"@id":`${r}/chord-diagram/#article`,mainEntityOfPage:{"@id":`${r}/chord-diagram/#webpage`},headline:"Chord Diagram: Definition, How to Read, and When to Use",description:"A complete reference guide to chord diagrams — what they are, how to interpret them, when to use them, and common mistakes to avoid.",image:{"@id":d("/chord-diagram")},datePublished:"2025-06-01",dateModified:"2026-06-01",publisher:{"@id":`${r}/#organization`},inLanguage:"en",educationalLevel:"intermediate",learningResourceType:"reference",teaches:["How to read and interpret chord diagrams","When to use chord diagrams for network visualization","Common chord diagram mistakes and how to avoid them"],competencyRequired:"Basic understanding of networks and relationships",timeRequired:"PT12M",isAccessibleForFree:!0,audience:{"@type":"EducationalAudience",educationalRole:"student"},about:{"@id":`${r}/chord-diagram/#term`},keywords:["chord diagram","data visualization","network chart","flow visualization","circular layout"]},{"@type":"DefinedTerm","@id":`${r}/chord-diagram/#term`,name:"Chord Diagram",description:"A circular visualization that shows the inter-relationships and flows between entities arranged around a ring. Arcs (chords) connect segments on the circle, with their thickness proportional to the magnitude of the connection.",inDefinedTermSet:{"@id":`${r}/chart-types/#termset`},termCode:"chord-diagram",url:`${r}/chord-diagram`,sameAs:"https://en.wikipedia.org/wiki/Chord_diagram_(information_visualization)"},{"@type":"DefinedTermSet","@id":`${r}/chart-types/#termset`,name:"Data Visualization Chart Types",url:`${r}/chart-types`},l("/chord-diagram"),p]},b=[{id:"the-chart",label:"The chart"},{id:"what-is-it",label:"What is it?"},{id:"anatomy",label:"Anatomy"},{id:"when-to-use",label:"When to use it"},{id:"how-to-read",label:"How to read it"},{id:"common-mistakes",label:"Common mistakes"},{id:"real-world-examples",label:"Real-world examples"},{id:"key-facts",label:"Quick reference"},{id:"variations",label:"Variations"},{id:"faqs",label:"FAQs"},{id:"related-charts",label:"Related charts"}];function y(){return e.jsxs(e.Fragment,{children:[e.jsx(n,{title:"Chord Diagram: Definition, Examples & How To Make One",description:"What is a chord diagram? Learn when to use it, how to read one, common pitfalls, real examples, and tools to build it (Excel, P

1ython, D3).",path:"/chord-diagram",ogType:"article",jsonLd:[g]}),e.jsx(h,{slug:"/chord-diagram"}),e.jsxs("div",{className:"max-w-[1100px] mx-auto px-6 md:px-12",children:[e.jsxs("div",{className:"py-[56px] pb-[48px] border-b border-[var(--border-color)]",children:[e.jsxs("div",{className:"flex items-center gap-3 mb-5",children:[e.jsx("span",{className:"font-mono text-[10px] tracking-[0.12em] uppercase bg-[var(--accent-light)] text-[var(--accent-color)] px-[10px] py-[4px] rounded-[3px] font-medium",children:"Network"}),e.jsx("span",{className:"font-mono text-[10px] tracking-[0.10em] uppercase bg-[var(--bg-alt)] text-[var(--ink-muted)] px-[10px] py-[4px] rounded-[3px]",children:"Intermediate"})]}),e.jsx("h1",{className:"font-serif text-[42px] md:text-[52px] font-normal tracking-[-0.025em] leading-[1.1] text-[var(--ink)] mb-4",children:"Chord Diagram"}),e.jsx("p",{className:"text-[17px] md:text-[19px] font-light text-[var(--ink-muted)] leading-[1.6] max-w-[640px]",children:"A circular visualization that reveals relationships and flows between interconnected entities — the thicker the chord, the stronger the connection."})]}),e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-[1fr_280px] gap-16 pt-12 items-start",children:[e.jsxs("div",{className:"min-w-0",children:[e.jsxs("section",{className:"py-14 border-b border-[var(--border-color)]",id:"the-chart",children:[e.jsx("p",{className:"font-mono text-[10px] tracking-[0.14em] uppercase text-[var(--accent-color)] mb-3",children:"// 01 — The chart"}),e.jsx("h2",{className:"font-serif text-[28px] md:text-[30px] font-normal tracking-[-0.02em] text-[var(--ink)] mb-6 leading-[1.2]",children:"What it looks like"}),e.jsxs("div",{className:"bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[12px] p-6 md:p-10 mt-8 mb-2",children:[e.jsxs("div",{className:"font-mono text-[10px] tracking-[0.10em] uppercase text-[var(--ink-faint)] mb-6 flex justify-between items-center",children:[e.jsxs("span",{children:["Example — ",e.jsx("em",{className:"not-italic text-[var(--accent-color)] font-medium",children:"Trade flows between regions"})]}),e.jsx("span",{children:"2024"})]}),e.jsx("svg",{viewBox:"0 0 400 400",xmlns:"http://www.w3.org/2000/svg",className:"w-full block max-w-[400px] mx-auto",children:e.jsxs("g",{transform:"translate(200,200)",children:[e.jsx("path",{d:"M0,-160 A160,160 0 0,1 138.56,80",fill:"none",stroke:"#c94a2e",strokeWidth:"18",strokeOpacity:"0.25"}),e.jsx("path",{d:"M138.56,80 A160,160 0 0,1 -138.56,80",fill:"none",stroke:"#2e7d52",strokeWidth:"18",strokeOpacity:"0.25"}),e.jsx("path",{d:"M-138.56,80 A160,160 0 0,1 0,-160",fill:"none",stroke:"#6b6b67",strokeWidth:"18",strokeOpacity:"0.25"}),e.jsx("path",{d:"M10,-148 Q0,0 128,68",fill:"none",stroke:"#c94a2e",strokeWidth:"14",strokeOpacity:"0.3"}),e.jsx("path",{d:"M-10,-148 Q0,0 -128,68",fill:"none",stroke:"#6b6b67",strokeWidth:"8",strokeOpacity:"0.25"}),e.jsx("path",{d:"M126,82 Q0,20 -126,82",fill:"none",stroke:"#2e7d52",strokeWidth:"10",strokeOpacity:"0.25"}),e.jsx("text",{x:"0",y:"-168",textAnchor:"middle",fill:"#c94a2e",fontSize:"11",fontFamily:"DM Mono, monospace",fontWeight:"500",children:"Americas"}),e.jsx("text",{x:"155",y:"100",textAnchor:"start",fill:"#2e7d52",fontSize:"11",fontFamily:"DM Mono, monospace",fontWeight:"500",children:"Asia"}),e.jsx("text",{x:"-155",y:"100",textAnchor:"end",fill:"#6b6b67",fontSize:"11",fontFamily:"DM Mono, monospace",fontWeight:"500",children:"Europe"})]})}),e.jsx("p",{className:"text-[13px] text-[var(--ink-muted)] text-center italic mt-4",children:"A chord diagram showing trade flows between three major regions. Chord thickness represents trade volume."})]})]}),e.jsxs("section",{className:"py-14 border-b border-[var(--border-color)]",id:"what-is-it",children:[e.jsx("p",{className:"font-mono text-[10px] tracking-[0.14em] uppercase text-[var(--accent-color)] mb-3",children:"// 02 — Definition"}),e.jsx("h2",{className:"font-serif text-[28px] md:text-[30px] font-normal tracking-[-0.02em] text-[var(--ink)] mb-6 leading-[1.2]",children:"What is a chord diagram?"}),e.jsxs("div",{className:"text-[16px] font-light text-[var(--ink)] leading-[1.75]",children:[e.jsx("p",{children:"A chord diagram is a circular visualization used to display relationships and flows between entities arranged around a ring. Each entity is represented as an arc segment on the circle, and connections between entities are drawn as curved bands (chords) that span across the interior of the circle."}),e.jsx("p",{className:"mt-[18px]",children:"The width of each chord is proportional to the magnitude of the relationship it represents — a thicker chord means a 

1stronger connection or a larger flow. This makes it possible to see both which entities are connected and how strong those connections are at a glance."}),e.jsxs("p",{className:"mt-[18px]",children:["Chord diagrams excel at revealing ",e.jsx("strong",{className:"font-medium",children:"mutual relationships"})," in matrix data, such as migration between countries, trade between regions, or communication between departments. They are especially powerful when relationships are bidirectional and you need to see the balance of flows."]})]}),e.jsx("div",{className:"bg-[var(--accent-light)] border-l-[3px] border-l-[var(--accent-color)] rounded-r-[8px] px-5 py-4 mt-6",children:e.jsxs("p",{className:"text-[14px] text-[var(--ink)] leading-[1.65] font-light",children:[e.jsx("strong",{className:"font-medium text-[var(--accent-color)]",children:"Origin:"})," Chord diagrams gained popularity in the data visualization community through Mike Bostock’s D3.js library. The technique draws on circular graph layouts and adjacency matrix representations used in network science since the mid-20th century."]})})]}),e.jsxs("section",{className:"py-14 border-b border-[var(--border-color)]",id:"anatomy",children:[e.jsx("p",{className:"font-mono text-[10px] tracking-[0.14em] uppercase text-[var(--accent-color)] mb-3",children:"// 03 — Anatomy"}),e.jsx("h2",{className:"font-serif text-[28px] md:text-[30px] font-normal tracking-[-0.02em] text-[var(--ink)] mb-6 leading-[1.2]",children:"Parts of a chord diagram"}),e.jsxs("div",{className:"bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[12px] p-6 md:p-10 mt-8",children:[e.jsxs("svg",{viewBox:"0 0 400 380",xmlns:"http://www.w3.org/2000/svg",className:"w-full block max-w-[400px] mx-auto",children:[e.jsxs("g",{transform:"translate(200,190)",children:[e.jsx("path",{d:"M0,-140 A140,140 0 0,1 121.24,70",fill:"none",stroke:"#c94a2e",strokeWidth:"16",strokeOpacity:"0.3"}),e.jsx("path",{d:"M121.24,70 A140,140 0 0,1 -121.24,70",fill:"none",stroke:"#2e7d52",strokeWidth:"16",strokeOpacity:"0.3"}),e.jsx("path",{d:"M-121.24,70 A140,140 0 0,1 0,-140",fill:"none",stroke:"#6b6b67",strokeWidth:"16",strokeOpacity:"0.3"}),e.jsx("path",{d:"M10,-128 Q0,0 112,58",fill:"none",stroke:"#c94a2e",strokeWidth:"12",strokeOpacity:"0.35"}),e.jsx("path",{d:"M-10,-128 Q0,-10 -112,58",fill:"none",stroke:"#6b6b67",strokeWidth:"7",strokeOpacity:"0.3"}),e.jsx("path",{d:"M110,72 Q0,15 -110,72",fill:"none",stroke:"#2e7d52",strokeWidth:"9",strokeOpacity:"0.3"})]}),e.jsx("line",{x1:"200",y1:"42",x2:"200",y2:"12",stroke:"#c94a2e",strokeWidth:"1.2",strokeDasharray:"3,2"}),e.jsx("circle",{cx:"200",cy:"10",r:"4",fill:"#c94a2e"}),e.jsx("text",{x:"200",y:"6",textAnchor:"middle",fill:"#c94a2e",fontSize:"10",fontFamily:"DM Mono, monospace",children:"A"}),e.jsx("line",{x1:"260",y1:"130",x2:"310",y2:"110",stroke:"#2e7d52",strokeWidth:"1.2",strokeDasharray:"3,2"}),e.jsx("circle",{cx:"312",cy:"108",r:"4",fill:"#2e7d52"}),e.jsx("text",{x:"324",y:"112",fill:"#2e7d52",fontSize:"10",fontFamily:"DM Mono, monospace",children:"B"}),e.jsx("line",{x1:"210",y1:"150",x2:"240",y2:"140",stroke:"#c94a2e",strokeWidth:"1.2"}),e.jsx("circle",{cx:"242",cy:"138",r:"4",fill:"#c94a2e"}),e.jsx("text",{x:"254",y:"142",fill:"#c94a2e",fontSize:"10",fontFamily:"DM Mono, monospace",children:"C"}),e.jsx("line",{x1:"200",y1:"320",x2:"200",y2:"350",stroke:"#6b6b67",strokeWidth:"1.2"}),e.jsx("circle",{cx:"200",cy:"352",r:"4",fill:"#6b6b67"}),e.jsx("text",{x:"200",y:"368",textAnchor:"middle",fill:"#6b6b67",fontSize:"10",fontFamily:"DM Mono, monospace",children:"D"}),e.jsx("line",{x1:"100",y1:"240",x2:"70",y2:"260",stroke:"#6b6b67",strokeWidth:"1.2",strokeDasharray:"3,2"}),e.jsx("circle",{cx:"68",cy:"262",r:"4",fill:"#6b6b67"}),e.jsx("text",{x:"56",y:"266",textAnchor:"end",fill:"#6b6b67",fontSize:"10",fontFamily:"DM Mono, monospace",children:"E"})]}),e.jsx("div",{className:"flex flex-wrap gap-3 mt-7",children:[{color:"#c94a2e",label:"A — Outer ring (group arcs):",desc:"Colored arcs around the perimeter representing each entity or category"}

1,{color:"#2e7d52",label:"B — Arc length:",desc:"The angular span of each arc encodes the total value of connections for that entity"},{color:"#c94a2e",label:"C — Chords:",desc:"Curved bands connecting two arcs, whose width encodes the magnitude of the relationship"},{color:"#6b6b67",label:"D — Interior space:",desc:"The open center where chords cross, revealing the density and pattern of connections"},{color:"#6b6b67",label:"E — Color encoding:",desc:"Each arc and its outgoing chords share a color to help trace connections from a specific entity"}].map((t,a)=>e.jsxs("div",{className:"flex items-center gap-2 bg-[var(--bg-alt)] rounded-[4px] px-[14px] py-2 text-[13px]",children:[e.jsx("span",{className:"w-[10px] h-[10px] rounded-full shrink-0",style:{background:t.color}}),e.jsxs("span",{className:"text-[var(--ink-muted)]",children:[e.jsx("strong",{className:"text-[var(--ink)] font-medium",children:t.label})," ",t.desc]})]},a))})]})]}),e.jsxs("section",{className:"py-14 border-b border-[var(--border-color)]",id:"when-to-use",children:[e.jsx("p",{className:"font-mono text-[10px] tracking-[0.14em] uppercase text-[var(--accent-color)] mb-3",children:"// 04 — Usage"}),e.jsx("h2",{className:"font-serif text-[28px] md:text-[30px] font-normal tracking-[-0.02em] text-[var(--ink)] mb-6 leading-[1.2]",children:"When to use it — and when not to"}),e.jsxs("div",{className:"grid grid-cols-1 sm:grid-cols-2 gap-5 mt-7",children:[e.jsxs("div",{className:"bg-[var(--green-light)] border border-[var(--green-border)] rounded-[10px] p-6",children:[e.jsxs("div",{className:"flex items-center gap-2 font-medium text-[14px] text-[var(--green)] mb-4",children:[e.jsx("span",{className:"w-[22px] h-[22px] rounded-full bg-[var(--green)] text-white flex items-center justify-center text-[12px] shrink-0",children:"✓"}),"Use a chord diagram when…"]}),e.jsx("ul",{className:"flex flex-col gap-[10px] list-none",children:["Showing flows or relationships between a set of entities (trade, migration, communication)","Your data is a square matrix of mutual connections","You have fewer than ~10–12 entities to keep the diagram readable","Bidirectional flows are important and you want to see the balance","You need a compact, visually striking summary of interconnections","Audience is comfortable with moderately complex visualizations"].map((t,a)=>e.jsx("li",{className:"text-[14px] text-[var(--ink)] leading-[1.5] pl-4 relative font-light before:content-['—'] before:absolute before:left-0 before:text-[var(--ink-faint)]",children:t},a))})]}),e.jsxs("div",{className:"bg-[var(--red-light)] border border-[var(--red-border)] rounded-[10px] p-6",children:[e.jsxs("div",{className:"flex items-center gap-2 font-medium text-[14px] text-[var(--red)] mb-4",children:[e.jsx("span",{className:"w-[22px] h-[22px] rounded-full bg-[var(--red)] text-white flex items-center justify-center text-[12px] shrink-0",children:"×"}),"Avoid a chord diagram when…"]}),e.jsx("ul",{className:"flex flex-col gap-[10px] list-none",children:["You have more than 12–15 entities — chords become impossible to distinguish","Your audience is not familiar with circular layouts — use a simpler network chart","You need to show hierarchical structure — use a tree or Sankey diagram","Exact values matter more than relative comparisons — use a table or heatmap","Connections are sparse — most chords will be invisible, wasting space","You need to show directionality clearly — arc diagrams or Sankey diagrams are better"].map((t,a)=>e.jsx("li",{className:"text-[14px] text-[var(--ink)] leading-[1.5] pl-4 relative font-light before:content-['—'] before:absolute before:left-0 before:text-[var(--ink-faint)]",children:t},a))})]})]})]}),e.jsxs("section",{className:"py-14 border-b border-[var(--border-color)]",id:"how-to-read",children:[e.jsx("p",{className:"font-mono text-[10px] tracking-[0.14em] uppercase text-[var(--accent-color)] mb-3",children:"// 05 — Reading guide"}),e.jsx("h2",{className:"font-serif text-[28px] md:text-[30px] font-normal tracking-[-0.02em] text-[var(--ink)] mb-6 leading-[1.2]",children:"How to read a chord diagram"}),e.jsx("p",{className:"text-[16px] font-light text-[var(--ink)] leading-[1.75]",children:"Follow these steps whenever you encounter a chord diagram in the wild."}),e.jsx("div",{className:"flex flex-col gap-5 mt-7",children:[{num:"1",title:"Identify the entities around the ring",desc:"Each colored arc segment on the outer ring represents one entity — a country, department, product, etc. Read the labels or legend to understand what each arc represents."}

1,{num:"2",title:"Compare arc lengths",desc:"The angular span (length) of each arc tells you the total magnitude of that entity's connections. Longer arcs mean more total flow in and out."},{num:"3",title:"Trace individual chords",desc:"Each curved band connects two arcs. Follow a chord from one side to the other to identify which two entities are connected and by how much."},{num:"4",title:"Read chord widths",desc:"The width of a chord at each end encodes the flow magnitude. If a chord is wider at one end than the other, the flow is asymmetric — more goes in one direction."},{num:"5",title:"Look for dominant patterns",desc:"Step back and look for the thickest chords — these represent the strongest relationships. Also notice if some entities mostly send and others mostly receive flow."}].map(t=>e.jsxs("div",{className:"flex gap-5 items-start",children:[e.jsx("span",{className:"w-9 h-9 rounded-full bg-[var(--accent-color)] text-white font-mono text-[13px] font-medium flex items-center justify-center shrink-0 mt-[2px]",children:t.num}),e.jsxs("div",{children:[e.jsx("h4",{className:"text-[15px] font-medium text-[var(--ink)] mb-1",children:t.title}),e.jsx("p",{className:"text-[14px] font-light text-[var(--ink-muted)] leading-[1.6]",children:t.desc})]})]},t.num))})]}),e.jsxs("section",{className:"py-14 border-b border-[var(--border-color)]",id:"common-mistakes",children:[e.jsx("p",{className:"font-mono text-[10px] tracking-[0.14em] uppercase text-[var(--accent-color)] mb-3",children:"// 06 — Common mistakes"}),e.jsx("h2",{className:"font-serif text-[28px] md:text-[30px] font-normal tracking-[-0.02em] text-[var(--ink)] mb-6 leading-[1.2]",children:"Mistakes to watch out for"}),e.jsx("div",{className:"flex flex-col gap-4 mt-7",children:[{title:"Too many entities on the ring",desc:'Once you exceed 12–15 arcs, chords become thin, overlapping, and unreadable. Aggregate smaller entities into an "Other" group or filter to the most significant connections.'},{title:"Ignoring color consistency",desc:"Each entity's arc and its outgoing chords should share the same color. Inconsistent coloring breaks the visual logic and makes it impossible to trace connections from a specific entity."},{title:"No interactivity for dense diagrams",desc:"Without hover or click interactions to highlight individual chords, dense chord diagrams become visual noise. Always add interactivity when the number of connections is high."},{title:"Confusing directionality",desc:"Chord diagrams can encode directed flows (asymmetric chord widths), but readers often miss this subtlety. If direction matters, label it clearly or consider a Sankey diagram instead."},{title:"Using it for hierarchical data",desc:"Chord diagrams show peer-to-peer connections, not parent-child hierarchies. If your data is hierarchical, use a tree diagram, Sankey, or sunburst chart."}].map((t,a)=>e.jsxs("div",{className:"bg-[var(--bg-card)] border border-[var(--border-color)] border-l-[3px] border-l-[var(--accent-color)] rounded-r-[8px] px-5 py-[18px]",children:[e.jsx("h4",{className:"text-[14px] font-medium text-[var(--ink)] mb-[6px]",children:t.title}),e.jsx("p",{className:"text-[13px] font-light text-[var(--ink-muted)] leading-[1.6]",children:t.desc})]},a))})]}),e.jsxs("section",{className:"py-14 border-b border-[var(--border-color)]",id:"real-world-examples",children:[e.jsx("p",{className:"font-mono text-[10px] tracking-[0.14em] uppercase text-[var(--accent-color)] mb-3",children:"// 07 — Real-world examples"}),e.jsx("h2",{className:"font-serif text-[28px] md:text-[30px] font-normal tracking-[-0.02em] text-[var(--ink)] mb-6 leading-[1.2]",children:"Where you’ll see chord diagrams used"}),e.jsx("div",{className:"flex flex-col gap-5 mt-7",children:[{num:"01",title:"Economics: Global trade flows between regions",desc:"A chord diagram showing import and export volumes between continents. Each arc represents a continent, and chords show bilateral trade. The asymmetric chord widths reveal trade imbalances — for example, one region exporting far more than it imports.",tag:"Economics"},{num:"02",title:"Genomics: Gene co-expression networks",desc:"Researchers use chord diagrams to visualize which genes are co-expressed across chromosomes. Each arc is a chromosome segment, and chords connect co-expressed gene pairs, revealing cluster

1s of genetic interaction.",tag:"Bioinformatics"},{num:"03",title:"Business: Inter-department collaboration",desc:"A consulting firm maps email communication flows between departments. Thicker chords between engineering and product management reveal heavy collaboration, while thin chords to finance suggest siloed operations.",tag:"Organizational Analysis"}].map(t=>e.jsxs("div",{className:"bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] p-6 grid grid-cols-[48px_1fr] gap-4 items-start",children:[e.jsx("span",{className:"font-serif text-[32px] font-semibold text-[var(--accent-mid)] leading-none mt-1",children:t.num}),e.jsxs("div",{children:[e.jsx("h4",{className:"text-[15px] font-medium text-[var(--ink)] mb-[6px]",children:t.title}),e.jsx("p",{className:"text-[14px] font-light text-[var(--ink-muted)] leading-[1.65]",children:t.desc}),e.jsx("span",{className:"inline-block mt-[10px] font-mono text-[9px] tracking-[0.1em] uppercase bg-[var(--bg-alt)] text-[var(--ink-muted)] px-2 py-[3px] rounded-[3px]",children:t.tag})]})]},t.num))})]}),e.jsxs("section",{className:"py-14 border-b border-[var(--border-color)]",id:"key-facts",children:[e.jsx("p",{className:"font-mono text-[10px] tracking-[0.14em] uppercase text-[var(--accent-color)] mb-3",children:"// 08 — At a glance"}),e.jsx("h2",{className:"font-serif text-[28px] md:text-[30px] font-normal tracking-[-0.02em] text-[var(--ink)] mb-6 leading-[1.2]",children:"Quick reference"}),e.jsx("div",{className:"mt-7 flex flex-col border border-[var(--border-color)] rounded-[10px] overflow-hidden",children:[{label:"Also known as",val:"Chord chart, radial network diagram"},{label:"Best for",val:"Showing mutual flows and connections between entities"},{label:"Data types",val:e.jsxs(e.Fragment,{children:[e.jsx("strong",{className:"font-medium",children:"Square matrix"})," of quantitative values between entities"]})},{label:"Recommended entities",val:"3 – 12 for readability"},{label:"Layout",val:"Circular with curved interior connections"},{label:"Encoding",val:"Arc length = total magnitude; chord width = flow magnitude"},{label:"Common tools",val:"D3.js, Circos, R (circlize), Observable, Flourish"},{label:"Common mistakes",val:"Too many entities, no interactivity, inconsistent coloring"}].map((t,a)=>e.jsxs("div",{className:"flex bg-[var(--bg-card)] border-b border-[var(--border-color)] last:border-b-0 px-[18px] py-[14px]",children:[e.jsx("span",{className:"font-mono text-[11px] tracking-[0.06em] text-[var(--ink-faint)] uppercase w-[140px] shrink-0 pt-[2px]",children:t.label}),e.jsx("span",{className:"text-[14px] text-[var(--ink)] font-light leading-[1.6]",children:t.val})]},a))})]}),e.jsxs("section",{className:"py-14 border-b border-[var(--border-color)]",id:"variations",children:[e.jsx("p",{className:"font-mono text-[10px] tracking-[0.14em] uppercase text-[var(--accent-color)] mb-3",children:"// 09 — Variations"}),e.jsx("h2",{className:"font-serif text-[28px] md:text-[30px] font-normal tracking-[-0.02em] text-[var(--ink)] mb-6 leading-[1.2]",children:"Types of chord diagrams"}),e.jsx("p",{className:"text-[16px] font-light text-[var(--ink)] leading-[1.75]",children:"The basic chord diagram has several important variants, each suited to different network characteristics."}),e.jsxs("div",{className:"grid grid-cols-1 sm:grid-cols-2 gap-4 mt-7",children:[e.jsxs("div",{className:"bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] p-5 cursor-pointer hover:border-[var(--accent-border-hover)] hover:-translate-y-[2px] transition-all duration-150",children:[e.jsx("div",{className:"h-[60px] mb-3 flex items-center justify-center",children:e.jsxs("svg",{viewBox:"0 0 100 100",width:"80",height:"80",children:[e.jsx("circle",{cx:"50",cy:"50",r:"40",fill:"none",stroke:"#c94a2e",strokeWidth:"6",strokeOpacity:"0.2"}),e.jsx("line",{x1:"18",y1:"28",x2:"82",y2:"72",stroke:"#c94a2e",strokeWidth:"1.5",strokeOpacity:"0.5"}),e.jsx("line",{x1:"18",y1:"72",x2:"82",y2:"28",stroke:"#2e7d52",strokeWidth:"1.5",strokeOpacity:"0.5"}),e.jsx("line",{x1:"50",y1:"10",x2:"50",y2:"90",stroke:"#6b6b67",strokeWidth:"1",strokeOpacity:"0.4"})]})}),e.jsx("p",{className:"text-[13px] font-medium text-[var(--ink)] mb-1",children:"Non-ribbon chord diagram"}),e.jsx("p",{className:"text-[12px] text-[var(--ink-muted)] font-light leading-[1.5]",children:"Replaces thick ribbon chords with thin lines, reducing visual clutter for dense networks where connection presence matters more than magnitude."})]}),e.jsxs("div",{className:"bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] p-5 cursor-pointer hover:border-[var(--accent-border-hover)] hover:-translate-y-[2px] transition-all duration-150",children:[e.jsx("div",{className:"h-[60px] mb-3 flex items-center justify-center",children:e.jsxs("svg",{viewBox:"0 0 100 100",width:"80",height:"80",children:[e.jsx("path",{d:"M15,85 A50,50 0 0,1 85,85",fill:"none",stroke:"#c94a2e",strokeWidth:"6",strokeOpacity:"0.25"}),e.jsx("path",{d:"M25,85 Q50,40 75,85",fill:"none",stroke:"#c94a2e",strokeWidth:"3",strokeOpacity:"0.4"}),e.jsx("path",{d:"M30,85 Q50,55 60,85",fill:"none",stroke:"#2e7d52",strokeWidth:"2",strokeOpacity:"0.4"})]})}),e.jsx("p",{className:"text-[13px] font-medium text-[var(--ink)] mb-1",children:"Arc diagram"}),e.jsx("p",{className:"text-[12px] text-[var(--ink-muted)] font-light leading-[1.5]",children:"Unrolls the circle into a line with arcs above, making it easier to read when entities have a natural linear order."})]}),e.jsxs("div",{className:"bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] p-5 cursor-pointer hover:border-[var(--accent-border-hover)] hover:-translate-y-[2px] transition-all duration-150",children:[e.jsx("div",{className:"h-[60px] mb-3 flex items-center justify-center",children:e.jsxs("svg",{viewBox:"0 0 100 100",width:"80",height:"80",children:[e.jsx("circle",{cx:"50",cy:"50",r:"40",fill:"none",stroke:"#c94a2e",strokeWidth:"3",strokeOpacity:"0.2"}),e.jsx("path",{d:"M20,30 Q50,50 80,30",fill:"none",stroke:"#c94a2e",strokeWidth:"8",strokeOpacity:"0.3"}),e.jsx("path",{d:"M30,80 Q50,50 70,20",fill:"none",stroke:"#2e7d52",strokeWidth:"5",strokeOpacity:"0.3"}),e.jsx("line",{x1:"75",y1:"35",x2:"78",y2:"32",stroke:"#c94a2e",strokeWidth:"2",markerEnd:"url(#arrow)"})]})}),e.jsx("p",{className:"text-[13px] font-medium text-[var(--ink)] mb-1",children:"Directed chord diagram"}),e.jsx("p",{className:"text-[12px] text-[var(--ink-muted)] font-light leading-[1.5]",children:"Adds directionality with asymmetric chord widths or arrowheads, clearly showing which entity sends and which receives."})]}),e.jsxs("div",{className:"bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] p-5 cursor-pointer hover:border-[var(--accent-border-hover)] hover:-translate-y-[2px] transition-all duration-150",children:[e.jsx("div",{className:"h-[60px] mb-3 flex items-center justify-center",children:e.jsxs("svg",{viewBox:"0 0 100 100",width:"80",height:"80",children:[e.jsx("circle",{cx:"50",cy:"50",r:"42",fill:"none",stroke:"#f5ede9",strokeWidth:"8"}),e.jsx("path",{d:"M50,8 A42,42 0 0,1 92,50",fill:"none",stroke:"#c94a2e",strokeWidth:"8"}),e.jsx("path",{d:"M92,50 A42,42 0 0,1 50,92",fill:"none",stroke:"#2e7d52",strokeWidth:"8"}),e.jsx("path",{d:"M50,92 A42,42 0 0,1 8,50",fill:"none",stroke:"#6b6b67",strokeWidth:"8"}),e.jsx("path",{d:"M8,50 A42,42 0 0,1 50,8",fill:"none",stroke:"#e8c4b8",strokeWidth:"8"}),e.jsx("path",{d:"M55,12 Q50,50 88,45",fill:"none",stroke:"#c94a2e",strokeWidth:"3",strokeOpacity:"0.3"})]})}),e.jsx("p",{className:"text-[13px] font-medium text-[var(--ink)] mb-1",children:"Grouped chord diagram"}),e.jsx("p",{className:"text-[12px] text-[var(--ink-muted)] font-light leading-[1.5]",children:"Groups related arcs together with gaps between groups, adding a hierarchical layer to the circular layout."})]})]})]}),e.jsx(x,{faqs:o,sectionNumber:10}),e.jsxs("section",{className:"py-14 pb-[72px]",id:"related-charts",children:[e.jsx("p",{className:"font-mono text-[10px] tracking-[0.14em] uppercase text-[var(--accent-color)] mb-3",children:"// 11 — Related charts"}),e.jsx("h2",{className:"font-serif text-[26px] md:text-[28px] font-normal tracking-[-0.02em] text-[var(--ink)] mb-7 leading-[1.2]",children:"You might also need…"}),e.jsxs("div",{className:"grid grid-cols-1 sm:grid-cols-3 gap-4",children:[e.jsxs("div",{className:"bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] p-6 px-5 cursor-pointer hover:border-[var(--accent-border-hover)] hover:-translate-y-[2px] hover:shadow-[var(--shadow-card)] transition-all duration-150",children:[e.jsx("div",{className:"h-[72px] mb-4 flex items-center justify-center",children:e.jsxs("svg",{viewBox:"0 0 100 60",width:"100",height:"60",children:[e.jsx("rect",{x:"0",y:"5",width:"30",height:"50",rx:"2",fill:"#c94a2e",fillOpacity:"0.15",stroke:"#c94a2e",strokeWidth:"0.5"}),e.jsx("rect",{x:"35",y:"5",width:"30",height:"50",rx:"2",fill:"#2e7d52",fillOpacity:"0.15",stroke:"#2e7d52",strokeWidth:"0.5"}),e.jsx("rect",{x:"70",y:"5",width:"30",height:"50",rx:"2",fill:"#6b6b67",fillOpacity:"0.15",stroke:"#6b6b67",strokeWidth:"0.5"}),e.jsx("path",{d:"M30,15 L35,20",stroke:"#c94a2e",strokeWidth:"8",strokeOpacity:"0.25"}),e.jsx("path",{d:"M30,35 L70,25",stroke:"#c94a2e",strokeWidth:"4",strokeOpacity:"0.2"}),e.jsx("path",{d:"M65,30 L70,35",stroke:"#2e7d52",strokeWidth:"6",strokeOpacity:"0.2"})]})}),e.jsx("p",{className:"text-[14px] font-medium text-[var(--ink)] mb-1",children:"Sankey diagram"}),e.jsx("p",{className:"text-[12px] text-[var(--ink-muted)] font-light leading-[1.5]",children:"When you need to show multi-stage flows with clear directionality and branching paths."}),e.jsx("span",{className:"inline-block mt-[10px] font-mono text-[9px] tracking-[0.1em] uppercase text-[var(--accent-color)] bg-[var(--accent-light)] px-2 py-[3px] rounded-[3px]",children:"Flow"})]}),e.jsxs("div",{className:"bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] p-6 px-5 cursor-pointer hover:border-[var(--accent-border-hover)] hover:-translate-y-[2px] hover:shadow-[var(--shadow-card)] transition-all duration-150",children:[e.jsx("div",{className:"h-[72px] mb-4 flex items-center justify-center",children:e.jsxs("svg",{viewBox:"0 0 100 60",width:"100",height:"60",children:[e.jsx("circle",{cx:"20",cy:"30",r:"6",fill:"#c94a2e",fillOpacity:"0.3",stroke:"#c94a2e",strokeWidth:"1"}),e.jsx("circle",{cx:"50",cy:"15",r:"6",fill:"#2e7d52",fillOpacity:"0.3",stroke:"#2e7d52",strokeWidth:"1"}),e.jsx("circle",{cx:"80",cy:"30",r:"6",fill:"#6b6b67",fillOpacity:"0.3",stroke:"#6b6b67",strokeWidth:"1"}

1),e.jsx("circle",{cx:"50",cy:"50",r:"6",fill:"#c94a2e",fillOpacity:"0.3",stroke:"#c94a2e",strokeWidth:"1"}),e.jsx("line",{x1:"26",y1:"28",x2:"44",y2:"17",stroke:"#1a1a18",strokeWidth:"1",strokeOpacity:"0.3"}),e.jsx("line",{x1:"56",y1:"17",x2:"74",y2:"28",stroke:"#1a1a18",strokeWidth:"1",strokeOpacity:"0.3"}),e.jsx("line",{x1:"26",y1:"34",x2:"44",y2:"48",stroke:"#1a1a18",strokeWidth:"1",strokeOpacity:"0.3"}),e.jsx("line",{x1:"56",y1:"48",x2:"74",y2:"34",stroke:"#1a1a18",strokeWidth:"1",strokeOpacity:"0.3"})]})}),e.jsx("p",{className:"text-[14px] font-medium text-[var(--ink)] mb-1",children:"Node-link diagram"}),e.jsx("p",{className:"text-[12px] text-[var(--ink-muted)] font-light leading-[1.5]",children:"When you want a free-form layout showing network structure with nodes and connecting edges."}),e.jsx("span",{className:"inline-block mt-[10px] font-mono text-[9px] tracking-[0.1em] uppercase text-[var(--accent-color)] bg-[var(--accent-light)] px-2 py-[3px] rounded-[3px]",children:"Network"})]}),e.jsxs("div",{className:"bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] p-6 px-5 cursor-pointer hover:border-[var(--accent-border-hover)] hover:-translate-y-[2px] hover:shadow-[var(--shadow-card)] transition-all duration-150",children:[e.jsx("div",{className:"h-[72px] mb-4 flex items-center justify-center",children:e.jsxs("svg",{viewBox:"0 0 100 60",width:"100",height:"60",children:[e.jsx("rect",{x:"5",y:"5",width:"90",height:"50",fill:"none",stroke:"#1a1a18",strokeWidth:"0.5",strokeOpacity:"0.15"}),e.jsx("rect",{x:"5",y:"5",width:"22",height:"12",fill:"#c94a2e",fillOpacity:"0.6"}),e.jsx("rect",{x:"27",y:"5",width:"22",height:"12",fill:"#c94a2e",fillOpacity:"0.2"}),e.jsx("rect",{x:"49",y:"5",width:"22",height:"12",fill:"#c94a2e",fillOpacity:"0.4"}),e.jsx("rect",{x:"5",y:"17",width:"22",height:"12",fill:"#c94a2e",fillOpacity:"0.2"}),e.jsx("rect",{x:"27",y:"17",width:"22",height:"12",fill:"#c94a2e",fillOpacity:"0.7"}),e.jsx("rect",{x:"49",y:"17",width:"22",height:"12",fill:"#c94a2e",fillOpacity:"0.15"}),e.jsx("rect",{x:"5",y:"29",width:"22",height:"12",fill:"#c94a2e",fillOpacity:"0.4"}),e.jsx("rect",{x:"27",y:"29",width:"22",height:"12",fill:"#c94a2e",fillOpacity:"0.15"}),e.jsx("rect",{x:"49",y:"29",width:"22",height:"12",fill:"#c94a2e",fillOpacity:"0.5"})]})}),e.jsx("p",{className:"text-[14px] font-medium text-[var(--ink)] mb-1",children:"Adjacency matrix"}),e.jsx("p",{className:"text-[12px] text-[var(--ink-muted)] font-light leading-[1.5]",children:"When you need precise value lookup for every pair of entities in a grid format."}),e.jsx("span",{className:"inline-block mt-[10px] font-mono text-[9px] tracking-[0.1em] uppercase text-[var(--accent-color)] bg-[var(--accent-light)] px-2 py-[3px] rounded-[3px]",children:"Network"})]})]})]})]}),e.jsxs("aside",{className:"hidden md:block sticky top-[80px]",children:[e.jsxs("div",{className:"mt-12 mb-7",children:[e.jsx("p",{className:"font-mono text-[10px] tracking-[0.12em] uppercase text-[var(--ink-faint)] mb-[14px] pb-[10px] border-b border-[var(--border-color)]",children:"On this page"}),e.jsx("ul",{className:"list-none",children:b.map(t=>e.jsx("li",{className:"mb-[2px]",children:e.jsx("a",{href:`#${t.id}`,className:"block text-[13px] text-[var(--ink-muted)] no-underline py-[5px] pl-3 -ml-3 border-l-2 border-transparent hover:text-[var(--ink)] hover:border-l-[var(--accent-color)] transition-all duration-150 leading-[1.4]",children:t.label})},t.id))})]}),e.jsxs("div",{className:"bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] overflow-hidden mb-5",children:[e.jsx("div",{className:"bg-[var(--ink)] px-[18px] py-[14px] font-mono text-[10px] tracking-[0.12em] uppercase text-[var(--white-muted)]",children:"// At a glance"}),e.jsx("div",{children:[{label:"Category",val:"Network",color:""},{label:"Difficulty",val:"Intermediate",color:"text-[var(--caution)]"},{label:"Layout",val:"Circular",color:""},{label:"Best entity count",val:"3 – 12",color:""},{label:"Max entities",val:"~15 before clutter",color:"text-[var(--caution)]"},{label:"Input data",val:"Square matrix",color:""}].map((t,a)=>e.jsxs("div",{className:"px-[18px] py-[14px] border-b border-[var(--border-color)] last:border-b-0 flex flex-col gap-[2px]",children:[e.jsx("span",{className:"text-[11px] text-[var(--ink-faint)] font-mono tracking-[0.05em]",children:t.label}),e.jsx("span",{className:`text-[14px] text-[var(--ink)] ${t.color}`,children:t.val})]},a))})]}),e.jsxs("div",{className:"bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] overflow-hidden mb-5",children:[e.jsx("div",{className:"bg-[var(--ink)] px-[18px] py-[14px] font-mono text-[10px] tracking-[0.12em] uppercase text-[var(--white-muted)]",children:"// Tags"}),e.jsx("div",{className:"px-[18px] py-4",children:e.jsx("div",{className:"flex flex-wrap gap-[6px]",children:["Network","Flow","Circular","Intermediate","Matrix data","Relationships","D3.js"].map(t=>e.jsx("span",{className:"font-mono text-[10px] tracking-[0.06em] uppercase bg-[var(--bg-alt)] text-[var(--ink-muted)] px-[10px] py-1 rounded-[3px]",children:t},t))})})]}),e.jsxs("div",{className:"bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] overflow-hidden mb-5",children:[e.jsx("div",{className:"bg-[var(--ink)] px-[18px] py-[14px] font-mono text-[10px] tracking-[0.12em] uppercase text-[var(--white-muted)]",children:"// Similar charts"}),e.jsx("div",{className:"py-1",children:["Non-ribbon chord diagram","Arc diagram","Sankey diagram","Adjacency matrix","Alluvial diagram"].map((t,a,s)=>e.jsxs("span",{className:`flex items-center justify-between px-[18px] py-3 text-[13px] text-[var(--ink-muted)] hover:text-[var(--accent-color)] transition-colors duration-150 cursor-pointer ${a<s.length-1?"border-b border-[var(--border-color)]":""}`,children:[t," ",e.jsx("span",{children:"→"})]},t))})]})]})]})]}),e.jsxs("div",{className:"border-t border-[var(--border-color)] bg-[var(--bg-card)] px-6 md:px-12 py-5 flex items-center justify-between",children:[e.jsx("div",{className:"flex gap-8",children:e.jsxs(i,{href:"/arc-diagram",className:"text-[13px] text-[var(--ink-muted)] flex items-center gap-[6px] no-u

1nderline hover:text-[var(--ink)] transition-colors duration-150",children:[e.jsx("span",{className:"text-[var(--accent-color)]",children:"←"})," Previous: Arc diagram"]})}),e.jsx("span",{className:"font-mono text-[11px] text-[var(--ink-faint)] hidden md:block",children:"1 of 80+ chart types"}),e.jsx("div",{className:"flex gap-8",children:e.jsxs(i,{href:"/non-ribbon-chord-diagram",className:"text-[13px] text-[var(--ink-muted)] flex items-center gap-[6px] no-underline hover:text-[var(--ink)] transition-colors duration-150",children:["Next: Non-ribbon chord diagram ",e.jsx("span",{className:"text-[var(--accent-color)]",children:"→"})]})})]})]})}export{y as default};