折線グラフ（d3.js ＋CSVデータ、ウィンドウ内領域一杯サイズにプロット＋ウィンドウリサイズ対応）

こんにちは。
d3.js を利用し、折線グラフ^{1 2} をウィンドウ内領域一杯サイズにプロット描画しました。加えて、ウィンドウ・リサイズ、CSVファイルのドロップによるデータ読み込みに対応させました。

CSVデータ例は：

$ head -n4 sample.csv 
date,value
2013-04-28,135.98
2013-04-29,147.49
2013-04-30,146.93

ソース

ソースおよび動作例は下記です：

• "d3.js responding to window's resizing" (bl.ocks)
  • 同 (ウィンドウ・フルスクリーン・サイズで動くことを確認する)

ウィンドウ・リサイズへの対応は下記の部分です：

window.addEventListener("resize", debounce(render));

ファイルのドロップによる読み込みは下記の部分です：

d3.select('svg').on('drop', async function(event, _) {
  let data = Array.from(event.dataTransfer.files).map(f => f.text());
  data = await Promise.all(data);

---

1. line chart + scatter plot です。 ↩

2. 横軸変数は日付です。 ↩