出生数と死亡数（GitHubのCSVデータをPlotlyで描画）

『［改訂第4版］基礎からわかる情報リテラシー』サポートページにある出生数と死亡数のデータをPlotlyで描画してみましょう。

<div id="out"></div>

<script>
  fetch('https://raw.githubusercontent.com/okumuralab/literacy4/master/data/birthdeath.csv')
    .then(response => response.text())
    .then(data => plot(data));
</script>

関数 plot() はヘッダで次のように定義されています：

<script>
  function plot(data) {
      let year = [], birth = [], death = [];
      for (const row of data.split("\n")) {
	  const r = row.split(',');
	  if (r.length == 3) {
	      year.push(r[0]);
	      birth.push(r[1]);
	      death.push(r[2]);
	  }
      }
      Plotly.newPlot("out", [
	  {name: "出生数", x: year, y: birth, type: "scatter", mode: "lines+markers"},
	  {name: "死亡数", x: year, y: death, type: "scatter", mode: "lines+markers"},
      ], {legend: {x: 0.8, y: 1}}, {responsive: true});
  }
</script>

注意点としては，https://github.com/okumuralab/literacy4/blob/master/data/birthdeath.csv ではなく，Raw と書かれたボタンのリンク先 https://github.com/okumuralab/literacy4/raw/master/data/birthdeath.csv でもなく，それをクリックしたときにリダイレクトされる先 https://raw.githubusercontent.com/okumuralab/literacy4/master/data/birthdeath.csv をフェッチしなければならない点です。

Last modified: