Visualization Zoo! -情報可視化ができること-

技術書典11でデータ・情報可視化について書いた章と、それを元に社内のカジュアルLT会で話した内容を再構成しました。

Transcript

1. Visualization Zoo! 情報可視化ができること @tomo-makes P h o t o b y M a t t h e w H e n r y o n U n s p l a s h
2. t: @tomo_makes 某社のIoT エンジニリングマネージャ 書いたもの: 『図解速習DEEP LEARNING 』、『機械学習の 炊いたん。』シリーズ( 合同本) ほか すきなもの: 機械学習、グラフ、いろんな可視化、Diagram as Code といった形とコードの間、つくる、アジ ア・中東各国料理と音楽
3. Intro: 可視化が好きです 出典: ブログ『系統樹ハンターの狩猟記録』より、複数の系統図 石毛直道『麺の文化史』より麺の系譜図, 『進化する麵食文化：ラ ーメンのルーツを探る』
4. " 視覚情報を使ったコミュニケーションは、空中戦を地上戦にする。 さらに、皆に見下ろしの周辺視野を与えてくれる。" Visualization Zoo! 情報可視化ができること
5. 1. 視空間認知の並列処理を活用する 2. データに視覚属性を与えるGrammar of Graphics 3. 情報可視化と非線形データ構造 4. 図解を使うときのTips 5. 情報可視化とコミュニケーション " 視覚情報を使ったコミュニケーションは、空中戦を地上戦にする。　　　　　　　 さらに、見下ろしの周辺視野を与えてくれる。" Visualization Zoo! 情報可視化ができること 技術書典11 執筆をもとに、データ・情報可視化の考え方、事例、 動的・静的なコミュニケーションの紹介や深堀りを再構成
6. 視空間認知の 並列処理を活用する
7. lon, lat, speed ここにデータがあります 経度、緯度、インターネット通信速度
8. lon, lat, speed lon, lat, speed lon, lat, speed lon, lat, speed lon, lat, speed lon, lat, speed lon, lat, speed lon, lat, speed lon, lat, speed lon, lat, speed lon, lat, speed lon, lat, speed lon, lat, speed lon, lat, speed lon, lat, speed ここにデータがあります たくさん並んでいるだけでは、傾向を読み取るのは困難
9. 視空間属性の威力 地図上にプロットすると、各国の通信インフラ整備状況が浮き上がります 出典: h t t p s : / / t w i t t e r. c o m / t j u k a n o v / s t a t u s / 1 3 1 7 8 6 2 9 2 3 7 8 4 6 3 8 4 6 5 b y To p i T j u k a n o v @ t j u k a n o v
10. 前注意処理過程 視空間属性の処理は、高速かつ並列で行われる。これは利用するっきゃない! 出典: h t t p s : / / h e l p . t a b l e a u . c o m / c u r r e n t / b l u e p r i n t / j a - j p / b p _ w h y _ v i s u a l _ a n a l y t i c s . h t m
11. 視覚情報や言語情報を使った思考は、ワーキングメモリーを用いる ワーキングメモリーには、言語性と視空間性の2 種類がある それらのどちらが優位かにより、得意とする学習アプローチが変化する 『「ワーキングメモリ」とは｜児童・生徒のワーキングメモリと学習支援』 （広島大）の記事などに概要がある 参考: 2 つのワーキングメモリー 認知心理学では、視空間性の処理は並列、言語性のものは逐次処理されるという
12. エピソードの表現は文章が得意 「空を見上げると、流れ星が見 えたので願い事を唱えた」 逐次の変化を、抽象化して 伝えるのに向く 情報の階層やグラフといった構 造は図解が向く 文章で表現すると冗長で、 頭の中で再構成が必要 エピソードは文章、 概念整理は図解 出典: h t t p s : / / b s d . n e u r o i n f . j p / w / i n d e x . p h p ? t i t l e = 健忘症候 群
13. 何かのアイデアを記すときに、 why, what は文章で how は図解で と触れられることもあります。 エピソードは文章、 概念整理は図解 出典: 暦本純一著『妄想する頭 思考する手』
14. データに視覚属性を与える Grammar of Graphics
15. 1996 年にBen Shneiderman 氏は、情報可視化が扱う主要なデータ構造を 1 次元 2 次元 3 次元 多次元 木構造 グラフ構造 時系列 の7 種類であるとした。 代表的なデータ種別
16. Grammar of Graphics データに、色や形の属性を、さらに座標などの空間属性を加える 出典: G r a m m a r o f G r a p h i c s b y D a v i d K e y e s
17. Grammar of Graphics R 言語 ggplot2 ライブラリ チートシートの例 出典: g g p l o t 2 を使ったデータのビジュアライゼーション チートシート（日本語訳版）
18. さまざまなGrammar of Graphics 実装 最近ではVega 、Vega-lite 、Altair といった他言語の実装も増えた 出典: Ve g a E x a m p l e G a l l e r y
19. Maneesh Agrawala 氏のStanford 大 データの可視化講義 出典: h t t p s : / / m a g r a w a l a . g i t h u b . i o / c s 4 4 8 b - w i 2 0 /
20. Observable ノートブック (JavaScript) Observable は、"Jupyter のように" JavaScript で可視化が試せる環境
21. Observable ノートブック (JavaScript) 映画レビューサイト IMDb 、Rotten Tomatoes のレビュー相関の例 出典: h t t p s : / / o b s e r v a b l e h q . c o m / @ u w d a t a / i n t e r a c t i o n
22. Colaboratory ノートブック (Python) Python 版はAltair が使われている
23. データ可視化の応用: GIS ・地理データ US 失業率(2008 年) コロプレス図、カラースキームバリエーション 出典: C a r t o g r a p h i c Vi s u a l i z a t i o n / U W I n t e r a c t i v e D a t a L a b / O b s e r v a b l e
24. データ可視化の応用: GIS ・地理データ QGIS オープンGIS ソフトウェアによる可視化 出典: 左・中 日本と世界の統計情報の可視化 · G I S 実習オープン教材 / 右 生物の分布予測マップの作成 M a x E n t の利用とQ G I S に よる分析データの準備、可視化
25. 3D 都市モデル（Project PLATEAU ）の公開が話題とな った ラスタからベクタ、WebGL を 採用した描画への変化 Mini Tokyo 3D もそうした技術 の活用例 データ可視化の応用: GIS - 3D データの連動 h t t p s : / / w w w. m l i t . g o . j p / p l a t e a u / l e a r n i n g /
26. 生物学研究から生まれたCytoscape 開発者の小野氏が『Cytoscape やネ ットワーク解析・可視化に関する情 報の集め方』(2014) をはじめ、複数 の可視化全般、およびネットワーク 解析に関する記事を書かれ、必見 JavaScript 版のCytoscape.js とい う描画ライブラリも提供 データ可視化の応用: 複雑なネットワーク分析 h t t p : / / m a n u a l . c y t o s c a p e . o r g / e n / s t a b l e / C y t o s c a p e . j s _ a n d _ C y t o s
27. 非線形なデータ構造 -- 木やグラフ Grammar of Graphics は万能に見えますが、基本では木やグラフは非対応 出典: 左 g g g r a p h 、右 Ve g a
28. より複雑な可視化事例 木構造、グラフ構造などの非線形データ構造や、 それらと数量の組合せ、データを生み出した元の構造を組み合わせた可視化 出典: M a n u e l L i m a 著『T H E B O O K O F T R E E S ― 系統樹大全』
29. Manuel Lima 氏の持つWeb サイト visual complexity では、 さらに多くの事例が紹介されている より複雑な可視化事例 - v i s u a l c o m p l e x i t y. c o m | A v i s u a l e x p l o r a t i o n o n m a p p i n g c o m p l e x n e t w o r k s
30. 可視化ライブラリ一挙紹介 dataviz.cafe 700+ のデータ・情報可視化ライブラリへのリンク集 d a t a v i z . c a f e h t t p s : / / d a t a v i z . c a f e /
31. 非線形データ構造をもつ 意味や情報の可視化
32. 我々が見ている世界は、いつも氷山の一角でしかない。 -- Peter Senge 著『The Fifth Discipline 学習する組織』 実ビジネスに見るシステム思考と可視化の効果
33. 「不確実性」に立ち向かう 出典: 広木大地著「エンジニアリング組織論への招待」
34. システム思考とは
35. 科学的アプローチは、以下の三つの要素からなるとされています。 還元主義 再現可能性 反駁、反証 システム的なものの見方として以下があります。 創発特性 構造同型性 システム思考とは 従来の「科学的な」考え方と、システム的なものの見方の違い 出典: ビジネスにおけるシステム思考
36. 考えを整理するときに、箇条書きで洗い出すというアプローチが一般的 日常的に「漏れなく、ダブりなく」（MECE ）を意識して書き出し、議論を することも多い 箇条書きの限界
37. 顧客セグメント 価値提案 チャネル 顧客との関係 収益の流れ リソース 主要活動 パートナー コスト構造 ビジネスモデルキャンバスの箇条書き 『ビジネスモデル・ジェネレーション』（Osterwalder ほか著　2011 ）で紹介された ビジネスモデルキャンバス
38. 位置と接続を足すと現れる静的構造
39. 接続に矢印を足すと現れる動的構造 出典: B u s i n e s s M o d e l C a n v a s と S y s t e m D y n a m i c s の統合による ビジネスモデル設計評価手法 （湊 2 0 1 3 ）
40. ビジネスモデルキャンバスとシステム思考 出典: B u s i n e s s M o d e l C a n v a s と S y s t e m D y n a m i c s の統合による ビジネスモデル設計評価手法 （湊 2 0 1 3 ）
41. 図解を使うときのTips
42. コロナ禍における働き方の変化 「同じ時間・同じ場所」で、「相手の表情」だけでなく、失われたもの 図解のつかいどころ？
43. ホワイトボードなどで描かれた「形」「位置」「図表」を共有しながら話す ありがたみ 図解のつかいどころ？
44. 「同じ時間・違う場所」「違う時間・違う場所」へのコミュニケーションの 軸足が移る 「形」「位置」「図表」をどう効率的に扱えば良いか 図解のつかいどころ？
45. 従来の手描きメモの代わりにJamboard とiPad Pro 、またはペンタブレット スティッキーノートワークの代わりに、Miro やMural 図解のつかいどころ？
46. 手描きの範囲で行える図解は、Structured Communication （ストラクチャード コミュニケーション）協会 公式サイトによくまとまっています。構造化の手順 が、以下のように整理されています。 情報を収集する 情報を分類し話題にまとめる 話題の関連性から構造を選択する 情報を構造に従い図解で表現する 図解 -- まずは手で描く
47. 図解Advent Calendar 2020 （私も執筆の過程でこの存在を知りました) 『解説：図解の種類は何種類？』が公開されている 痒いところに手の届く内容で、複数の本で取り上げられている図解表現をサー ベイし、上位分をまとめている 図解表現のサーベイ
48. 図解表現のサーベイ 出典: 『解説：図解の種類は何種類？』 ( h t t p : / / s c a . s n s . h o l d i n g s / 2 0 2 0 / 1 2 / b l o g - p o s t . h t m l )
49. 手描きをするときに、 頭においておくとよい構造集 図解表現のサーベイ 出典: h t t p s : / / w w w. b o s s - j . c o m / s t r u c t u r e d c o m m u n i c a t i o n . h t m l
50. Kroki! PlantUML 、Mermaid 、Graphviz 、Vega-lite のラッパーとして動くDiagram as Code 系ライブラリ h t t p s : / / k r o k i . i o / e x a m p l e s . h t m l より一部改変
51. 情報可視化とコミュニケーション
52. 静的レポート 動的な記事によるコミュニケーション データジャーナリズム リアルタイムコミュニケーションと図解 情報可視化とコミュニケーション 伝達のための可視化には、いろいろな種類がある
53. データ可視化をし、何らかの得られた知見を伝えたいとき、Jupyter Notebook やR Markdown などを用いてレポートにまとめる 背景、仮説、分析結果、考察などを項目に分けて記述する そういったレポートに埋め込む図表をインタラクティブなものとしたり、BI ダッシュボードを使い動的な要素を足すことがある 静的レポート
54. 動的な記事によるコミュニケーション 20 年9 月に『Communicating with Interactive Articles （インタラクティブ記事によ るコミュニケーション）』と題した論文が発表された 出典: " C o m m u n i c a t i n g w i t h I n t e r a c t i v e A r t i c l e s " ( F r e d H o h m a n 他 2 0 2 0 )
55. Communicating with Interactive Articles 出典: " C o m m u n i c a t i n g w i t h I n t e r a c t i v e A r t i c l e s " ( F r e d H o h m a n 他 2 0 2 0 )
56. 他のインタラクティブな記事 ( 例: 音楽) M u s i c m a p h t t p s : / / m u s i c m a p . i n f o / / I s k u r ’s g u i d e t o e l e c t r o n i c m u s i c h t t p s : / / m u s i c . i s h k u r. c o m / T h e G l o b a l J u k e b o x h t t p s : / / t h e g l o b a l j u k e b o x . o r g / / C l a s s C l a s s h t t p : / / a r t q u i z . s o u r c e f o r g e . n e t / c l a s s c l a s s /
57. データジャーナリズム 2012 年に『データ・ジャーナリズム・ ハンドブック』がクリエイティブコモン ズとして公開、有志により日本語に翻訳 されている
58. ファシリテーションのステップと、図解を用いて議論を進めることの効能とし て、以下が説明されています。 Aggregation 話があちこちに散らばった状態から、何を話すべきか分かるようになる Reframing 問題を複雑に感じて思考停止してしまう状態から、別の視点を発見して前 向きになる Collaboration それぞれの違いを怖がってしまう状態から、多様性として楽しめるように なる リアルタイムコミュニケーションと図解 出典: 清水淳子著『G r a p h i c R e c o r d e r ― 議論を可視化するグラフィックレコーディングの教科書』
59. Warm up 心を開いてもらう Aggregation 耳を傾ける 図に写しとる Reframing and Collaboration 共に深める 総括する Action 共に行動する 参考: 私はどんなステップでやっているか 『Graphic Recording 』本より改変
60. 参考: 私の使っているツール Concepts による手描き
61. 話し手 .................................... 暗黙 - ︎-> 認知 - ︎-> 発話 - ︎-> 解釈 　　( 発見) 　 　 ( 信頼) 　　 ( 知識) ポジティブな雰囲気作り。マウンティングなし 受け止める十分な知識（あえて専門用語でサインを送る） 謙虚な姿勢（正直に知らないは知らないという。あえて止める） これらのやりとりが、ワンタイムではなく信頼貯金となる 絵は周辺、過去をつなぎ発見につながる 参考: 単位時間で共有される情報を最大にしたい 情報の流れの「バルブ」( 砂時計じゃないよ!) を開けていくために
62. 心を開いてもらう: これがないといくら聞いても出てこない 最初は疑い、値踏みから入る この人に対して話をすると意味がある、メリットがあると思わせる 耳を傾ける: できるだけ話してもらう 図に写しとる: 話されたことを書き取る 共に深める 総括する 共に行動する: 具体的なアクションアイテムで締める 参考: そのために会議の場を「耕す」 情報の流れの「バルブ」を開けていくために
63. 返報性: 何かを得るために、何かを与える コミットメントと一貫性: 一貫性があるとみられたいという欲求を刺激する 社会的証明: 人は他人の行動に影響される 好意: 人を好ましいと思えば、その人の意見を聞き入れやすくなる 権威: 権威あるものに従いやすい 希少性: あるものが希少だと感じると、それがもっと欲しくなる 参考: 説得力の6 原則(Cialdini) マーケティングや営業、プレゼンテーションなどで使われる考え方
64. 1. 視空間認知の並列処理を活用する 2. データに視覚属性を与えるGrammar of Graphics 3. 情報可視化と非線形データ構造 4. 図解を使うときのTips 5. 情報可視化とコミュニケーション まとめ 図解や情報可視化の考え方、事例、 動的・静的なコミュニケーションの紹介や深堀りを再構成
65. " 視覚情報を使ったコミュニケーションは、空中戦を地上戦にする。 さらに、皆に見下ろしの周辺視野を与えてくれる。" まとめ
66. 詳しく読みたい方は...