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 　

http://d3js.org/公式サイト：

http://caniuse.com/#search=svg

D3.js 　 Browser Support

SVG が前提となる

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 を理解する上で、必要な基本要素

１．メソッドチェーン

２．スケール（縮尺）

３． Data メソッド

１．メソッドチェーン

jQuery とよく似ていて、 D3.js では多用される。

前回のメソッドの結果が、次のメッソッドの入力値になる。

text タグ を選択データセット追加分の取り出しtext タグ を追加text （文字）を設定

x 座標の指定

y 座標の指定

２．スケール（縮尺）

実データの分布を、実際の描画位置にマッピングする。

domain ：入力データ 　

range ：出力域

Min:20Max:800

Min:39.20 Max:45.73

Ex. 平均年齢の場合

スケール（縮尺）の例

domain ：入力データの最小値、最大値を指定

range ：出力領域の最小値、最大値を指定

d3.min で、データの最小値を取得、d3.max で、データの最大値を取得できる！

３． Data メソッド

データを保存して、１つずつ取り出しができるようにする

svg.selectAll(“circle”) .data(dataset) ・・・・

__data__ へデータが保存されている

取り出したデータは、メソッドチェーン内では d で利用できる。

入力データを取得して、演算（ function ）して、グラフに表示することができるので、複雑なグラフ描画も行える。

まとめ

・理解するまで学習コストがかかる。　→簡単なグラフなら jqPlot プラグイン、　　 Google Charts API のほうが制作が早い。

・ 1 ずつのデータに対して、演算 (function) できるのでかなり高度なビジュアルが行える

・他の js ライブラリとの組み合わせができる。　→ Three.js 、 TopoJSON （ Map ）など。

ご清聴ありがとうございました。