桑基图

可视化

作者

yangjh

发布日期

2023年7月16日

桑基图简介

桑基图（Sankey diagram）是一种特定类型的流程图，用于描述一组值到另一组值的流向。图中延伸的分支的宽度对应数据流量的大小，通常应用于能源、材料成分、金融等数据的可视化分析。桑基图最初由爱尔兰人Matthew Henry Phineas Riall Sankey提出，他是一名船长也是工程师。1898年Sankey发表了一篇关于蒸汽机能源效率的文章，文中首次推出了第一个能量流动图，后来这种图也就由他的名字来命名，中文音译为桑基图。

桑基图的制作要点

选择正确的数据: 桑基图主要用于显示流动的过程，所以你需要有一些可以表示这种流动的数据。这些数据通常会包括一些源点（source），目标点（target），以及表示从源点到目标点流动的数量的值（value）。
清晰的布局: 桑基图中的流通常会从左到右进行，源点在左边，目标点在右边。每一条流都有一个宽度，这个宽度通常会根据流的值进行缩放。流的颜色和形状也应该尽量保持一致，以方便观众理解。
高效的使用颜色: 颜色是一个强大的视觉工具，可以有效地帮助观众理解图表的内容。你可以使用颜色来表示不同的类别，或者用不同的颜色来表示流的大小。
添加合适的标签和注释: 虽然桑基图可以非常直观地显示流动的过程，但是没有足够的标签和注释，观众可能会对图表的内容感到困惑。你应该在图表中添加足够的标签，以显示源点和目标点的名称，以及流的值。如果有些流的含义不是很明确，你还可以添加一些注释来解释。
保持简洁: 桑基图中的数据和流可以非常复杂，但是你应该尽量保持图表的简洁。过多的细节和信息可能会使图表显得混乱，不易理解。如果可能，你应该尽量减少图表中的流的数量，或者使用一些策略来简化流的表示，例如使用颜色或者模式来分组相关的流。

使用Echarts.js制作桑基图

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script>
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            series: [
                {
                    type: 'sankey',
                    data: [
                        {name: '数据1'},
                        {name: '数据2'},
                        {name: '数据3'},
                        {name: '数据4'}
                    ],
                    links: [
                        {source: '数据1', target: '数据2', value: 2},
                        {source: '数据1', target: '数据3', value: 2},
                        {source: '数据2', target: '数据4', value: 2},
                        {source: '数据3', target: '数据4', value: 2}
                    ]
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

首先，需要引入 Echarts 的 JS 库。你可以从官方网站下载或者使用 CDN 链接。定义了一个用于显示图表的 div，然后创建了一个 Echarts 实例并初始化这个 div。然后，我们定义了一个 option 对象，指定了图表的类型为 ‘sankey’，并指定了数据和链接。这里的数据和链接可以根据你自己的需要进行定制。最后，我们将这个 option 对象设置到图表实例上，完成了图表的创建。

这个例子是一个非常基础的桑基图，你可以根据需要对其进行扩展和定制，例如添加标题，调整布局和样式等等。具体的配置项和 API 可以参考 Echarts 的官方文档。

效果如下：

ECharts

使用Python制作桑基图

使用在线工具制作桑基图

学术领域中的应用

回到顶部