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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

t: @tomo_makes 某社のIoT エンジニリングマネージャ書いたもの: 『図解速習DEEP LEARNING 』、『機械学習の炊いたん。』シリーズ( 合同本) ほかすきなもの: 機械学習、グラフ、いろんな可視化、Diagram as Code といった形とコードの間、つくる、アジア・中東各国料理と音楽

Slide 3

Slide 3 text

Intro: 可視化が好きです出典: ブログ『系統樹ハンターの狩猟記録』より、複数の系統図石毛直道『麺の文化史』より麺の系譜図, 『進化する麵食文化：ラーメンのルーツを探る』

Slide 4

Slide 4 text

" 視覚情報を使ったコミュニケーションは、空中戦を地上戦にする。さらに、皆に見下ろしの周辺視野を与えてくれる。" Visualization Zoo! 情報可視化ができること

Slide 5

Slide 5 text

1. 視空間認知の並列処理を活用する 2. データに視覚属性を与えるGrammar of Graphics 3. 情報可視化と非線形データ構造 4. 図解を使うときのTips 5. 情報可視化とコミュニケーション " 視覚情報を使ったコミュニケーションは、空中戦を地上戦にする。　　　　　　　さらに、見下ろしの周辺視野を与えてくれる。" Visualization Zoo! 情報可視化ができること技術書典11 執筆をもとに、データ・情報可視化の考え方、事例、動的・静的なコミュニケーションの紹介や深堀りを再構成

Slide 6

Slide 6 text

視空間認知の並列処理を活用する

Slide 7

Slide 7 text

lon, lat, speed ここにデータがあります経度、緯度、インターネット通信速度

Slide 8

Slide 8 text

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 ここにデータがありますたくさん並んでいるだけでは、傾向を読み取るのは困難

Slide 9

Slide 9 text

視空間属性の威力地図上にプロットすると、各国の通信インフラ整備状況が浮き上がります出典: 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

Slide 10

Slide 10 text

前注意処理過程視空間属性の処理は、高速かつ並列で行われる。これは利用するっきゃない! 出典: 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

Slide 11

Slide 11 text

視覚情報や言語情報を使った思考は、ワーキングメモリーを用いるワーキングメモリーには、言語性と視空間性の2 種類があるそれらのどちらが優位かにより、得意とする学習アプローチが変化する『「ワーキングメモリ」とは｜児童・生徒のワーキングメモリと学習支援』（広島大）の記事などに概要がある参考: 2 つのワーキングメモリー認知心理学では、視空間性の処理は並列、言語性のものは逐次処理されるという

Slide 12

Slide 12 text

エピソードの表現は文章が得意「空を見上げると、流れ星が見えたので願い事を唱えた」逐次の変化を、抽象化して伝えるのに向く情報の階層やグラフといった構造は図解が向く文章で表現すると冗長で、頭の中で再構成が必要エピソードは文章、概念整理は図解出典: 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 = 健忘症候群

Slide 13

Slide 13 text

何かのアイデアを記すときに、 why, what は文章で how は図解でと触れられることもあります。エピソードは文章、概念整理は図解出典: 暦本純一著『妄想する頭思考する手』

Slide 14

Slide 14 text

データに視覚属性を与える Grammar of Graphics

Slide 15

Slide 15 text

1996 年にBen Shneiderman 氏は、情報可視化が扱う主要なデータ構造を 1 次元 2 次元 3 次元多次元木構造グラフ構造時系列の7 種類であるとした。代表的なデータ種別

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Grammar of Graphics R 言語 ggplot2 ライブラリチートシートの例出典: g g p l o t 2 を使ったデータのビジュアライゼーションチートシート（日本語訳版）

Slide 18

Slide 18 text

さまざまなGrammar of Graphics 実装最近ではVega 、Vega-lite 、Altair といった他言語の実装も増えた出典: Ve g a E x a m p l e G a l l e r y

Slide 19

Slide 19 text

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 /

Slide 20

Slide 20 text

Observable ノートブック (JavaScript) Observable は、"Jupyter のように" JavaScript で可視化が試せる環境

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Colaboratory ノートブック (Python) Python 版はAltair が使われている

Slide 23

Slide 23 text

データ可視化の応用: 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

Slide 24

Slide 24 text

