視覚化サービス構築の際に気をつけること
TRANSCRIPT
![Page 1: 視覚化サービス構築の際に気をつけること](https://reader035.vdocuments.mx/reader035/viewer/2022062522/58ac22451a28abf03a8b53a9/html5/thumbnails/1.jpg)
視覚化サービス構築の際に気をつけること
@fmkz___
![Page 2: 視覚化サービス構築の際に気をつけること](https://reader035.vdocuments.mx/reader035/viewer/2022062522/58ac22451a28abf03a8b53a9/html5/thumbnails/2.jpg)
( 祝 )IE8 -> IE11
やっと色々できる☆
![Page 3: 視覚化サービス構築の際に気をつけること](https://reader035.vdocuments.mx/reader035/viewer/2022062522/58ac22451a28abf03a8b53a9/html5/thumbnails/3.jpg)
分析のテンプレ化
• R,Spotfire,Ipython での対話的な分析方法や視覚化は楽しいですね
• で、同じようなデータはテンプレ化、スクリプト化して自動化したくなりますね
• 最終的には WEB サービス化してもっと大きなグループに公開したくなりますが…
![Page 4: 視覚化サービス構築の際に気をつけること](https://reader035.vdocuments.mx/reader035/viewer/2022062522/58ac22451a28abf03a8b53a9/html5/thumbnails/4.jpg)
非分析者にサービスを拡大するのは結構めんどくさい
![Page 5: 視覚化サービス構築の際に気をつけること](https://reader035.vdocuments.mx/reader035/viewer/2022062522/58ac22451a28abf03a8b53a9/html5/thumbnails/5.jpg)
わりとよくぶち当たる問題
• リテラシーの問題–表現された情報を読み取るちから–ソフトウェアを導入するちから
• データ構造の問題–データフレーム以外の構造にどう対応するか
![Page 6: 視覚化サービス構築の際に気をつけること](https://reader035.vdocuments.mx/reader035/viewer/2022062522/58ac22451a28abf03a8b53a9/html5/thumbnails/6.jpg)
Spotfire の webplayer 埋め込み
• 楽ちん• 分析者だけのグループで利用するならこ
れで十分–勝手にデータいじれるし–意図を自分で読んでくれるし
• でもこれはあまりうまくいかない
![Page 7: 視覚化サービス構築の際に気をつけること](https://reader035.vdocuments.mx/reader035/viewer/2022062522/58ac22451a28abf03a8b53a9/html5/thumbnails/7.jpg)
リテラシぃいいいいいい
• Treemap 読める人は意外に少ない
• 箱ひげのひげの意味が理解できない
• 難易度高い視覚化は嫌われる
http://www.visualthinking.jp/archives/5603
![Page 8: 視覚化サービス構築の際に気をつけること](https://reader035.vdocuments.mx/reader035/viewer/2022062522/58ac22451a28abf03a8b53a9/html5/thumbnails/8.jpg)
教育すればいいんじゃないの?
![Page 10: 視覚化サービス構築の際に気をつけること](https://reader035.vdocuments.mx/reader035/viewer/2022062522/58ac22451a28abf03a8b53a9/html5/thumbnails/10.jpg)
インフォグラフィックのようにわかりやすくないと響かない
http://graphics.wsj.com/infectious-diseases-and-vaccines/
![Page 11: 視覚化サービス構築の際に気をつけること](https://reader035.vdocuments.mx/reader035/viewer/2022062522/58ac22451a28abf03a8b53a9/html5/thumbnails/11.jpg)
でもインフォグラフィックはメッセージ(分析結果)の伝達手段だから…
![Page 12: 視覚化サービス構築の際に気をつけること](https://reader035.vdocuments.mx/reader035/viewer/2022062522/58ac22451a28abf03a8b53a9/html5/thumbnails/12.jpg)
能動的
受動的
リテラシーの必要性
インフォグラフィック
この辺向けのサービスにしないといけない
![Page 13: 視覚化サービス構築の際に気をつけること](https://reader035.vdocuments.mx/reader035/viewer/2022062522/58ac22451a28abf03a8b53a9/html5/thumbnails/13.jpg)
化合物を扱う際の問題
• ケミスト向けのサービスを考える上で今は MMP を抜きには…
• グラフ構造–ノードに紐づけなきゃいけない属性も数値以
外(部分構造)だったりしてとり扱いが面倒
• Cytoscape を非分析者が使うのは難しい–プラグインも構造表示だけで自由度が少ない
![Page 14: 視覚化サービス構築の際に気をつけること](https://reader035.vdocuments.mx/reader035/viewer/2022062522/58ac22451a28abf03a8b53a9/html5/thumbnails/14.jpg)
でどうすんの?
![Page 15: 視覚化サービス構築の際に気をつけること](https://reader035.vdocuments.mx/reader035/viewer/2022062522/58ac22451a28abf03a8b53a9/html5/thumbnails/15.jpg)
D3.js で開発☆
![Page 16: 視覚化サービス構築の際に気をつけること](https://reader035.vdocuments.mx/reader035/viewer/2022062522/58ac22451a28abf03a8b53a9/html5/thumbnails/16.jpg)
D3.js とは
• D3.js は document ベースでデータを操作するための JavaScript ライブラリ
• 自分で色々やらないといけないがその分自由度が高い
• サンプルも充実している
![Page 17: 視覚化サービス構築の際に気をつけること](https://reader035.vdocuments.mx/reader035/viewer/2022062522/58ac22451a28abf03a8b53a9/html5/thumbnails/17.jpg)
わかりやすそうな視覚化表現とか
• Spotfire ではやりにくい表現が得られる– http://bl.ocks.org/mbostock/7607535– http://bl.ocks.org/mbostock/1046712– http://bost.ocks.org/mike/hive/– http://bl.ocks.org/mbostock/5944371– http://bl.ocks.org/mbostock/4063269
• ブラウザだと受け身感があって敷居が低そうな印象を与えられる
![Page 18: 視覚化サービス構築の際に気をつけること](https://reader035.vdocuments.mx/reader035/viewer/2022062522/58ac22451a28abf03a8b53a9/html5/thumbnails/18.jpg)
まとめ
• サービスの対象を広げると、対象者のリテラシーはほぼ確実に下がるので、そこらへんを考慮しながら開発することを考えないといけない
• 化合物情報をうまく扱えるような視覚化手法をもっと考えないといけない