D3勉強会#0に行ってきました。

D3勉強会#0 D3.jsで棒グラフをつくろう!に行ってきました。

ライブコーディング

前半はCodePenを使って@_shimizu先生のライブコーディング。

あっという間に棒グラフが完成してしまった!

このグラフのソースは以下の通り。

基本的にはjQueryを使って要素を操作するのとほぼ変わらないイメージ。

<!-- D3.jsの読み込み -->
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

<!-- グラフの表示するエリア -->
<svg style="margin:10px; width:250px; height:200px; padding:10px"></svg>

<!-- グラフの作成 -->
<script>
    var svg = d3.select('svg');
    var dataSet = [100,200,300,500,400];

    var max = d3.max(dataSet);    // データの最大値を取得
    var height = 200;
    var yScale = d3.scale.linear().domain([0, max]).range([height, 0]);    // y軸の設定
    var color = d3.scale.category20();    // カラー設定

    svg.selectAll('rect')
        .data(dataSet)
        .enter()
        .append('rect')
        .attr({
            x:function(d,i){ return i * 40},    // iには読み込んだデータのindexが入る
            y:function(d){ return yScale(d) },    // dには読み込んだデータの値が入る
            width:30,
            height:function(d,i){ return height - yScale(d) },
            fill:function(d,i){ return color(i) }
    });

    var yAxis = d3.svg.axis()
        .ticks(5)
        .orient('right')
        .scale(yScale);

    svg.append('g')
        .attr('transform','translate('+[dataSet.length * 40, 0]+')')
        .call(yAxis);

</script>

ビジュアライゼーションについて

後半はビジュアライゼーションについてのプレゼン。

まず D3.js(Data-Driven Documents)とは、データ駆動のドキュメントを作るためのフレームワークのことであり、データビジュアライゼーションを簡単に実現することができるもの。

 

ビジュアライゼーションとは、図やグラフなどを使ってデータを視覚的に表現すること。

ビジュアライゼーションには大きく分けて2種類、「説明的ビジュアライゼーション」と「探索的ビジュアライゼーション」が存在する。

説明的ビジュアライゼーション

  • ナイチンゲールの統計図
  • クリミア戦争で死亡した兵士の死亡要因が、戦闘での傷ではなく感染症であることを表現
  • ナイチンゲールは歴史上最も「戦闘的な統計学者」
  • 問題を説明するために用いる

探索的ビジュアライゼーション

  • 海外ドラマ「NUMB3RS」シーズン1 第1話 地理的プロファイリング
  • 犯罪者の行動心理を数理モデル化
  • ブロック毎に犯人が潜んでいる確率を計算してヒートマップで表現
  • 問題を見つけるために用いる

まとめ

少人数で知り合いの方も多かったので、和気あいあいとして楽しかったー。

公式で地図系のexampleもたくさんあるし、ただのグラフツールとしてじゃなく、UIの実現方法の1つとして使えるようになりたい!

とりあえず、オライリー本買うか。

D3.js