データ可視化の応用: GIS ・地理データ QGIS オープンGIS ソフトウェアによる可視化出典: 左・中日本と世界の統計情報の可視化 · G I S 実習オープン教材 / 右生物の分布予測マップの作成 M a x E n t の利用とQ G I S による分析データの準備、可視化

Slide 25

Slide 25 text

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 /

Slide 26

Slide 26 text

生物学研究から生まれた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

Slide 27

Slide 27 text

非線形なデータ構造 -- 木やグラフ Grammar of Graphics は万能に見えますが、基本では木やグラフは非対応出典: 左 g g g r a p h 、右 Ve g a

Slide 28

Slide 28 text

より複雑な可視化事例木構造、グラフ構造などの非線形データ構造や、それらと数量の組合せ、データを生み出した元の構造を組み合わせた可視化出典: M a n u e l L i m a 著『T H E B O O K O F T R E E S ― 系統樹大全』

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

可視化ライブラリ一挙紹介 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 /

Slide 31

Slide 31 text

非線形データ構造をもつ意味や情報の可視化

Slide 32

Slide 32 text

我々が見ている世界は、いつも氷山の一角でしかない。 -- Peter Senge 著『The Fifth Discipline 学習する組織』実ビジネスに見るシステム思考と可視化の効果

Slide 33

Slide 33 text

「不確実性」に立ち向かう出典: 広木大地著「エンジニアリング組織論への招待」

Slide 34

Slide 34 text

システム思考とは

Slide 35

Slide 35 text

科学的アプローチは、以下の三つの要素からなるとされています。還元主義再現可能性反駁、反証システム的なものの見方として以下があります。創発特性構造同型性システム思考とは従来の「科学的な」考え方と、システム的なものの見方の違い出典: ビジネスにおけるシステム思考

Slide 36

Slide 36 text

考えを整理するときに、箇条書きで洗い出すというアプローチが一般的日常的に「漏れなく、ダブりなく」（MECE ）を意識して書き出し、議論をすることも多い箇条書きの限界

Slide 37

Slide 37 text

顧客セグメント価値提案チャネル顧客との関係収益の流れリソース主要活動パートナーコスト構造ビジネスモデルキャンバスの箇条書き『ビジネスモデル・ジェネレーション』（Osterwalder ほか著　2011 ）で紹介されたビジネスモデルキャンバス

Slide 38

Slide 38 text

位置と接続を足すと現れる静的構造

Slide 39

Slide 39 text

接続に矢印を足すと現れる動的構造出典: 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 ）

Slide 40

Slide 40 text

ビジネスモデルキャンバスとシステム思考出典: 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 ）

Slide 41

Slide 41 text

図解を使うときのTips

Slide 42

Slide 42 text

コロナ禍における働き方の変化「同じ時間・同じ場所」で、「相手の表情」だけでなく、失われたもの図解のつかいどころ？

Slide 43

Slide 43 text

ホワイトボードなどで描かれた「形」「位置」「図表」を共有しながら話すありがたみ図解のつかいどころ？

Slide 44

Slide 44 text

「同じ時間・違う場所」「違う時間・違う場所」へのコミュニケーションの軸足が移る「形」「位置」「図表」をどう効率的に扱えば良いか図解のつかいどころ？

Slide 45

Slide 45 text

従来の手描きメモの代わりにJamboard とiPad Pro 、またはペンタブレットスティッキーノートワークの代わりに、Miro やMural 図解のつかいどころ？

Slide 46

Slide 46 text

手描きの範囲で行える図解は、Structured Communication （ストラクチャードコミュニケーション）協会公式サイトによくまとまっています。構造化の手順が、以下のように整理されています。情報を収集する情報を分類し話題にまとめる話題の関連性から構造を選択する情報を構造に従い図解で表現する図解 -- まずは手で描く

Slide 47

Slide 47 text

図解Advent Calendar 2020 （私も執筆の過程でこの存在を知りました) 『解説：図解の種類は何種類？』が公開されている痒いところに手の届く内容で、複数の本で取り上げられている図解表現をサーベイし、上位分をまとめている図解表現のサーベイ

Slide 48

Slide 48 text

図解表現のサーベイ出典: 『解説：図解の種類は何種類？』 ( 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 )

Slide 49

Slide 49 text

手描きをするときに、頭においておくとよい構造集図解表現のサーベイ出典: 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

