LOCAL GOOD YOKOHAMA データビジュアライズソンvol.1

1,137 views

Published on

「LOCAL GOOD YOKOHAMA データビジュアライズソンvol.1」での登壇資料です。

Published in: Design

LOCAL GOOD YOKOHAMA データビジュアライズソンvol.1

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

×