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