Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
「データをグラフで可視化してみよう!」
Code for YOKOHAMA オープンデータハンズオン Vol.4
矢崎 裕一
平成27年度横浜市経済局 オープンデータ活用ビジネス化支援事業
東京大学 空間情報科学研究センター
http://www.csis.u-tokyo.ac.jp/japanese/index.html
http://codefor.tokyo/
http://visualizing.jp/
DataVisualizationJapan(Facebookグループ)
https://www.facebook.com/groups/datavizjapan/
医療ビッグデータ勉強会
https://www.facebook.com/groups/338084979676310/
image by Kenichiro Ono
三大都市圏の人の流れ
http://structure-and-representation.com/works/prefecturalMigrants/
http://structure-and-representation.com/works/odd/
DPC data -A
http://n1n9.jp/dataviz/asdjh2014/tokyo_dynamic/
DPC data-B
http://n1n9.jp/dataviz/asdjh2014/tokyo_static/
TPP 巨大経済圏の実力
http://vdata.nikkei.com/prj2/tpp/
事例紹介
http://www.nytimes.com/interactive/2015/03/19/upshot/3d-yield-
curve-economic-growth.html
https://www.chromeexperiments.com/experiment/arms-globe
https://interactive.twitter.com/oscars2015race/
http://localprojects.net/clients/page/2/?client=911-memorial
9/11 Memorial Names Arrangement Software
http://lauren-mccarthy.com/usplus/
us+
Nicholas Felton
http://feltron.com/
http://spending.jp/
基本的な考え方
人間の認知能力に合わせて抽象化して、
特徴を理解できるものにする
「なるほど!」と思って共感する
なるほど!
そのことによって…
なるほど!
• 行動が変わる
• 記憶に残る
• 人に話したくなる
関係
Scatterplot
比較
Bar Chart
Candlestick Chart
分布
地図 ネットワーク
Hitogram
Scatterplot
構成
Pie Chart
Donut Chart
TreeMap
変化(時間)
Ba...
データの用意の仕方
扱い方のポイント
ExcelやPDFで公開されているファ
イルの作り方は、印刷やディスプレ
イ表示をした際に人が認識しやすい
書式で作られている。
一方データとして扱う場合には不要
な書式、不要な情報が多く含まれて
いる。これを取り除く必要があ...
行政の提供する統計データファイルはShift JISであることが多い。
1.文字コード
ExcelやAdobe Illustrator日本語版ではShift JISという文字
コードを採用している。
Shift JISは日本語のみの文字コードで...
MultiTextConverter
1.文字コード扱い方のポイント
http://www.rk-k.com/software/mtc
nkf
http://dev.classmethod.jp/tool/
exchange-file-encod...
※Excelで作業する前提です。
2.不 いな書式を える
実データの表記とExcelが適用する
表記法を切り分ける。
→Excelが適用する表記法をリセッ
トし、実データの表記のみが表示さ
れるようにする。
扱い方のポイント
Mac: 「書式...
例:
数値における3桁ごとのカンマ区切り
を取り除く
例:
値が入る欄に単位も含まれている場
合があるので取り除く
例:
データとして使わない部分は取り除く
2.不 いな書式を える扱い方のポイント
Excel1シートに含まれるデータ 1グラフに必要なデータ
3.一シートに含まれる情報量扱い方のポイント
テキストエディタ → Excel という移動
4.アプリ間のデータ移動扱い方のポイント
CSV/TSVファイル
「ファイルを開く」
機能で開く
エディタからExcelへ
コピー&ペースト
1 2a
2b
csv, tsv…OK
csv…NG, ...
Excel → テキストエディタ という移動
4.アプリ間のデータ移動扱い方のポイント
Excelファイル
CSV/TSVで保存し
たものを「ファイル
を開く」機能で開く
Excelからエディタへ
コピー&ペースト
1 2a
2b
4.アプリ間のデータ移動扱い方のポイント
Excel ←→ テキストエディタ間のデータの移動は
「TSV形式(タブ区切り形式)をコピペする」のが最も楽!
ベストプラクティス
•コラムごとのデータ形式の変換
•データ形式が間違っているものを検出(数値のコラムに
文字列がある、など)
•データの重複を探し出す
•表記揺れの解消
•エラー値の検出と処理
•空白の検出と処理
•使うアプリやプログラム言語に合わせた書式への変...
http://openrefine.org/
5.データのクレンジング扱い方のポイント
https://github.com/
DataVisualizationJapan/
OpenRefine/tree/
localization-to-ja
...
ハンズオン
http://vega.github.io/vega/
http://vega.github.io/vega-editor/
vega
JSONデータ Canvas か SVG
JSONデータ
"data": [
{
"name": "table",
"values": [
{"category":"A",
"amount":28},
{"category":"B",
"amount":55}
]
}
],
グループ名
JSONデータ
"data": [
{
"name": "table",
"values": [
{"category":"A",
"amount":28},
{"category":"B",
"amount":55}
]
}
],...
JSONデータ
Visualization……一番外枠の大きさ
Data………………視覚表現の定義とデータ
Scales……………データの値と視覚的表現の対応関係
Axes………………軸
Legends…………凡例
Marks………………データ...
用意されているチャート(Staticのみ例示)
■分布と比較
arc
■変化
area
■比較
bar
■分布を比較
barley
■コロプレスマップ(アメリカ地図)
choropleth
■時系列の変化
driving
■比較
error
■...
用意されているチャート(Staticのみ例示)
■歴史
lifelines
■世界地図
map
■多変量データ
parallel_coords
■時系列の変化
playfair
■人口ピラミッド
population
■内訳
treemap
■...
自分でサイトを設置する-1
npm run vendor
https://github.com/vega/vega-editor
自分でサイトを設置する-2
vendorフォルダを作り、
上記ファイル構成になるように
ファイルを設置
2015年10月15日(木)に行われたCode for YOKOHAMAオープンデータハンズオン Vol.4「データをグラフで可視化してみよう!」資料 講師: 矢崎 裕一 氏(東京大学空間情報科学研究センター/visualizing.jp
2015年10月15日(木)に行われたCode for YOKOHAMAオープンデータハンズオン Vol.4「データをグラフで可視化してみよう!」資料 講師: 矢崎 裕一 氏(東京大学空間情報科学研究センター/visualizing.jp
2015年10月15日(木)に行われたCode for YOKOHAMAオープンデータハンズオン Vol.4「データをグラフで可視化してみよう!」資料 講師: 矢崎 裕一 氏(東京大学空間情報科学研究センター/visualizing.jp
Upcoming SlideShare
Loading in …5
×

2015年10月15日(木)に行われたCode for YOKOHAMAオープンデータハンズオン Vol.4「データをグラフで可視化してみよう!」資料 講師: 矢崎 裕一 氏(東京大学空間情報科学研究センター/visualizing.jp

762 views

Published on

2015年10月15日(木)に行われたCode for YOKOHAMAオープンデータハンズオン Vol.4「データをグラフで可視化してみよう!」での資料です。

地図の地点に関するレビュー情報や、センサー測定データをd3.jsを使ってグラフで可視化する方法を学びます。

講師: 矢崎 裕一 氏(東京大学空間情報科学研究センター/visualizing.jp主宰/Code for Tokyo代表)
主催:横浜市経済局
協力:Code for YOKOHAMA
事務局:NPO法人横浜コミュニティデザイン・ラボ

<講師プロフィール>
・ 矢崎 裕一(やざき ゆういち)氏
株式会社ビジネス・アーキテクツにてアートディレクターを経験後、2008年に独立。データ・ビジュアライゼーションの実践的な手法や実例を紹介するサイト、visualizing.jpの運営、Code for Tokyoや Data Visualization Japanなどのコミュニティーの立ち上げと運営など、データ・ビジュアライゼーションの実践と普及に関する様々な活動をおこなっている。

***************************************************************************
https://www.facebook.com/events/869739876466315/

Published in: Engineering
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/uug7c4j } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/uug7c4j } ......................................................................................................................... Download Full doc Ebook here { https://tinyurl.com/uug7c4j } ......................................................................................................................... Download PDF EBOOK here { https://tinyurl.com/uug7c4j } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/uug7c4j } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/uug7c4j } ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • ..............ACCESS that WEBSITE Over for All Ebooks ................ ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • -- DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT -- ......................................................................................................................... ......................................................................................................................... Download FULL PDF EBOOK here { http://bit.ly/2m77EgH } ......................................................................................................................... (Unlimited)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

2015年10月15日(木)に行われたCode for YOKOHAMAオープンデータハンズオン Vol.4「データをグラフで可視化してみよう!」資料 講師: 矢崎 裕一 氏(東京大学空間情報科学研究センター/visualizing.jp

  1. 1. 「データをグラフで可視化してみよう!」 Code for YOKOHAMA オープンデータハンズオン Vol.4 矢崎 裕一 平成27年度横浜市経済局 オープンデータ活用ビジネス化支援事業
  2. 2. 東京大学 空間情報科学研究センター http://www.csis.u-tokyo.ac.jp/japanese/index.html
  3. 3. http://codefor.tokyo/
  4. 4. http://visualizing.jp/
  5. 5. DataVisualizationJapan(Facebookグループ) https://www.facebook.com/groups/datavizjapan/
  6. 6. 医療ビッグデータ勉強会 https://www.facebook.com/groups/338084979676310/ image by Kenichiro Ono
  7. 7. 三大都市圏の人の流れ http://structure-and-representation.com/works/prefecturalMigrants/
  8. 8. http://structure-and-representation.com/works/odd/
  9. 9. DPC data -A http://n1n9.jp/dataviz/asdjh2014/tokyo_dynamic/
  10. 10. DPC data-B http://n1n9.jp/dataviz/asdjh2014/tokyo_static/
  11. 11. TPP 巨大経済圏の実力 http://vdata.nikkei.com/prj2/tpp/
  12. 12. 事例紹介
  13. 13. http://www.nytimes.com/interactive/2015/03/19/upshot/3d-yield- curve-economic-growth.html
  14. 14. https://www.chromeexperiments.com/experiment/arms-globe
  15. 15. https://interactive.twitter.com/oscars2015race/
  16. 16. http://localprojects.net/clients/page/2/?client=911-memorial 9/11 Memorial Names Arrangement Software
  17. 17. http://lauren-mccarthy.com/usplus/ us+
  18. 18. Nicholas Felton http://feltron.com/
  19. 19. http://spending.jp/
  20. 20. 基本的な考え方
  21. 21. 人間の認知能力に合わせて抽象化して、 特徴を理解できるものにする
  22. 22. 「なるほど!」と思って共感する なるほど!
  23. 23. そのことによって… なるほど! • 行動が変わる • 記憶に残る • 人に話したくなる
  24. 24. 関係 Scatterplot 比較 Bar Chart Candlestick Chart 分布 地図 ネットワーク Hitogram Scatterplot 構成 Pie Chart Donut Chart TreeMap 変化(時間) Bar Chart Line Chart Area Chart
  25. 25. データの用意の仕方
  26. 26. 扱い方のポイント ExcelやPDFで公開されているファ イルの作り方は、印刷やディスプレ イ表示をした際に人が認識しやすい 書式で作られている。 一方データとして扱う場合には不要 な書式、不要な情報が多く含まれて いる。これを取り除く必要がある。
  27. 27. 行政の提供する統計データファイルはShift JISであることが多い。 1.文字コード ExcelやAdobe Illustrator日本語版ではShift JISという文字 コードを採用している。 Shift JISは日本語のみの文字コードで、現在はUTF-8という 多様な言語体系を含んだ文字コードが標準的に使用されている。 扱い方のポイント ウェブで使用するファイル、様々なアプリで使用するファイルは UTF-8へ変換する必要がある。
  28. 28. MultiTextConverter 1.文字コード扱い方のポイント http://www.rk-k.com/software/mtc nkf http://dev.classmethod.jp/tool/ exchange-file-encode-by-nkf/ mi http://www.mimikaki.net/
  29. 29. ※Excelで作業する前提です。 2.不 いな書式を える 実データの表記とExcelが適用する 表記法を切り分ける。 →Excelが適用する表記法をリセッ トし、実データの表記のみが表示さ れるようにする。 扱い方のポイント Mac: 「書式」→「セル」 Windows: リボンメニュー「ホーム」 「表示形式」タブで標準(特定の形 式を指定しない)を選ぶ。
  30. 30. 例: 数値における3桁ごとのカンマ区切り を取り除く 例: 値が入る欄に単位も含まれている場 合があるので取り除く 例: データとして使わない部分は取り除く 2.不 いな書式を える扱い方のポイント
  31. 31. Excel1シートに含まれるデータ 1グラフに必要なデータ 3.一シートに含まれる情報量扱い方のポイント
  32. 32. テキストエディタ → Excel という移動 4.アプリ間のデータ移動扱い方のポイント CSV/TSVファイル 「ファイルを開く」 機能で開く エディタからExcelへ コピー&ペースト 1 2a 2b csv, tsv…OK csv…NG, tsv…OK UTF-8…文字化けする UTF-8…文字化けしない
  33. 33. Excel → テキストエディタ という移動 4.アプリ間のデータ移動扱い方のポイント Excelファイル CSV/TSVで保存し たものを「ファイル を開く」機能で開く Excelからエディタへ コピー&ペースト 1 2a 2b
  34. 34. 4.アプリ間のデータ移動扱い方のポイント Excel ←→ テキストエディタ間のデータの移動は 「TSV形式(タブ区切り形式)をコピペする」のが最も楽! ベストプラクティス
  35. 35. •コラムごとのデータ形式の変換 •データ形式が間違っているものを検出(数値のコラムに 文字列がある、など) •データの重複を探し出す •表記揺れの解消 •エラー値の検出と処理 •空白の検出と処理 •使うアプリやプログラム言語に合わせた書式への変更 5.データのクレンジング扱い方のポイント
  36. 36. http://openrefine.org/ 5.データのクレンジング扱い方のポイント https://github.com/ DataVisualizationJapan/ OpenRefine/tree/ localization-to-ja 日本語版を 配布しています ※Javaのインストール が必要です
  37. 37. ハンズオン
  38. 38. http://vega.github.io/vega/
  39. 39. http://vega.github.io/vega-editor/
  40. 40. vega JSONデータ Canvas か SVG
  41. 41. JSONデータ "data": [ { "name": "table", "values": [ {"category":"A", "amount":28}, {"category":"B", "amount":55} ] } ],
  42. 42. グループ名 JSONデータ "data": [ { "name": "table", "values": [ {"category":"A", "amount":28}, {"category":"B", "amount":55} ] } ], 変数名とその値
  43. 43. JSONデータ Visualization……一番外枠の大きさ Data………………視覚表現の定義とデータ Scales……………データの値と視覚的表現の対応関係 Axes………………軸 Legends…………凡例 Marks………………データを表現するのに使う、基本となる形を定義 Group Marks……他のMarkを内包する、特別なMark Signals……………インタラクションの振る舞いを定義 Predicates………Markの見た目を変更する際の条件を定義
  44. 44. 用意されているチャート(Staticのみ例示) ■分布と比較 arc ■変化 area ■比較 bar ■分布を比較 barley ■コロプレスマップ(アメリカ地図) choropleth ■時系列の変化 driving ■比較 error ■ネットワーク force ■分布の仕方を比較 grouped_bar ■分布 heatmap ■比較 image ■分布の仕方を比較 jobs
  45. 45. 用意されているチャート(Staticのみ例示) ■歴史 lifelines ■世界地図 map ■多変量データ parallel_coords ■時系列の変化 playfair ■人口ピラミッド population ■内訳 treemap ■分布の仕方を比較 scatter_matrix stacked_area stacked_bar ■時系列での比較 stocks ■時系列での比較 weather ■定性データ wordcloud
  46. 46. 自分でサイトを設置する-1 npm run vendor https://github.com/vega/vega-editor
  47. 47. 自分でサイトを設置する-2 vendorフォルダを作り、 上記ファイル構成になるように ファイルを設置

×