可視化デザインフレームワークの紹介 #yjbonfire

公開 Bonfire Data Analyst #3 可視化デザイン フレームワークの紹介 2020年9⽉3⽇ ヤフー株式会社 ⽔野 加寿代 Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.

公開 ⾃⼰紹介 ⽔野 加寿代（みずの かずよ） 略歴（抜粋） 2017 - @ヤフー株式会社 データ統括本部 社内データ分析ツールのフロントエンド開発 Bonfire Data Analyst #2 で発表 2012 – 2017 @東⼤博⼠課程 データ可視化の研究 Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 2

• https://yj-meetup.connpass.com/event/136483/

公開 今⽇の内容 内容 Visualization Analysis & Designの 可視化デザインフレームワークの概要と事例を紹介 対象者の層 https://www.amazon.co.jp/dp/1466508914/re f=cm_sw_em_r_mt_dp_U_NRJrEbQXF2NJF データから、チャート・ダッシュボード・ビジュアル分析ツールを作る⼈ ゴール フレームワークについて… 「想像がつく」「メリットを知る」「事例を1つ知る」 Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 3

• https://www.amazon.co.jp/dp/1466508914/ref=cm_sw_em_r_mt_dp_U_NRJrEbQXF2NJF

公開 可視化デザイン フレームワークとは︖ Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.

公開 フレームワークの役割 可視化で何を知りたい︖ どこまでデータ⾒せる︖ どんなグラフがいい︖ 何⾊がいい︖ データの更新頻度は︖ ユーザーが使える時間は︖ ⾒るデバイスは︖ 売り上げ アップ データと⽬的 ︖ ユーザーのリテラシーは︖ どのデータが⼤事︖ データの⼤きさは︖ この結果を何に使うの︖ 課題がたくさんあり、⾃由度が⾼すぎる。 可視化ツール フレームワークの役割 = 課題を整理し、デザインの⼿順を体系化 Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 5

公開 フレームワークのメリット ・可視化⽅法の答えがわかる ・課題の優先度・判断基準・検証⽅法がわかる - どの課題から解決するか決める - 可視化デザインを⽐較する - デザインの効果を確かめる ・⾃分が扱っているケースと似たケースを探せる NO MORE 無駄可視化 Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 6

公開 Visualization Analysis & Design 可視化デザインフレームワークの紹介 Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.

公開 Visualization Analysis & Designの紹介 ・データ可視化の教科書（学部⽣向け） ・可視化研究の歴史から、デザイン⼿順を体系化 ・課題整理︓what-why-how ・検証⽅法︓可視化デザインの妥当性を構造化 [余談] ・理論だけではなく、事例紹介もある ・講義の動画・スライドが便利（本を読むより全然早いです） Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 8

公開 課題整理︓What-Why-How （概要） What (data) 対象データ Why (task) ユーザーがその可視化で何をしたいか How (vis idiom) データ可視化の⼿法 What Why How 誰に広告 打とう︖ データ Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. ユーザーのタスク 可視化 9

公開 課題整理︓What-Why-How （概要） What (data) 対象データ Why (task) ユーザーがその可視化で何をしたいか How (vis idiom) データ可視化の⼿法 What Why How データ可視化の 本・ガイドライン が参考になる 誰に広告 打とう︖ データ Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. ユーザーのタスク 可視化 10

公開 課題整理︓What-Why-How（活⽤⽅法） What? Datasets Attributes Data Types Items Attribute Types Attributes Links Positions Grids Categorical Data and Dataset Types Tables Networks & Trees Fields Items Items (nodes) Grids Attributes Links Attributes Positions Geometry Clusters, Sets, Lists Items Items Dataset Types Tables Networks Fields (Continuous) Grid of positions Attributes (columns) Link Node (item) Cell containing value Cell Trees Ordering Direction Sequential Diverging Attributes (columns) Value in cell Multidimensional Table Ordinal Quantitative Attributes Items (rows) Ordered Positions Cyclic ⾃分の仕事は どんなタイプの 可視化︖ Value in cell Geometry (Spatial) Position What? Dataset Availability Static Dynamic Why? How? What/Why/Howの詳細、組み合わせの相性 ⾃分の仕事と 似た事例は︖ What/Why/Howの組み合わせ事例 Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 11

公開 検証⽅法︓可視化デザインの妥当性 ・4レベルのvalidity ・外側から解決する Why Why What How How Whyが⼀番⼤事 Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 12

