Help us understand the problem. What is going on with this article?

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

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

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

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

全編英語であるため、他に取り組まれる方の索引的に使っていただければと思い、独習時の日本語メモをこちらにまとめます。

授業の構成

image.png

CS 448B Webサイトより

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

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

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

座学編

リンク先は講義スライドです。各講義でとりあげるトピックとまとめを後述します

ハンズオン編

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

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

Observableノートブック (JavaScript)

image.png

Vega-Lite公式Webより

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

  1. Vega-Lite入門
  2. データ型、記号と視覚表現へのエンコーディング
  3. データの変換
  4. スケール、軸、凡例
  5. 複数のビューで構成する可視化
  6. インタラクティブな可視化表現

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

observable-imdb.gif

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

本講義で取り上げているもの以外に、ObservableのUWアカウント下に、地理データの可視化などの他リソースがありました。ご興味を持たれた方は掘ってみてください。

image.png

US失業率(2008年 ) コロプレス図、カラースキームバリエーション
出典: Cartographic Visualization / UW Interactive Data Lab / Observable

Colaboratoryノートブック (Python)

image.png

Altair公式ドキュメントより

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

  1. Altair入門
  2. データ型、記号と視覚表現へのエンコーディング
  3. データの変換
  4. スケール、軸、凡例
  5. 複数のビューで構成する可視化
  6. インタラクティブな可視化表現

こちらもGitHub上にuwdata/visualization-curriculumリポジトリが存在します。Observable同様、地理データの可視化などの他リソースがありました。

各講義のサマリ

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

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

Week1-1 可視化の目的

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

Week1-2 データと視覚表現のモデル

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

image.png

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

  • 扱うトピック
    • データについて
      • データモデルとコンセプチュアルモデル
      • データタイプの類型。1D, 時系列, 2D, 3D, nD, ツリー、ネットワークと様々
      • 尺度について。 もとはS.S.Stevens 1946年のまとめ
      • 関係代数とSQL
        • 射影、選択、ソート、集約、結合
        • (SELECT, WHERE, ORDER BY, GROUP BY, JOIN等に対応)
    • 視覚表現について
      • 記号とビジュアル変数、構成のレベル
      • Levels of Organization
      • 視覚表現へのエンコード。データを、位置、色、数値といった視覚的な記号に変換すること
      • 構成要素の分解
        • 著名な1869 ナポレオンのロシア遠征の可視化を例にとりあげた解説
        • image.png

Week2-1 可視化のデザインと修正

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

Week2-2 探索的データ分析

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

Week3 空間を効果的に使う

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

Week4-1 D3入門

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

Week4-2 D3チュートリアル

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

Week5-1 インタラクティブな可視化

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

Week5-2 認知科学と可視化

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

Week6-1 説明のための可視化

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

Week6-2 色の使い方

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

Week7 アニメーション

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

Week8-1 ネットワーク図のレイアウト

  • 扱うトピック
    • ツリーの配置
    • ネットワークの配置
      • Sugiyamaスタイルの配置
      • 力学モデルを用いた配置
    • ネットワークの配置の代替
      • Matrix Diagrams
      • 属性ドリブンな配置
  • まとめ
    • ツリーの配置
      • インデント、ノードリンク、エンクロージャ、レイヤ
      • スケールの問題にどう対処するか
        • フィルタ、フォーカスと文脈のテクニック
    • グラフの配置
      • スパニングツリーによるツリー配置
      • 階層的な"Sugiyama"レイアウト
      • 最適化(力学モデルの活用)
      • 属性ドリブンな配置

Week8-2 ネットワーク分析

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

Week9-1 可視化を分解する

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

Week9-2 テキストデータの可視化

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

参考

tomo_makes
書いたもの: 『図解速習DEEP LEARNING』『機械学習の炊いたん。』ほか すきなもの: 機械学習、グラフ、いろんな可視化、つくる、アジア・中東各国料理と音楽
https://amzn.to/2J0QNGF
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした