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

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

Slide 66

Slide 66 text

詳しく読みたい方は...

Slide 67

Slide 67 text

No content