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.
D3.jsでのデータビジュアライゼーション 
-人口統計データから使い方を学ぶ- 
Ticklecode. 
Yoshinori Kobayashi 
秋のJavascript祭り2014.09.07 
1
生まれは奈良県です。 
小林由憲(こばやしよしのり) 
Twitter: @AsbyuKobayashi 
ブログ: In Advance Only 
2
今回、デモで使用しているデータについて
東京都の統計住民基本台帳による東京都の世帯と人口 
今回のデータ引用元 
http://www.toukei.metro.tokyo.jp/juukiy/jy-index.htm
東京都が掲載しているデータは著作権の対象! 
必ず、「引用」する必要がる。 
引用とは権利者に無断で行われるもので、権利者は引用を拒否することはできない 
http://www.metro.tokyo.jp/SUB/copyright.htm
東京都の統計データはオープンデータではない! 
オープンデータの定義 
特定のデータが、一切の著作権、特許などの制御メカニズムの制限なしで、全ての 
人が望むように利用・再掲載できるような形で入手できるべきであるというアイデア 
http://...
デモサイト 
住民基本台帳による東京都23区の平均年齢、人口密度、人口の分布 
http://ticklecode.com/present/140907_js_autumn_festival_d3js/
D3.js 
公式サイト: http://d3js.org/
D3.js Browser Support 
http://caniuse.com/#search=svg 
SVGが前提となる
D3.jsのライセンス 
BSDライセンスが定めることは、「無保障」かつ「免責」であることを宣言 
すること、著作権表示を消さないこと 
http://ja.wikipedia.org/wiki/BSD%E3%83%A9%E3%82%A4%E3...
D3.js 概要 
Data Driven Documents 
Data ・・・json、XML、csv 
Driven ・・・運転する、動かす→ データ駆動型 
Documents ・・・HTML、SVG、DOM
Data(JSON、XML、CSV) 
Documents(SVG) 
Driven 
データの動きに合わせて、SVGを出力。 
Bind(関連付け)を行う。 
D3.js の基本的な流れ
Data Driven (データ駆動型)なので・・・ 
Ex. Data を2001年⇒ 2014年へ変更すると
Data Bind (連動)しているので、 
プログラムの修正なしに・・・
Documents 2001年⇒ 2014年のグラフに変わる
D3.js を理解する上で、必要な基本要素 
1.メソッドチェーン 
2.スケール(縮尺) 
3.Dataメソッド
1.メソッドチェーン 
jQuery とよく似ていて、D3.jsでは多用される。 
前回のメソッドの結果が、次のメッソッドの入力値になる。 
textタグを選択 
データセット 
追加分の取り出し 
textタグを追加 
text(文字)を設定...
2.スケール(縮尺) 
実データの分布を、実際の描画位置にマッピングする。 
domain:入力データ 
Min:39.20 Max:45.73 
range:出力域 
Min:20 
Max:800 
Ex. 平均年齢の場合
スケール(縮尺)の例 
domain:入力データの最小値、最大値を指定 
d3.min で、データの最小値を取得、 
d3.max で、データの最大値を取得できる! 
range:出力領域の最小値、最大値を指定
3.Dataメソッド 
データを保存して、1つずつ取り出しができるようにする
svg.selectAll(“circle”) 
.data(dataset) 
・・・・ 
__data__ へデータが保存されている
取り出したデータは、メソッドチェーン内ではd で利用できる。 
入力データを取得して、演算(function)して、グラフに表示することが 
できるので、複雑なグラフ描画も行える。
まとめ
・理解するまで学習コストがかかる。 
→簡単なグラフならjqPlotプラグイン、 
Google Charts API のほうが制作が早い。 
・1ずつのデータに対して、演算(function)できるので 
かなり高度なビジュアルが行える 
・...
ご清聴ありがとうございました。
Upcoming SlideShare
Loading in …5
×

D3.jsでのデータビジュアライゼーション -人口統計データから使い方を学ぶ-

5,406 views

Published on

2014年9月
秋のJavascript祭り でのプレゼン資料です。
D3.jsを使って、データビジュアライゼーションの説明と使い方を説明しました。
D3.jsは学習コストが高いですが、非常に細かく、高度なビジュアル表現できます。
人口統計データを活用して、東京23区の人口情報の動きを作ってみました。
http://www.slideshare.net/YoshinoriKoba/d3js-38787078

個人的には、次の3つポイントだと思います。
1.メソッドチェーン
 jQuery とよく似ていて、D3.jsでは多用される。
2.スケール(縮尺)
  実データの分布を、実際の描画位置にマッピングする。
3.Dataメソッド
  データを保存して、1つずつ取り出しができるようにする

