Upload
kobayashi-yoshinori
View
2.086
Download
6
Embed Size (px)
DESCRIPTION
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で行うのがよいかなという印象です。
Citation preview
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://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
東京都の統計データはオープンデータではない!
http://ticklecode.com/present/140907_js_autumn_festival_d3js/
デモサイト
住民基本台帳による東京都 23 区の平均年齢、人口密度、人口の分布
D3.js のライセンス
BSD ライセンスが定めることは、「無保障」かつ「免責」であることを宣言すること、著作権表示を消さないこと
http://opensource.org/licenses/BSD-3-Clause
http://ja.wikipedia.org/wiki/BSD%E3%83%A9%E3%82%A4%E3%82%BB%E3%83%B3%E3%82%B9
Data Driven Documents
Data ・・・ json 、 XML 、 csv
Driven ・・・運転する、動かす → データ駆動型
Documents ・・・ HTML 、 SVG 、 DOM
D3.js 概要
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 (文字)を設定
x 座標の指定
y 座標の指定
2.スケール(縮尺)
実データの分布を、実際の描画位置にマッピングする。
domain :入力データ
range :出力域
Min:20Max:800
Min:39.20 Max:45.73
Ex. 平均年齢の場合
スケール(縮尺)の例
domain :入力データの最小値、最大値を指定
range :出力領域の最小値、最大値を指定
d3.min で、データの最小値を取得、d3.max で、データの最大値を取得できる!
3. Data メソッド
データを保存して、1つずつ取り出しができるようにする
svg.selectAll(“circle”) .data(dataset) ・・・・
__data__ へデータが保存されている
取り出したデータは、メソッドチェーン内では d で利用できる。
入力データを取得して、演算( function )して、グラフに表示することができるので、複雑なグラフ描画も行える。
まとめ
・理解するまで学習コストがかかる。 →簡単なグラフなら jqPlot プラグイン、 Google Charts API のほうが制作が早い。
・ 1 ずつのデータに対して、演算 (function) できるのでかなり高度なビジュアルが行える
・他の js ライブラリとの組み合わせができる。 → Three.js 、 TopoJSON ( Map )など。
ご清聴ありがとうございました。