Slide 50

Slide 50 text

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 より一部改変

Slide 51

Slide 51 text

情報可視化とコミュニケーション

Slide 52

Slide 52 text

静的レポート動的な記事によるコミュニケーションデータジャーナリズムリアルタイムコミュニケーションと図解情報可視化とコミュニケーション伝達のための可視化には、いろいろな種類がある

Slide 53

Slide 53 text

データ可視化をし、何らかの得られた知見を伝えたいとき、Jupyter Notebook やR Markdown などを用いてレポートにまとめる背景、仮説、分析結果、考察などを項目に分けて記述するそういったレポートに埋め込む図表をインタラクティブなものとしたり、BI ダッシュボードを使い動的な要素を足すことがある静的レポート

Slide 54

Slide 54 text

動的な記事によるコミュニケーション 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 )

Slide 55

Slide 55 text

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 )

Slide 56

Slide 56 text

他のインタラクティブな記事 ( 例: 音楽) 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 /

Slide 57

Slide 57 text

データジャーナリズム 2012 年に『データ・ジャーナリズム・ハンドブック』がクリエイティブコモンズとして公開、有志により日本語に翻訳されている

Slide 58

Slide 58 text

ファシリテーションのステップと、図解を用いて議論を進めることの効能として、以下が説明されています。 Aggregation 話があちこちに散らばった状態から、何を話すべきか分かるようになる Reframing 問題を複雑に感じて思考停止してしまう状態から、別の視点を発見して前向きになる Collaboration それぞれの違いを怖がってしまう状態から、多様性として楽しめるようになるリアルタイムコミュニケーションと図解出典: 清水淳子著『G r a p h i c R e c o r d e r ― 議論を可視化するグラフィックレコーディングの教科書』

Slide 59

Slide 59 text

Warm up 心を開いてもらう Aggregation 耳を傾ける図に写しとる Reframing and Collaboration 共に深める総括する Action 共に行動する参考: 私はどんなステップでやっているか『Graphic Recording 』本より改変

Slide 60

Slide 60 text

参考: 私の使っているツール Concepts による手描き

Slide 61

Slide 61 text

話し手 .................................... 暗黙 - ︎-> 認知 - ︎-> 発話 - ︎-> 解釈　　( 発見) 　　 ( 信頼) 　　 ( 知識) ポジティブな雰囲気作り。マウンティングなし受け止める十分な知識（あえて専門用語でサインを送る）謙虚な姿勢（正直に知らないは知らないという。あえて止める）これらのやりとりが、ワンタイムではなく信頼貯金となる絵は周辺、過去をつなぎ発見につながる参考: 単位時間で共有される情報を最大にしたい情報の流れの「バルブ」( 砂時計じゃないよ!) を開けていくために

Slide 62

Slide 62 text

心を開いてもらう: これがないといくら聞いても出てこない最初は疑い、値踏みから入るこの人に対して話をすると意味がある、メリットがあると思わせる耳を傾ける: できるだけ話してもらう図に写しとる: 話されたことを書き取る共に深める総括する共に行動する: 具体的なアクションアイテムで締める参考: そのために会議の場を「耕す」情報の流れの「バルブ」を開けていくために

Slide 63

Slide 63 text

返報性: 何かを得るために、何かを与えるコミットメントと一貫性: 一貫性があるとみられたいという欲求を刺激する社会的証明: 人は他人の行動に影響される好意: 人を好ましいと思えば、その人の意見を聞き入れやすくなる権威: 権威あるものに従いやすい希少性: あるものが希少だと感じると、それがもっと欲しくなる参考: 説得力の6 原則(Cialdini) マーケティングや営業、プレゼンテーションなどで使われる考え方

Slide 64

Slide 64 text

1. 視空間認知の並列処理を活用する 2. データに視覚属性を与えるGrammar of Graphics 3. 情報可視化と非線形データ構造 4. 図解を使うときのTips 5. 情報可視化とコミュニケーションまとめ図解や情報可視化の考え方、事例、動的・静的なコミュニケーションの紹介や深堀りを再構成

Slide 65

Slide 65 text

" 視覚情報を使ったコミュニケーションは、空中戦を地上戦にする。さらに、皆に見下ろしの周辺視野を与えてくれる。" まとめ