今回デモサイトを作成してみて、思い通りうごくまでなかなか時間がかかりました。
D3.jsの独特のお作法があるので、これを理解しないとどのようにコードしたらわらかない。
あと、jQueryと同様のことができるので、実際の制作では、セレクタやセットをjQueryで行うのか、D3.jsで混乱する場面があります。
極力、D3.jsで行い、できないことをjQueryで行うのがよいかなという印象です。

Published in: Internet
  • Be the first to comment

D3.jsでのデータビジュアライゼーション -人口統計データから使い方を学ぶ-

  1. 1. D3.jsでのデータビジュアライゼーション -人口統計データから使い方を学ぶ- Ticklecode. Yoshinori Kobayashi 秋のJavascript祭り2014.09.07 1
  2. 2. 生まれは奈良県です。 小林由憲(こばやしよしのり) Twitter: @AsbyuKobayashi ブログ: In Advance Only 2
  3. 3. 今回、デモで使用しているデータについて
  4. 4. 東京都の統計住民基本台帳による東京都の世帯と人口 今回のデータ引用元 http://www.toukei.metro.tokyo.jp/juukiy/jy-index.htm
  5. 5. 東京都が掲載しているデータは著作権の対象! 必ず、「引用」する必要がる。 引用とは権利者に無断で行われるもので、権利者は引用を拒否することはできない http://www.metro.tokyo.jp/SUB/copyright.htm
  6. 6. 東京都の統計データはオープンデータではない! オープンデータの定義 特定のデータが、一切の著作権、特許などの制御メカニズムの制限なしで、全ての 人が望むように利用・再掲載できるような形で入手できるべきであるというアイデア http://ja.wikipedia.org/wiki/%E3%82%AA%E3%83%BC%E3%83%97%E3%83%B3%E3 %83%87%E3%83%BC%E3%82%BF
  7. 7. デモサイト 住民基本台帳による東京都23区の平均年齢、人口密度、人口の分布 http://ticklecode.com/present/140907_js_autumn_festival_d3js/
  8. 8. D3.js 公式サイト: http://d3js.org/
  9. 9. D3.js Browser Support http://caniuse.com/#search=svg SVGが前提となる
  10. 10. D3.jsのライセンス BSDライセンスが定めることは、「無保障」かつ「免責」であることを宣言 すること、著作権表示を消さないこと http://ja.wikipedia.org/wiki/BSD%E3%83%A9%E3%82%A4%E3%82%BB%E3%83%B 3%E3%82%B9 http://opensource.org/licenses/BSD-3-Clause
  11. 11. D3.js 概要 Data Driven Documents Data ・・・json、XML、csv Driven ・・・運転する、動かす→ データ駆動型 Documents ・・・HTML、SVG、DOM
  12. 12. Data(JSON、XML、CSV) Documents(SVG) Driven データの動きに合わせて、SVGを出力。 Bind(関連付け)を行う。 D3.js の基本的な流れ
  13. 13. Data Driven (データ駆動型)なので・・・ Ex. Data を2001年⇒ 2014年へ変更すると
  14. 14. Data Bind (連動)しているので、 プログラムの修正なしに・・・
  15. 15. Documents 2001年⇒ 2014年のグラフに変わる
  16. 16. D3.js を理解する上で、必要な基本要素 1.メソッドチェーン 2.スケール(縮尺) 3.Dataメソッド
  17. 17. 1.メソッドチェーン jQuery とよく似ていて、D3.jsでは多用される。 前回のメソッドの結果が、次のメッソッドの入力値になる。 textタグを選択 データセット 追加分の取り出し textタグを追加 text(文字)を設定 x座標の指定 y座標の指定
  18. 18. 2.スケール(縮尺) 実データの分布を、実際の描画位置にマッピングする。 domain:入力データ Min:39.20 Max:45.73 range:出力域 Min:20 Max:800 Ex. 平均年齢の場合
  19. 19. スケール(縮尺)の例 domain:入力データの最小値、最大値を指定 d3.min で、データの最小値を取得、 d3.max で、データの最大値を取得できる! range:出力領域の最小値、最大値を指定
  20. 20. 3.Dataメソッド データを保存して、1つずつ取り出しができるようにする
  21. 21. svg.selectAll(“circle”) .data(dataset) ・・・・ __data__ へデータが保存されている
  22. 22. 取り出したデータは、メソッドチェーン内ではd で利用できる。 入力データを取得して、演算(function)して、グラフに表示することが できるので、複雑なグラフ描画も行える。
  23. 23. まとめ
  24. 24. ・理解するまで学習コストがかかる。 →簡単なグラフならjqPlotプラグイン、 Google Charts API のほうが制作が早い。 ・1ずつのデータに対して、演算(function)できるので かなり高度なビジュアルが行える ・他のjsライブラリとの組み合わせができる。 →Three.js、TopoJSON(Map)など。
  25. 25. ご清聴ありがとうございました。

×