公開 検証⽅法︓可視化デザインの妥当性 階層によって 検証⽅法が異なる Threat Wrong problem Validate Observe and interview target users Threat Wrong task/data abstraction Threat Validate Justify encoding/interaction design Why Threat Validate Ineffective encoding/interaction idiom そもそもの⽬的は合っている︖ ユーザーの⾏動観察・インタビュー Threat Slow algorithm Validate Analyze computational complexity Implement system Validate Measure system time/memory Validate Qualitative/quantitative result image analysis How Threat Validate Test on any users, informal usability study 視覚表現は合っている︖ 可視化結果の画像の分析 タスクのエラー率・正答率の計測 Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. Validate Lab study, measure human time/errors for task Validate Test on target users, collect anecdotal evidence of utility Validate Field study, document human usage of deployed system Validate Observe adoption rates 13

公開 What-Why-Howを 具体例に当てはめてみる Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.

公開 what-why-howの具体例（概要） データ分析ツールでの可視化デザインの事例を当てはめてみます 事例︓数値推移のスパイク検知機能で、アナリストがそのスパイクに気づく What How スパイク検知 の結果 指標の推移 Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. ? データ分析ツール Why PVが急上昇︕ 施策の影響︖ アナリストが気付く 15

公開 what-why-howの具体例（What） 事例︓数値推移のスパイク検知機能で、アナリストがそのスパイクに気づく Question What? Datasets Data Types Items 対象データの構造（Datasets）と データタイプ（Attributes）は︖ Attributes Attribute Types Attributes Links Positions Grids Data and Dataset Types Tables Networks & Trees Fields Items Items (nodes) Grids Attributes Links Attributes Positions Geometry Clusters, Sets, Lists Items Items Tables Fields (Continuous) Grid of positions Attributes (columns) 指標の推移データ (Items / Tables) 急上昇/急降下/なしの分類 （Categorical） Link Node (item) Cell containing value Cell Trees Ordering Direction Sequential Diverging Attributes (columns) Value in cell Multidimensional Table Ordinal Quantitative Networks Items (rows) Ordered Positions Attributes Dataset Types Answer Categorical Cyclic Value in cell Geometry (Spatial) Position What? Dataset Availability Static Dynamic Why? How? Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 16

公開 what-why-howの具体例（Why） 事例︓数値推移のスパイク検知機能で、アナリストがそのスパイクに気づく Question データのどの部分（Target）を、 どうしたい（Action）か︖ Answer アナリストは、 異常値（Outlier）を 発⾒したい（Discover） Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 17

公開 what-why-howの具体例（How） 事例︓数値推移のスパイク検知機能で、アナリストがそのスパイクに気づく Question 視覚表現（Encode） データの操作⼿段(Manipulate) 切り替えの⽅法(Facet) 絞り込みの⽅法(Reduce) Answer 指標名+上昇/降下アイコン（Shape） スパイクがある指標のみ表⽰（Filter） ⽇付ごとに集約（Aggregate） Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 18

公開 まとめると… 事例︓数値推移のスパイク検知機能で、アナリストがそのスパイクに気づく 概要 今回の例 What (data) 対象データ 指標の推移、スパイクか否か Why (task) ユーザーがその可視化で何をしたいか スパイクが起きた指標に気づきたい How (vis idiom) データ可視化の⼿法 上昇/下降アイコン＋指標名を⼀覧表⽰ What? Datasets Attributes Data Types Items Attribute Types Attributes Links Positions Grids Categorical Data and Dataset Types Tables Networks & Trees Fields Items Items (nodes) Grids Attributes Links Attributes Positions Geometry Clusters, Sets, Lists Items Items Quantitative Attributes Networks Fields (Continuous) Grid of positions Attributes (columns) Link Items (rows) Node (item) Cell containing value Cell Trees Ordering Direction Sequential Diverging Attributes (columns) Value in cell Multidimensional Table Ordinal Positions Dataset Types Tables Ordered Cyclic Value in cell Geometry (Spatial) Position What? Dataset Availability Static Dynamic Why? How? Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 19

公開 ゴールのまとめ - フレームワークが何か、想像がつく - - フレームワークのメリットを知る - - Visualization Analysis & Designのフレームワークの概要紹介 課題が整理でき、優先度・判断基準・検証⽅法がわかる ⾃分が扱っているケースと似たケースを探せるようになる フレームワークの事例を⼀つ知る - データ分析ツールでの、可視化デザイン事例を紹介 データ可視化に興味がありましたら、アンケートでぜひ教えてください︕ Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 20