【JS/ Python両方OK!】「データ可視化」が歴史から実装まで体系的に学べるStanford講座の独習ノート

CS 448B Visualization (2020 Winter)は、Maneesh Agrawala氏による、Stanford大で行われた、データの可視化に関する体系的な講義です。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">スタンフォード大の&quot;CS 448B Visualization (2020 Winter)&quot;<br>がすごい。<br><br>データ可視化の体系的講義。どう図表に変換するかの理論、探索的データ分析、ネットワーク分析等の実践と盛り沢山。<br><br>スライドに加え、Observable(JavaScript), Colab(Python)どちらでも例を試せる。<a href="https://t.co/lGyPElrihg">https://t.co/lGyPElrihg</a> <a href="https://t.co/mWZnu7WBEP">pic.twitter.com/mWZnu7WBEP</a></p>&mdash; tomo-makes@図解速習DEEP LEARNING (@tomo_makes) <a href="https://twitter.com/tomo_makes/status/1293133866627031041?ref_src=twsrc%5Etfw">August 11, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

2020年冬学期の講義スライド、Observable/ ColaboratoryによるJavaScript(Vega-liteベース)、Python(Altairベース)のハンズオン教材が公開されています。

https://magrawala.github.io/cs448b-wi20/

全編英語であるため、他に取り組まれる方の索引的に使っていただければと思い、独習時の日本語メモをこちらにまとめます。なお、22年1月に、可視化の歴史に注目した「[データ可視化の成り立ち・歴史・現在地 〜折れ線グラフの誕生からD3.js、Observableまで〜](https://qiita.com/tomo_makes/items/6d88ff87b6d4d6c4700b)」という記事も書きました。


## 授業の構成

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64608/bf01f252-c989-2052-51fc-bb8cbd1c11bf.png)
> CS 448B Webサイトより

講義は2020年1-3月の10週にわたり行われたものです。最新の知見がカバーされていると言えるでしょう。多くの週は2回の講義があり、座学編は計16回分のスライド、ハンズオン編は6回分のノートブックがあります。

- **座学編**
  - 講義スライド
- **ハンズオン編**
  - Observableノートブック(JavaScript)
  - Colaboratoryノートブック(Python)

以下に、リソースへのリンクをまとめます。


### 座学編

