サンキー図

なんだかんだ便利なサンキー図。

Sankey diagram of thermodynamic steam cycle

ウェブ上で可視化するには、MermaidかPlotlyを使うのが簡単そう。

Mermaid

ノードの前後のラベルと数字をCSVのように並べる。

sankey

%% source,target,value
Low(2020),Low(2021),28831
Low(2020),Middle(2021),5395
Low(2020),High(2021),1921
Moderate(2020),Low(2021),1030
Moderate(2020),Middle(2021),58025
Moderate(2020),High(2021),6466
High(2020),Middle(2021),668
High(2020),High(2021),12999

以下のようにレンダリングされる

  sankey

%% source,target,value
Low(2020),Low(2021),28831
Low(2020),Middle(2021),5395
Low(2020),High(2021),1921
Moderate(2020),Low(2021),1030
Moderate(2020),Middle(2021),58025
Moderate(2020),High(2021),6466
High(2020),Middle(2021),668
High(2020),High(2021),12999

注意点としては

• 遷移の前と後に同じ名前は使えない
• High(2020),Low(2021),0 と値が0でも、行が存在するとラインが表示される

Plotly

ノードのラベルや色を設定する node と、つなげ方を設定する link の2つから構成されている。ノードはIDで指定するため、Mermaidと違って、同じラベル名が存在していてもよい。

var data = {
  type: "sankey",
  orientation: "h",
  node: {
    pad: 25,
    thickness: 10,
    line: {
      color: "#251f21",
      width: 0.1
    },
    label: ["Low", "Low", "Middle", "High", "Moderate", "High"],
    color: ["#251f21", "#251f21", "#251f21", "#251f21", "#251f21", "#251f21"]
  },
  link: {
    source: [0, 0, 0, 4, 4, 4, 5, 5],
    target: [1, 2, 3, 1, 2, 3, 2, 3],
    value: [28831, 5395, 1921, 1030, 58025, 6466, 668, 12999],
    color: ["#a6c1e0", "#a6c1e0", "#a6c1e0", "#5a91ca", "#5a91ca", "#5a91ca", "#264f7c", "#264f7c"]
  }
};
var layout = {
  font: {
    size: 12
  }
}
Plotly.react('plotly-sankey-demo', [data], layout)

以下のようにレンダリングされる

リンクの重なり（Z軸）は、配列順に依存している模様

データ元

上記データは、X上で広がる反ワクチン言説と陰謀論への傾倒について研究した論文の表3より引用した¹。陰謀論コミュニティに深入りすることはあっても、抜け出すことは稀、というデータとして、論文の著者が日経新聞のコラムを書いていた²。

Anti-vaccine rabbit hole leads to political representation: the case of Twitter in Japan, Table3