東京の新型コロナ感染者数の推移（Plotly棒グラフ）

東京都の情報は毎日16:45に東京都福祉保健局からPDFで発表されます。これをスクレープして COVID-tokyo.csv を作成しています。それをPlotlyで棒グラフにしたものです：

このHTMLファイルのheadの中には（だいたい）次のように書き込んであります：

<script src="https://cdn.plot.ly/plotly-2.12.1.min.js"></script>
<script src="https://cdn.plot.ly/plotly-locale-ja-latest.js"></script>
<script>
function plot(data) {
  let date = [], confirmed = [];
  for (const row of data.split("\n")) {
    const r = row.split(',');
    if (r.length == 2) {
      date.push(r[0]);
      confirmed.push(r[1]);
    }
  }
  Plotly.newPlot("out", [
    {x: date, y: confirmed, type: "bar", width: 86400000}
  ], {}, {responsive: true, locale: "ja"});
}
window.addEventListener('DOMContentLoaded', function() {
  fetch('https://okumuralab.org/~okumura/python/data/COVID-tokyo.csv')
    .then(response => response.text())
    .then(data => plot(data));
});
</script>

グラフを出力する部分には次のように書いてあります：

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

type:"bar" で棒グラフを指定しています。width:86400000 でミリ秒単位の1日を棒の幅に設定し，棒どうしの隙間をなくしています（ヒストグラムのようにしています）。

月の名前が Jan, Feb, ... ではなく1月，2月，…と日本語化されています。こうするために，plotly-locale-ja-latest.js を読み込み，Plotly.newPlot() の第4引数に {locale: "ja"} を指定しています。

土日だけ色を変えたい場合は，積み重ね棒グラフ（{barmode: 'stack'}）にするのが簡単です。

function plot(data) {
  let date = [], wday = [], wend = [];
  for (const row of data.split("\n")) {
    const r = row.split(',');
    if (r.length == 2) {
      date.push(r[0]);
      d = (new Date(r[0])).getDay();
      if (d == 0 || d == 6) {
        wday.push(0);  wend.push(r[1]);
      } else {
        wday.push(r[1]);  wend.push(0);
      }
    }
  }
  Plotly.newPlot("out", [
    {name: "平日", x: date, y: wday, type: "bar"},
    {name: "土日", x: date, y: wend, type: "bar"}
  ], {barmode: 'stack', legend: {x: 0, y: 1}},
                 {responsive: true, locale: "ja"});
}