リンク先は講義スライドです。各講義でとりあげるトピックとまとめを[後述します](https://qiita.com/tomo_makes/items/4d69f347a5e49346df37#%E5%90%84%E8%AC%9B%E7%BE%A9%E3%81%AE%E3%82%B5%E3%83%9E%E3%83%AA)。

- Week1-1 [可視化の目的](https://magrawala.github.io/cs448b-wi20/assets/slides/Lec01-purpose.pdf)
- Week1-2 [データと視覚表現のモデル](https://magrawala.github.io/cs448b-wi20/assets/slides/Lec02-data.pdf)
- Week2-1 [可視化のデザインと修正](https://magrawala.github.io/cs448b-wi20/assets/slides/Lec03-visdesigns.pdf)
- Week2-2 [探索的データ分析](https://magrawala.github.io/cs448b-wi20/assets/slides/Lec04-eda.pdf)
- Week3 [空間を効果的に使う](https://magrawala.github.io/cs448b-wi20/assets/slides/Lec05-space2D.pdf)
- Week4-1 [D3入門](https://magrawala.github.io/cs448b-wi20/assets/slides/Lec06-introD3.pdf)
- Week4-2 [D3チュートリアル](https://magrawala.github.io/cs448b-wi20/assets/slides/Lec07-d3Exercises.pdf)
- Week5-1 [インタラクティブな可視化](https://magrawala.github.io/cs448b-wi20/assets/slides/Lec08-interaction.pdf)
- Week5-2 [認知科学と可視化](https://magrawala.github.io/cs448b-wi20/assets/slides/Lec09-perception.pdf)
- Week6-1 [説明のための可視化](https://magrawala.github.io/cs448b-wi20/assets/slides/Lec10-visExplainers.pdf)
- Week6-2 [色の使い方](https://magrawala.github.io/cs448b-wi20/assets/slides/Lec11-color.pdf)
- Week7 [アニメーション](https://magrawala.github.io/cs448b-wi20/assets/slides/Lec12-animation.pdf)
- Week8-1 [ネットワーク図のレイアウト](https://magrawala.github.io/cs448b-wi20/assets/slides/Lec13-networkLayout.pdf)
- Week8-2 [ネットワーク分析](https://magrawala.github.io/cs448b-wi20/assets/slides/Lec14-networkAnalysis.pdf)
- Week9-1 [可視化を分解する](https://magrawala.github.io/cs448b-wi20/assets/slides/Lec15-deconstructingVisualizations.pdf)
- Week9-2 [テキストデータの可視化](https://magrawala.github.io/cs448b-wi20/assets/slides/Lec16-textVisV2.pdf)



### ハンズオン編

環境構築不要・ブラウザ上でハンズオンが進められるよう、以下のリソースが用意されています。

余談ですが、ハンズオン編の作者はUW Interactive Data Lab (UWはUniversity of Washingtonの略)となっています。同Lab DirectorのJeffery Heer氏は、08-13年にStanfordでAssistant Professorだったようで、今も相互に繋がりがあるのかもしれません。 Heer氏の授業([CSE512: Data Visualization](https://courses.cs.washington.edu/courses/cse512/19sp/))も、StanfordのCS 448Bとよく似た構成をとっています。

#### Observableノートブック (JavaScript)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64608/a653b0d6-0d83-3714-1c5e-2783539929fe.png)
> Vega-Lite公式Webより

JavaScriptをノートブック形式でインタラクティブに実行できるObservable上に、ハンズオン資料がホストされています。可視化用ライブラリとして [Vega-Lite](https://vega.github.io/vega-lite/) が使われており、入門からインタラクティブな図表作成までを、実行し、自分で手を加えながら学べます。

1. [Vega-Lite入門](https://observablehq.com/@uwdata/introduction-to-vega-lite)
2. [データ型、記号と視覚表現へのエンコーディング](https://observablehq.com/@uwdata/data-types-graphical-marks-and-visual-encoding-channels)
3. [データの変換](https://observablehq.com/@uwdata/data-transformation)
4. [スケール、軸、凡例](https://observablehq.com/@uwdata/scales-axes-and-legends)
5. [複数のビューで構成する可視化](https://observablehq.com/@uwdata/multi-view-composition)
6. [インタラクティブな可視化表現](https://observablehq.com/@uwdata/interaction)

こちらは「インタラクション」のノートブックから、映画レビューサイト IMDb、Rotten Tomatoesのレビュー相関をインタラクティブに比較できるようにした例です。

![observable-imdb.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64608/a541300d-2621-878d-5d9d-3c022dff3b1c.gif)

> 出典: https://observablehq.com/@uwdata/interactio

本講義で取り上げているもの以外に、[ObservableのUWアカウント](https://observablehq.com/@uwdata)下に、[地理データの可視化](https://observablehq.com/@uwdata/cartographic-visualization)などの他リソースがありました。ご興味を持たれた方は掘ってみてください。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64608/83f4dfb8-3e07-00de-2441-6b0184c387f6.png)

> US失業率(2008年 ) コロプレス図、カラースキームバリエーション
> 出典: [Cartographic Visualization / UW Interactive Data Lab / Observable](https://observablehq.com/@uwdata/cartographic-visualization)

#### Colaboratoryノートブック (Python)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64608/c887aa8c-9d00-d871-557c-520385007fc4.png)
> Altair公式ドキュメントより

同じくPythonをノートブック形式でインタラクティブに実行できるColaboratory上に、ハンズオン資料がホストされています。こちらは可視化用ライブラリとして [Altair](https://altair-viz.github.io/) が使われています。Vega-liteの文法を元にしたライブラリであり、こちらも、入門からインタラクティブな図表作成までを、実行し、自分で手を加えながら学べます。最終的にHTML/JavaScriptでのエクスポートも可能です。

1. [Altair入門](https://colab.research.google.com/github/uwdata/visualization-curriculum/blob/master/altair_introduction.ipynb)
2. [データ型、記号と視覚表現へのエンコーディング](https://colab.research.google.com/github/uwdata/visualization-curriculum/blob/master/altair_marks_encoding.ipynb)
3. [データの変換](https://colab.research.google.com/github/uwdata/visualization-curriculum/blob/master/altair_data_transformation.ipynb)
4. [スケール、軸、凡例](https://colab.research.google.com/github/uwdata/visualization-curriculum/blob/master/altair_scales_axes_legends.ipynb)
5. [複数のビューで構成する可視化](https://colab.research.google.com/github/uwdata/visualization-curriculum/blob/master/altair_view_composition.ipynb)
6. [インタラクティブな可視化表現](https://colab.research.google.com/github/uwdata/visualization-curriculum/blob/master/altair_interaction.ipynb)

こちらも[GitHub上にuwdata/visualization-curriculumリポジトリ](https://github.com/uwdata/visualization-curriculum)が存在します。Observable同様、[地理データの可視化](https://colab.research.google.com/github/uwdata/visualization-curriculum/blob/master/altair_cartographic.ipynb)などの他リソースがありました。

## 各講義のサマリ

以下はおおまかな各講義のカバートピックとまとめです。16回分のスライドについて、「どこから読み進めよう」と考える方へのインデックスとして活用ください。

個人的には、特にWeek1-1, 1-2, 2あたりの分野の成り立ちや歴史について、知らなかったことが多く、興味深く読みました。

### Week1-1 [可視化の目的](https://magrawala.github.io/cs448b-wi20/assets/slides/Lec01-purpose.pdf)

- 扱うトピック
  - 可視化の目的
     - 情報の記録
     - 情報からの推論支援(分析)
     - 情報の他者への伝達(提示)
  - コース全体で取り上げる内容の紹介
  - コースの構成
  - テキストや参考リソース



### Week1-2 [データと視覚表現のモデル](https://magrawala.github.io/cs448b-wi20/assets/slides/Lec02-data.pdf)

データと視覚表現がそれぞれどんなモデルで、相互にどう対応づけられるかを見ていきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64608/4f1396d5-7f42-83ef-34ce-ece0575698fd.png)

> 出典: CS 448B Visualization (2020 Winter)講義資料


- 扱うトピック
  - データについて
     - データモデルとコンセプチュアルモデル
     - データタイプの類型。1D, 時系列, 2D, 3D, nD, ツリー、ネットワークと様々
     - 尺度について。 もとはS.S.Stevens 1946年のまとめ
     - 関係代数とSQL
         - 射影、選択、ソート、集約、結合
         - (SELECT, WHERE, ORDER BY, GROUP BY, JOIN等に対応)
  - 視覚表現について
     - 記号とビジュアル変数、構成のレベル
         - Semiology of Graphics (J. Bertin 1967; フランスの地図学者)
         - ベルタン氏、タフテ氏... という系譜があるようです: [Before Tufte, there was Bertin. Jacques Bertin and the Graphic… | by Karl Sluis | Medium](https://medium.com/@karlsluis/before-tufte-there-was-bertin-63af71ceaa62)
     - Levels of Organization
     - 視覚表現へのエンコード。データを、位置、色、数値といった視覚的な記号に変換すること
     - 構成要素の分解
         - 著名な1869 ナポレオンのロシア遠征の可視化を例にとりあげた解説
         - ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64608/db538d2f-afa6-ea70-298d-c3c18597b8c1.png)
![](https://en.wikipedia.org/wiki/Charles_Joseph_Minard#/media/File:Minard.png)

 


### Week2-1 [可視化のデザインと修正](https://magrawala.github.io/cs448b-wi20/assets/slides/Lec03-visdesigns.pdf)

- 扱うトピック
  - 可視化の自動生成(自動デザイン)
     - APT(A Presentation Tool; Jock Mackinlay 1986. 現Tableau所属らしい)
  - デザインアルゴリズム
  - 手法の限界
  - Tableauを使った可視化の課題
  - 様々なチャートの紹介

### Week2-2 [探索的データ分析](https://magrawala.github.io/cs448b-wi20/assets/slides/Lec04-eda.pdf)

- 扱うトピック
  - データ・ラングリング(前処理)
  - データ品質の問題
  - EDA(探索的データ分析)の事例
- まとめ
  - EDAのプロセス
      - 仮説にこたえるための可視化を作る
      - 答えを検証し、新しい仮説を考える
      - それを繰り返す
    - データを適切に変換する(逆順にする、対数軸の採用など)
    - "デザインのバリエーションではなく、データのバリエーションを示すこと" -- Tufte



### Week3 [空間を効果的に使う](https://magrawala.github.io/cs448b-wi20/assets/slides/Lec05-space2D.pdf)

- 扱うトピック
    - グラフとライン
    - アスペクト比の選択
    - データのフィットと残差の描画
    - グラフィカルな計算
    - 地図のゆがみによる表現
- まとめ
    - データを視覚表現にエンコードするため、空間をどう使うかは最重要
    - 空間の変換によってもたらされる幾何学的な属性は、幾何学的推論を助けてくれる
    - できるだけ大きな解像度でデータを提示できるようにする
    - 重要な情報を強調するために、ゆがみを活用する



### Week4-1 [D3入門](https://magrawala.github.io/cs448b-wi20/assets/slides/Lec06-introD3.pdf)

(他のD3入門リソースもあることから割愛)



### Week4-2 [D3チュートリアル](https://magrawala.github.io/cs448b-wi20/assets/slides/Lec07-d3Exercises.pdf)

(他のD3入門リソースもあることから割愛)



### Week5-1 [インタラクティブな可視化](https://magrawala.github.io/cs448b-wi20/assets/slides/Lec08-interaction.pdf)

- 扱うトピック
  - 実行のへだたりと評価のへだたり(Norman 1986)
  - ポインティング
  - ブラシとリンク
  - 動的なクエリ
- まとめ
  - 多くの可視化はインタラクティブなものである 
  - 可視化の良し悪しはタスクに依存する
  - インタラクションの基本テクニックを概観した
    
    

### Week5-2 [認知科学と可視化](https://magrawala.github.io/cs448b-wi20/assets/slides/Lec09-perception.pdf)

- 扱うトピック
  - シグナルの検知
  - 量の見積り
  - 前注意的な視覚処理
  - 複数の視覚表現を使う
  - ゲシュタルトグルーピング
  - ブラインドネスの変更

  

### Week6-1 [説明のための可視化](https://magrawala.github.io/cs448b-wi20/assets/slides/Lec10-visExplainers.pdf)

- 扱うトピック
    - ストーリーを語る
    - ナラティブな可視化でデザインできる範囲
    - インタラクティブな文書
    - チャートの並び順



### Week6-2 [色の使い方](https://magrawala.github.io/cs448b-wi20/assets/slides/Lec11-color.pdf)

  - 扱うトピック
    - 色の知覚
    - 色の名前
    - 可視化に色を使うには
  - まとめ
    - 属性をコントロールする（暗さ、明るさ）
      - 可読性を担保する
      - 望まない強調表現が混入しないようにする
    - 色相のパレットを制限する（6色まで）
      - 飛び出す("pop out")色は注意して扱う
      - 知覚における色のグルーピングを意識する
      - 競合する色を使いすぎない
    - 自然な背景色の選択
      - 色のインパクトを制御する
      - コントラスト



### Week7 [アニメーション](https://magrawala.github.io/cs448b-wi20/assets/slides/Lec12-animation.pdf)

- 扱うトピック
  - 動きを理解する
  - 可視化における遷移アニメーション
      - アニメーションを実装する
- まとめ
  - アニメーションは目立つ視覚効果である
     - 注意、オブジェクトの一貫性、因果、タイミング
  - コア（合同と不安: congruence and apprehension）に沿ってデザインする
  - 用途によって使い分ける
     - プロセスには、静的なイメージが好まれる
     - 遷移には、アニメーションの利点があるが、タスクとタイミングを十分に考慮する



### Week8-1 [ネットワーク図のレイアウト](https://magrawala.github.io/cs448b-wi20/assets/slides/Lec13-networkLayout.pdf)
  - 扱うトピック
    - ツリーの配置
    - ネットワークの配置
      - Sugiyamaスタイルの配置
      - 力学モデルを用いた配置
    - ネットワークの配置の代替
      - Matrix Diagrams
      - 属性ドリブンな配置
  - まとめ
    - ツリーの配置
      - インデント、ノードリンク、エンクロージャ、レイヤ
      - スケールの問題にどう対処するか
         - フィルタ、フォーカスと文脈のテクニック
    - グラフの配置
      - スパニングツリーによるツリー配置
      - 階層的な"Sugiyama"レイアウト
      - 最適化(力学モデルの活用)
      - 属性ドリブンな配置



### Week8-2 [ネットワーク分析](https://magrawala.github.io/cs448b-wi20/assets/slides/Lec14-networkAnalysis.pdf)

- 扱うトピック
    - ネットワーク分析
      - 中心性の分析
      - コミュニティの構造分析
      - パターンを見つける
      - モデル
- まとめ
  - 構造的な分析
    - 中心性
    - コミュニティの構造
    - パターンを見つける
  - さまざまなドメインに適用することができる



### Week9-1 [可視化を分解する](https://magrawala.github.io/cs448b-wi20/assets/slides/Lec15-deconstructingVisualizations.pdf)

- 扱うトピック
   - 分類
   - マークの抽出
   - データの抽出
- まとめ
   - チャートは、データと記号表現をマッピングしたものの集合である
   - チャートのビットマップから、表現を再構築できる
   - こうした再構築により、リデザイン、再利活用ができる



### Week9-2 [テキストデータの可視化](https://magrawala.github.io/cs448b-wi20/assets/slides/Lec16-textVisV2.pdf)


  - 扱うトピック
    - データとしてのテキスト
    - 文書内容の可視化
    - 会話の可視化
    - 文書群の可視化
  - まとめ
    - 高次元データへの留意
    - 文脈と意味への留意
    - 抽象のモデリングへの留意
    - 現状は、bag-of-words(単語の出現頻度)から単語の埋め込みベクトル表現までが使われる


# 参考

- 網羅性が高く、体系的なデータ可視化に関する日本語記事として、 [改訂版: プログラマーが効果的な可視化を作成する （前編） - Qiita](https://qiita.com/keiono/items/9042bf58224ca54bdb45) および5本のシリーズ記事もおすすめです。

- UW Interactive Data Labの提供する授業スライド、リソースが以下に公開されています。ちなみにJeffery Heer氏は、D3.jsの作者の一人です。D3.js前夜の話は[こちら](https://shimz.me/blog/d3-js/3429)に紹介されています。
  - [CSE512: Data Visualization](https://courses.cs.washington.edu/courses/cse512/19sp/) (Jeffery Heer氏)

- 視覚表現方法のギャラリー。どんなデータ種別にどんな視覚表現のアプローチがあうかの類型化とともに、R, Python, D3.jsによるたくさんの具体例を紹介。
  - [From data to Viz | Find the graphic you need](https://www.data-to-viz.com/)

- 最近のデータ可視化界隈では以下の方が著名のようです。
  - Manuel Lima氏
     - [Manuel Lima: UX, Design, Data Visualization](https://www.mslima.com/)
     - [visualcomplexity.com | A visual exploration on mapping complex networks](http://www.visualcomplexity.com/vc/)
     - [著書(日本語訳)](https://amzn.to/2PRs0WM)
  - David McCandless氏
     - [Information is Beautiful](https://informationisbeautiful.net/)
     - [TED Talk「データビジュアライゼーションの美」 ](https://www.ted.com/talks/david_mccandless_the_beauty_of_data_visualization?language=ja)

- [Data visualization - Material Design](https://material.io/design/communication/data-visualization.html#principles)

- 22年1月に、可視化の歴史に注目した「[データ可視化の成り立ち・歴史・現在地 〜折れ線グラフの誕生からD3.js、Observableまで〜](https://qiita.com/tomo_makes/items/6d88ff87b6d4d6c4700b)」という記事も書きました。