local good yokohama データビジュアライズソンvol.1
DESCRIPTION
「LOCAL GOOD YOKOHAMA データビジュアライズソンvol.1」での登壇資料です。TRANSCRIPT
LOCAL GOOD YOKOHAMA データビジュアライズソンvol.1
2014/07/20 (日) 10:00 - 19:00https://www.facebook.com/events/1448637512058581/
矢崎 裕一
インフォグラフィックス、 ビジュアライズ制作のコツ
矢崎裕一
• インターフェイスデザイナー • データビジュアライズデザイナー • トイコンサルタント • Code for Japanメンバー • visualizing.jp
CEREVOhttp://www.cerevo.com/ja/
Code for Japanhttp://code4japan.org/
Race for Resiliencehttp://raceforresilience.org/
ISAC Tokyo (NASAハッカソン)http://tokyo.spaceappschallenge.org/
曄田依子 ポートフォリオ
シャボン玉生成器
横浜市 人口の遷移http://yokohama.localgood.jp/data/674/
iPhone5S キャリア別通信スピード比較http://n1n9.jp/dataviz/iPhone5sDownloadSpeed/
日本に常在している外国人数の遷移http://bl.ocks.org/n1n9-jp/3470f6bf0980cf098024
DPC data visualizationhttp://n1n9.jp/dataviz/asdjh2014/tokyo_dynamic/
DPC data visualizationhttp://n1n9.jp/dataviz/asdjh2014/tokyo_static/
コツ?
・何を訴えたいか ・どう訴えたいか
http://www.extremepresentation.com/design/charts/
「示したいこと」と「チャート」の対応表(何を訴えたいか)
「地図」か否か(どう訴えたいか)
地図あるデータセット
地図以外あるデータセット
地図はなじみ深く、実装も比較的楽。地図を表現方法として採用するか否か。
QGISで地図データ取得して イラストレーターで加工
http://www.slideshare.net/yuichy/lgy-dataviz-140627
ベース部分を印刷+手書きやシールHeart Journey Mood Calendar / Adonian Chan
http://www.slideshare.net/yuichy/lgy-dataviz-140627
五感に訴える(どう訴えたいか)
モノやおもちゃで表現(風船)
https://www.flickr.com/groups/vismaghandmadecontest/pool/
五感に訴える(どう訴えたいか)
モノやおもちゃで表現(珈琲)
http://www.columnfivemedia.com/blog/in-caffeine-we-trust-infographic
五感に訴える(どう訴えたいか)
手書きの データ
ビジュアライズ
http://www.visualnews.com/2011/11/10/detailed-beauty-hand-
drawn-data-analysis/
コツ?
・注意点 ・データセット数
・一つの変数=一つの表示スタイル ・似て非なるものは使わない ・誇張はせずに違いを端的に表す
1つのデータセットを 複数の切り口でビジュアライズする
別な切り口
位置情報(地図)
あるデータセット
複数のデータセットを 合体させてビジュアライズする
ビジュアル表現
データセットA
データセットB
過去のプレゼン資料紹介
ジオメディアサミットD3で切り開くジオ・データ・ビジュアライゼーションの可能性
http://visualizing.jp/files/geo-media-summit-12/#/
HTML5J コミュニティデータ・ビジュアライゼーションの現況と実際
http://www.slideshare.net/yuichy/html5j-33789682
東京大学CSIS定例会議ワークショップ「D3.js」入門
http://www.slideshare.net/yuichy/csis-map-140514
データをわかりやすく可視化する「データビジュアライゼーション」勉強会実際に形にするための考え方のポイントとリソース紹介
http://www.slideshare.net/yuichy/lgy-dataviz-140627
visualizing.jphttp://visualizing.jp/
D3.js 参考例
D3.js Galleryhttp://christopheviau.com/d3list/gallery.html
D3.js jp(Facebookグループ)https://www.facebook.com/groups/d3js.jp/
触れる可視化-- データビジュアライゼーションとは何か
http://japan.zdnet.com/business-application/analysis/35045343/http://japan.zdnet.com/business-application/analysis/35045887/
バッドサンプル
Junk Chartshttp://junkcharts.typepad.com/
詐欺グラフhttp://www.slideshare.net/akihikoiyoda/ss-24680492