Public
Edited
Jun 14, 2023
2 forks
2 stars
am5 = require("https://amcharts.com/lib/5/index.js").catch(() => window.am5)
am5flow = {
await am5;
return await require("https://cdn.amcharts.com/lib/5/flow.js").catch(() => window.am5flow);
}
am5themes_Animated = {
await am5;
return await require("https://cdn.amcharts.com/lib/5/themes/Animated.js").catch(() => window.am5themes_Animated);
}
<div id="chartdiv"></div>
<style>
#chartdiv {
width: 100%;
height: 500px;
</style>
inputData = {
// Set data
// https://www.amcharts.com/docs/v5/charts/flow-charts/#Setting_data
let exampleData = [
{from: "Gun Violence", to: "Violence", value: 2},
{from: "War", to: "Violence", value: 2},
{from: "Fighting", to: "Violence", value: 2},
{from: "Abuse", to: "Violence", value: 2},
{from: "Hate", to: "Violence", value: 2},
//{from: "Violence", to: "", value: 10},
{from: "Violence", to: "Problems", value: 2},
{from: "Violence", to: "Problems", value: 2},
{from: "Violence", to: "Problems", value: 2},
{from: "Violence", to: "Problems", value: 2},
{from: "Violence", to: "Problems", value: 2},
{from: "Problems", to: "Solutions", value: 2},
{from: "Problems", to: "Solutions", value: 2},
{from: "Problems", to: "Solutions", value: 2},
{from: "Problems", to: "Solutions", value: 2},
{from: "Problems", to: "Solutions", value: 2},
{from: "Solutions", to: "Love", value: 2},
{from: "Solutions", to: "Peace", value: 2},
{from: "Solutions", to: "Appreciation", value: 2},
{from: "Solutions", to: "Healing", value: 2},
{from: "Solutions", to: "Spirituality", value: 2},
]
return exampleData;
}
// Create root element
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
root = am5.Root.new("chartdiv");
{
await am5
return await am5.ready(function() {
// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
root.setThemes([
am5themes_Animated.new(root)
]);
// Create series
// https://www.amcharts.com/docs/v5/charts/flow-charts/
var series = root.container.children.push(am5flow.Sankey.new(root, {
sourceIdField: "from",
targetIdField: "to",
valueField: "value",
nodePadding: 11,
paddingRight: 200
}));
series.nodes.get("colors").set("step", 2);
// Set data
// https://www.amcharts.com/docs/v5/charts/flow-charts/#Setting_data
series.data.setAll(inputData);
// Make stuff animate on load
series.appear(1000, 100);
}); // end am5.ready()
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
