データ可視化の成り立ち・歴史・現在地 〜折れ線グラフの誕生からD3.js、Observableまで〜

## はじめに

　以前の[Qiita記事](https://qiita.com/tomo_makes/items/4d69f347a5e49346df37)では、データ可視化の方法論を学ぶStanford大の授業を取り上げました。本記事では、データ可視化の歴史に注目します。
まず書籍『[データ視覚化の人類史―グラフの発明から時間と空間の可視化まで](https://amzn.to/3IrPjzP)』を紹介、特に1990年代から2000年代のイベントを概観した後、2010年代ではD3.js、Vegaプロジェクト、Observableを取り上げます。最新情報を知る場として、2021年12月末に行われ、録画が公開されているData Visualization Japanのミートアップについても紹介します。

## データ可視化の成り立ちと歴史

折れ線グラフや棒グラフはいつどのように生まれたのか。データ可視化とは何か。それはどのように始まり、どう活用されてきたのか。そんな問いかけに答えてくれる書籍が、つい最近出版、翻訳されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64608/1923d001-c1a9-0080-8b40-c88c1a30a340.png)
『[データ視覚化の人類史―グラフの発明から時間と空間の可視化まで](https://amzn.to/3IrPjzP)』 (Michael Friendly、Howard Wainer著、飯嶋 貴子 訳) では、データ・ビジュアリゼーション (本書ではデータ視覚化と訳している) という方法が、どこで、なぜ考案され、どのように発展したかという歴史と概要を順を追って、豊富な資料とともに説明しています。

[『データ視覚化の人類史』思考すること、伝えること グラフ手法の進化プロセス - HONZ](https://honz.jp/articles/-/46156)に概要が掴めます。「データのグラフ化」という概念は、17世紀オランダの地図作成者、ミヒャエル・ファン・ラングレンによること、折れ線グラフ、棒グラフ、円グラフなど、よく使うグラフのほとんどが18世紀後半、ウィリアム・プレイフェアという一人のスコットランド人によって開発されたことなど。

　著者の一人、Michael Friendly氏による「マイルストーンプロジェクト」は、Webで閲覧できます。データ視覚化の歴史について、ワンストップでまとめることを目標に、300ものデータ視覚化に関連する重要な出来事が、画像や原典への参照と共にデータベース化されています。書籍で紹介された図表も、Webサイト「[History of Data Visualization](https://friendly.github.io/HistDataVis/)」で見られます。

![Friendly-ms-project.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64608/487f0d0a-802c-ee8a-2655-3a2225a8be40.png)


> 出典: [Milestones in the History of Thematic Cartography, Statistical Graphics, and Data Visualization](https://www.datavis.ca/milestones/)

　8千年もの歴史、特に直近4百年でのイノベーションについては大半を書籍の説明やマイルストーンプロジェクトWebサイトに譲り、ここでは1990年前後から現在までの主要なイベントを見てみましょう。時系列順に並べてみます。　

![Friendly-ms-project-90-10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64608/bd505e79-8124-2202-4ba3-ac4e58f0d2df.png)

#### Interactive something (1990前後)

　計算、描画性能の向上に伴い、1990年前後には、時系列、地図様々なエリアで、インタラクティブな可視化が発表されてきました。データ可視化の国際学会IEEE VISも、第1回が1990年です。

#### Grammar of Graphics (1999)

　直訳すると「グラフィックスの文法」となります。これは、Leland Wilkinson氏が、データ、チャート、グラフなどの文法規則をオブジェクト指向のフレームワークで包括的に体系化したものです。Grammar of Gprahics自体は実装言語に依存しない考え方であり、実装例としては後述のR言語におけるggplot2が有名です。

![Friendly-ms-after-2000.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64608/59f8f835-ed04-530e-04c8-2ec67e7d1f82.png)


> 出典: スパークラインのみ[Edward Tufte forum: Sparkline theory and practice Edward Tufte](https://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0001OR&topic_id=1)より。それ以外は[Milestones in the History of Thematic Cartography, Statistical Graphics, and Data Visualization](https://www.datavis.ca/milestones/index.php?group=1975%2B)より抜粋

#### Tag cloud, Word cloud (2002)

　今では当たり前に使っているのを目にするタグクラウド、ワードクラウドといった、大量のテキストを視覚的に要約して表現する方法が、Tim Flanagan氏により発表されたのは2002年です。ある文書や、文書群の中で使用された、単語の頻度を視覚的に表示することで、その文書のなかの主要なテーマを際立たせることができ、質的な分析に役立てられます。

　私は、データ可視化について調べ始める前は、タグクラウド、ツリーマップ、後述のスパークラインなど、アプリケーションやWebで目にしていたものの、それらの表現方法にはそれぞれ発明者がいる (コンピュータによる可視化分野の進化を考えると当たり前ではあるのですが) ということが小さな驚きでした。

#### Sparkline (2004)

　スパークラインという「名称」の初出は2004年でした。これはEdward Tufte氏の発表したものです。スパークラインは、テキストや表と一緒に視覚情報を表示するためにシンプルにデザインされているにも関わらず、多くのデータ量を伝達できます。この以前にも、[Peter Zelchenko氏による、スパークライン的なものの実装は見られた](https://en.wikipedia.org/wiki/Sparkline#/media/File:Screenshot_of_Sparklines_in_Medved_QuoteTracker,_1998.png)ようです。

　例えばExcelの通常グラフ作成では、複数の行列にまたがる描画オブジェクトが生成されますが、Excelのスパークラインでは、ある1つのセルの中に小さな折れ線グラフや棒グラフが表示されます。スパークラインには縦横軸のラベルはありませんが、時系列での変化などの情報をコンパクトながらリッチに伝えられるため、重宝されている方も多いでしょう。

#### Gapminder (2005)

　インタラクティブな可視化のデモとして例示されるのが、Hans Rosling氏によるGapminderです。バブルチャートが時系列に沿って上下に動く様を見たことがある方もいらっしゃるのではないでしょうか。世界情勢、社会問題等の統計データを、5次元で一度に表現できます。動くバブルチャートでは、その5次元は以下の視覚属性にマッピングされています。

- X軸
- Y軸
- 時間
- プロットサイズ
- 色

　Gapminderは、その後Googleに買収されています。また、Mike Bostock氏による[D3.jsでの再実装](http://bl.ocks.org/arthurwelle/raw/01506d8136f6898b2123cd897b8ba59e/?raw=true)があります。

#### Computational graphics language: ggplot2 (2006)

　ggplot2は、前述のGrammar of GraphicsをR言語で実装し、美しい統計図表を簡単に作成できるようにしたオープンソースライブラリです。その後リリースされた、Hadley Wickam氏による他ライブラリとまとめて[Tidyverse](https://www.tidyverse.org/)というデータサイエンスのためのRライブラリ群を形成しています。これらのライブラリは、データの前処理から可視化に、文法及びデータ操作の一貫性をもたらし、R言語でのデータの取り扱いやすさと、学習効率を飛躍的に向上させました。

　Hadley Wickam氏は、関連して『[A layered grammar of graphics](https://vita.had.co.nz/papers/layered-grammar.html)』(2010) という論文を発表しています。

#### Chord diagram (2009)

　ある要素と要素の繋がりを可視化する方法として、Martin. I. Krzywinski氏の円形コードダイアグラムが挙げられます。カテゴリなどの変数間の関係を分析するためにデザインされた円形のチャートです。主な用途はゲノム構造の分析、表現が挙げられます。

　「マイルストーンプロジェクト」に載っているのはここまでですが、独自で2010年代の出来事を足してみましょう。


## 2010年代以降の出来事

　D3.js、Vegaプロジェクト、Observableについて紹介します。

#### D3.js (2011)

　Web上での情報可視化、データ可視化に触れている方で、D3.jsの名前を聞いたことのない方は、いらっしゃらないのではないでしょうか。[Gitstar RankingのRepositories Ranking](https://gitstar-ranking.com/repositories)によると、d3.jsは2022年1月現在、スター数で全体の28位です。

![gitstar-d3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64608/7526e156-f1f8-0d3c-8b67-77dce78b7daa.png)

　何気なく使っている、聞いているD3.jsですが、始まりは「[D3: Data-Driven Documents](http://vis.stanford.edu/papers/d3)」という論文に見ることができます。著者としてはMichael Bostock氏、Vadim Ogievetsky氏、Jeffrey Heer氏、3人の名前が挙がります。また、D3.js 10周年として、Mike Bostock氏による振り返り『[10 Years of Open-Source Visualization](https://observablehq.com/@mbostock/10-years-of-open-source-visualization)』がポストされています。

#### Vega, Vega-lite, Altair (2013-)

　Vegaプロジェクトは、University of WashingtonのInteractive Data Lab (UW IDL) チームにより開発されています。Grammar of GraphicsのR実装がggplot2とすると、VegaプロジェクトがそれぞれJavaScript実装のVegaやVega-lite、Python実装のAltairを手掛けています。UW IDLには、先述のD3.js開発時、Stanford大でMike Bostock氏の指導にあたったJeffery Heer氏がいます。

　Vegaプロジェクトの目的は、「使用可能で相互運用可能なツールのエコシステムを促進し、探索的なデータ分析からカスタム可視化デザインによる効果的なコミュニケーションまで、幅広いユースケースをサポートすること」とされています。

　Jeffery Heer氏は、Prefuse、Protovis、D3.jsなどのデータ可視化ツールに関わってきました。ただ、これらの可視化は、熟練したデザイナーが手作業でコーディングするものであり、世の中の大半を占めるExcel等のスプレッドシートからのグラフ作成、BIダッシュボードソフトウェアから生成するグラフと比べると、一部でしかありません。Vegaは、これらの領域にもアプローチするプロジェクトです。Excel、BIソフトウェアなどは、反復的かつインタラクティブなデータ分析のプロセスをサポートするには、まだ不十分な点が多くあります。そのため、インタラクティブなデータ可視化のためのツールスタックを開発するのが、Vegaプロジェクトです。利用例としては、Vega記法を使うことで、[Wikipedia上にグラフ拡張として直接埋め込める](https://www.mediawiki.org/wiki/Extension:Graph)ようになっています。

> 出典: [About the Vega Project | Vega](https://vega.github.io/vega/about/)

### Observable (2018-)

![observable-top.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64608/faaf1ced-2bad-d7d7-7f07-5d377b394846.png)

　Observableは、D3.jsの開発者の一人であるMike Bostock氏と、元VP of Engineering at GoogleのMelody Meckfessel氏により創業されました。　トップページにある通り、チームでデータを探索的に分析し、説明すること。そして、新しいインサイトを発見し、より多くの質問に答え、より良い決断を下すために使うこと。それらを目的に、ノートブック型のJavaScript実行環境を提供しています。Webブラウザ単体で動作します。また、ノートブック自体を共有する、フォークする、複数人で編集するといった、コラボレーションのための機能を数多く備えています。

　[【JS/ Python両方OK!】「データ可視化」が歴史から実装まで体系的に学べるStanford講座の独習ノート](https://qiita.com/tomo_makes/items/4d69f347a5e49346df37)では、Observableを活用した、Vega-liteによる可視化チュートリアルを紹介しています。

## 最新を知る: Data Visualization Japan Meetup 2021

　さて、ここまでデータ可視化界隈の歴史をおさらいして来ましたが、その現在地が知れるリソースも紹介します。
　[Data Visualization Japan](https://www.facebook.com/groups/datavizjapan/)は、毎年末ミートアップを実施しています。今年も2021年12月29日と30日、2日間開催されました。カジュアルに、かつ日本語でまとまった情報を得ることができます。

[データ可視化ショーケースイベント Data Visualization meetup 2021 | Peatix](https://peatix.com/event/3120368)

　今回の内容はYouTubeで公開されています。前年2020年のミートアップについても、録画映像を編集の上公開される予定があるようです。

YouTube

- [【一日目】データ可視化ショーケースイベント Data Visualization meetup 2021 - YouTube](https://www.youtube.com/watch?v=VxaZR55H9dE)

- [【二日目】データ可視化ショーケースイベント Data Visualization meetup 2021 - YouTube](https://www.youtube.com/watch?v=ZFxLzngdN_c)

　以下のタイムテーブルについて、資料が公開されているものは表題に、YouTubeビデオの開始時間を予定時間表記に、それぞれリンクを挿入しました。こちらからそれぞれ飛んで、ご覧ください。

### Day 1

- [12:30〜13:00](https://youtu.be/VxaZR55H9dE?t=303) オープニング／Lightning Talk
- [13:00〜14:00](https://youtu.be/VxaZR55H9dE?t=1985) 杉本 直也さん／静岡県が目指す「VIRTUAL SHIZUOKA構想」とは？
- [14:00〜15:00](https://youtu.be/VxaZR55H9dE?t=5524) 山辺 真幸さん／「データビジュアライズデザイン」：私たちはデータから何を見ようとしているのか
- [15:00〜16:00](https://youtu.be/VxaZR55H9dE?t=9107) 林 尚芳さん／[科学技術情報分析の面白さ](https://speakerdeck.com/hayataka88/ke-xue-ji-shu-qing-bao-fen-xi-falsemian-bai-sa)
- [16:00〜17:00](https://youtu.be/VxaZR55H9dE?t=12604) 古川 泰人さん／データ可視化マニヤは餅米の初夢を見るか

### Day 2

※実際の登壇は、清水氏→藤村氏→尾上氏→矢崎氏の順番に変更あり。

- [12:30〜13:00](https://youtu.be/ZFxLzngdN_c?t=1518) オープニング／Lightning Talk
- [13:00〜14:00](https://youtu.be/ZFxLzngdN_c?t=2963) 清水 正行さん／[汎用的な可視化ツールとしてのdeck.gl](https://gunmagisgeek.com/slide/DataVisualizationMeetup2021/#/)
- [14:00〜15:00](https://youtu.be/ZFxLzngdN_c?t=10325) 尾上 洋介さん／ビジュアライゼーションとモダンWeb開発
- [15:00〜16:00](https://youtu.be/ZFxLzngdN_c?t=14335) 矢崎 裕一さん／Judgit、そして、コロナ予算の探索的可視化
- [16:00〜17:00](https://youtu.be/ZFxLzngdN_c?t=6458) 藤村 英範さん／[ベクトルタイルとボクセルタイルによるシンプルで自由な可視化について](https://speakerdeck.com/hfu/bekutorutairutobokuserutairuniyorusinpurudezi-you-nake-shi-hua-nituite)



## おわりに

「データ可視化博物館」を訪れた気持ちでお楽しみいただけましたか。
　さらにObservableノートブックの見所や、IEEE VIS2021について触れた本記事の完全版は、開催中の[技術書典12](https://techbookfest.org/event/tbf12/market)で頒布中の『[機械学習の炊いたん５。](https://techbookfest.org/product/5166732488474624)」(by [ml-titans.](https://techbookfest.org/organization/33130002))にて、「データ可視化の歴史・最先端・Observableが開く新たな扉」という章として書いています。ご興味を持たれたら、ぜひ手に取ってみてください。他にもAttention、因果、Rustと遺伝的アルゴリズム、競馬AIと、面白い記事満載です。