A chord diagram puts the items around a circle and joins them with ribbons, each as wide as the flow between them. Here, five European cities and the flows between every pair, which are rarely the same both ways.
A chord diagram shows who exchanges how much with whom, when every item can both send and receive. The ring shows each item’s total and the ribbons the pairs that matter most. Five to fifteen items read well.
Built with amCharts 5, a JavaScript library. The JavaScript includes your theme and renderer (canvas or SVG); the JSON also follows the changes you make with the controls.
npm install @amcharts/amcharts5. See Getting started.
The same chart as a JSON config. Chart Maker reads and writes this format, the library's JSON parser turns it into a chart, and the <am5-chart> element puts it on a page with no code."type" is the class to create and "settings" what you would pass to its new() in code; "properties" fill in its parts, lists such as series and axes or templates such as columns.template; "refs" holds objects used in more than one place ("#series-0" stands for the one named series-0); a string starting with "@" takes a value from another object, such as "@series.get('fill')".
A complete page. Save it as an .html file and open it in a browser.
Paste this into an AI coding assistant to build the chart from scratch. More in amCharts & AI.
// Create root element
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
var root = am5.Root.new("chartdiv");
// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
root.setThemes([
am5themes_Animated.new(root),
am5themes_Responsive.new(root)
]);
// Create series
// https://www.amcharts.com/docs/v5/charts/flow-charts/
var chart = root.container.children.push(am5.SerialChartContainer.new(root, {})); // holds the chord diagram
var series = chart.series.push(am5flow.Chord.new(root, { // ribbons between the cities, as wide as their values
sourceIdField: "source",
targetIdField: "target",
valueField: "value"
}));
// skip every other color of the set, so neighboring cities differ more
series.nodes.get("colors").set("step", 2);
// Set data
// https://www.amcharts.com/docs/v5/charts/flow-charts/#Setting_data
series.data.setAll([
{ source: "Berlin", target: "Amsterdam", value: 14 },
{ source: "Berlin", target: "London", value: 33 },
{ source: "Berlin", target: "Paris", value: 13 },
{ source: "Berlin", target: "Madrid", value: 36 },
{ source: "Amsterdam", target: "Berlin", value: 42 },
{ source: "Amsterdam", target: "London", value: 20 },
{ source: "Amsterdam", target: "Paris", value: 19 },
{ source: "Amsterdam", target: "Madrid", value: 11 },
{ source: "London", target: "Amsterdam", value: 9 },
{ source: "London", target: "Berlin", value: 38 },
{ source: "London", target: "Paris", value: 41 },
{ source: "London", target: "Madrid", value: 16 },
{ source: "Paris", target: "Amsterdam", value: 12 },
{ source: "Paris", target: "London", value: 16 },
{ source: "Paris", target: "Berlin", value: 21 },
{ source: "Paris", target: "Madrid", value: 8 },
{ source: "Madrid", target: "Amsterdam", value: 22 },
{ source: "Madrid", target: "London", value: 25 },
{ source: "Madrid", target: "Paris", value: 19 },
{ source: "Madrid", target: "Berlin", value: 7 }
]);
// Make stuff animate on load
series.appear(1000, 100);{
"type": "SerialChartContainer",
"properties": {
"series": [
"#series-0"
]
},
"refs": [
{
"data-0": [
{
"source": "Berlin",
"target": "Amsterdam",
"value": 14
},
{
"source": "Berlin",
"target": "London",
"value": 33
},
{
"source": "Berlin",
"target": "Paris",
"value": 13
},
{
"source": "Berlin",
"target": "Madrid",
"value": 36
},
{
"source": "Amsterdam",
"target": "Berlin",
"value": 42
},
{
"source": "Amsterdam",
"target": "London",
"value": 20
},
{
"source": "Amsterdam",
"target": "Paris",
"value": 19
},
{
"source": "Amsterdam",
"target": "Madrid",
"value": 11
},
{
"source": "London",
"target": "Amsterdam",
"value": 9
},
{
"source": "London",
"target": "Berlin",
"value": 38
},
{
"source": "London",
"target": "Paris",
"value": 41
},
{
"source": "London",
"target": "Madrid",
"value": 16
},
{
"source": "Paris",
"target": "Amsterdam",
"value": 12
},
{
"source": "Paris",
"target": "London",
"value": 16
},
{
"source": "Paris",
"target": "Berlin",
"value": 21
},
{
"source": "Paris",
"target": "Madrid",
"value": 8
},
{
"source": "Madrid",
"target": "Amsterdam",
"value": 22
},
{
"source": "Madrid",
"target": "London",
"value": 25
},
{
"source": "Madrid",
"target": "Paris",
"value": 19
},
{
"source": "Madrid",
"target": "Berlin",
"value": 7
}
]
},
{
"series-0": {
"type": "Chord",
"settings": {
"sourceIdField": "source",
"targetIdField": "target",
"valueField": "value"
},
"properties": {
"data": "#data-0",
"nodes": {
"settings": {
"colors": {
"type": "ColorSet",
"settings": {
"step": 2,
"colors": [
"@root.interfaceColors.get('primaryButton')",
{
"type": "Color",
"value": "#7a51a5"
},
{
"type": "Color",
"value": "#a95596"
},
{
"type": "Color",
"value": "#ce5f78"
},
{
"type": "Color",
"value": "#e3764f"
},
"@root.interfaceColors.get('primaryButton')",
{
"type": "Color",
"value": "#7a51a5"
},
{
"type": "Color",
"value": "#a95596"
},
{
"type": "Color",
"value": "#ce5f78"
},
{
"type": "Color",
"value": "#e3764f"
}
],
"reuse": true,
"passOptions": {
"hue": 0.05,
"saturation": 0,
"lightness": 0
},
"startIndex": 0,
"stateAnimationDuration": 600
}
}
}
}
}
}
}
]
}
