Spinach Forest

入門活動 - D3 #2

04:32. 目が覚めてダラダラインターネットして、コーヒーは今日はやめといて、そろそろやってくかな。

  • Learn D3: Scales / D3 / Observable
  • Observable notebook, すべての cell が reactive... というか "observable" なのか。Linear に読んでいくのに向いてない・・・。
  • observablehq/htl: Hypertext Literal
  • 突然 JS の Literal を使って生の SVG を書き始めた・・・D3 って jQuery みたいに SVG 作るものじゃなかったの・・・。しかもリテラルと式展開がネストしまくりで認知負荷高すぎの可読性ゼロ。正気とは思えない・・・。

htl.html`<svg viewBox="0 0 ${width} ${height}" style="max-width: ${width}px; font: 10px sans-serif;">
  <g fill="steelblue">
    ${fruits.map(d => htl.svg`<rect y="${y(d.name)}" x="${x(0)}" width="${x(d.count) - x(0)}" height="${y.bandwidth()}"></rect>`)}
  </g>
  <g fill="white" text-anchor="end" transform="translate(-6,${y.bandwidth() / 2})">
    ${fruits.map(d => htl.svg`<text y="${y(d.name)}" x="${x(d.count)}" dy="0.35em">${d.count}</text>`)}
  </g>
  ${d3.select(htl.svg`<g transform="translate(0,${margin.top})">`)
    .call(d3.axisTop(x))
    .call(g => g.select(".domain").remove())
    .node()}
  ${d3.select(htl.svg`<g transform="translate(${margin.left},0)">`)
    .call(d3.axisLeft(y))
    .call(g => g.select(".domain").remove())
    .node()}
</svg>`

はー・・・。感想:

  • 自分の JS 力が低いのでこまごまとしたところで戸惑いがある。
  • Observable はねーわ。これなしのプレインな D3 を触れるようにしないといけない。つまりフロントエンド基礎知識が必要。
  • D3 やたらたくさん機能があるので、ぜんぜん把握できない。サンプルを写経するなり、なんらかのデータを実際に可視化するなりが必要。

Python や R で EDA するとは違って D3 の可視化はウェブフロントエンドのニッチなのだろうな。たとえばデータサイエンティスト連れてきてほらこれで可視化しろよ、とかいってもできるとは思えない。

D3 の可視化は誰かが何らかの発見をして結論を出した後、その発見・結論を示せる JSON とかを事前に用意しておいて、そいつをかっこよく表示してあげるというもの。インタラクティビティも作者の意図を読者に伝えるためのギミック。

仮に D3 を EDA に使おうと思ったらデータソースをつなぎこむ必要があるので、そういうシステムを作る必要がある。大仕事。(Observable はそういうのを一定程度やってくれるっぽいが。)

自分には Colab で EDA しているときに Altair に足りない機能を D3 で補いたい期待があったが、それは難しそうに見える。できなくはないだろうけど・・・。もう一つの期待は社内 dashboard のしょぼさをドメイン固有なフロントエンドを用意して補う路線で、そっちのほうが（自分のフロントエンド力の無さを差し引けば）現実的かな。

いずれにせよ次にやるべきことは D3 をつかって E2E でなんらかのウェブアプリなりサイトなりを作ることだろうね。あまりアイデアがないなあ。保留しつつそのうち考えます。