Double Fan Colorful Chord Diagram Generator

Free online double fan colorful chord diagram generator. Upload a three-column source,target,value CSV to build an hourglass-shaped bipartite chart: five solid-colored arcs fan across 12 o’clock, five pastel arcs fan across 6 o’clock along the same circle, with open gaps at 2 and 9 o’clock. Translucent colored ribbons cross the center waist, and every sector carries its own tick axis starting at 0. Ships with a 5 × 5 sample matrix, PNG / SVG export and dark mode.

What is a double fan colorful chord diagram

A double fan chord diagram is a bipartite variant of the classic chord diagram — the layout you see in circlize as a bipartite chord plot. Instead of spreading every node around one full ring, it splits the same circle into two opposing fans: all source nodes sit in the fan around 12 o’clock, all target nodes in the fan around 6 o’clock, with two open gaps at 2 and 9 o’clock that give the plot its hourglass silhouette. Each node is an arc band whose angular width is proportional to its total flow; the top fan uses five saturated solids (near-black, crimson, grass green, medium blue, cyan) while the bottom fan echoes them in pastel tints, with black shared rather than lightened. Every source-to-target relationship becomes a translucent colored ribbon whose end width is allocated by value, pinching toward the circle center as it crosses the open waist — so the density of the picture is the flow distribution itself.

What you can do

• Upload CSV — three columns source,target,value, up to 8 nodes per side and 120 rows.
• Instant render — twin fans, center-crossing ribbons, and a dedicated 0-based tick axis on every sector (majors every 10 units).
• Arc length equals flow — sector width follows each node’s total flow and ribbon end width follows each individual value, with no manual layout.
• Light / dark mode — one click switches the canvas, and the export keeps the background you chose.
• Export PNG / SVG — 2× PNG and lossless vector SVG, no watermark.
• Local privacy — everything is processed in the browser, nothing is uploaded.

How to use

1. Open the page to see the 5 × 5 sample matrix rendered as a double fan chord diagram; upload or drag in your own CSV, or click “Load sample” first.
2. Hover any sector or ribbon to read that node’s total or a single flow value.
3. Switch light / dark mode when needed, or use the button in the top-right corner for a fullscreen preview.
4. Click “Download PNG” or “Download SVG” to save the image.

CSV format example (three comma-separated columns, with or without the source,target,value header):

source,target,value
C1,R1,14
C1,R2,9
C2,R2,16
C2,R3,7

Where it fits

• Channel and flow analysis: ad channels to conversion outcomes, upstream suppliers to procurement categories.
• Cost and budget allocation: cost centres to expense accounts, departments to projects.
• Requirement and test coverage: requirements to implementation modules, modules to test cases.
• Matrix surveys: survey options to audience segments, symptoms to diagnoses.
• Decks and posters: the built-in tick axes make values readable, so the chart can go straight onto a slide or report cover.

Notes

Accepts .csv text files; a name may not appear in both the source and target columns (strict bipartite data). The top fan uses five solid hues and the bottom fan their pastel echoes; each ribbon takes a lightened tint of its source hue at roughly 0.7 opacity, and the bottom fan also carries a thin outer strip segmented by partner color. Each sector’s axis starts at 0 at one end of its arc and increases clockwise to that node’s total in/out flow — top-fan numbers ascend left to right, bottom-fan numbers ascend right to left on screen, following the traditional circlize convention. If you need to compare small numeric differences precisely, a bar chart is the better tool.

---

Last verified: 2026-09-11

How to read this chart

Start with the color split: the fan at 12 o’clock holds sources (five solid hues) and the fan at 6 o’clock holds targets (pastel echoes, with black shared). A wider sector means a larger total flow for that node. Take any colored ribbon — one end sits on a source sector’s inner edge, the other lands on a target sector’s inner edge, so it reads “this source → that target”; a wider ribbon means a larger value. The tick axis outside each sector is that node’s own cumulative flow scale, starting at 0 with majors every 10 units and numbers set along the arc tangent, so you can read the approximate value of each flow, not just its relative size.