「D3.js」を使ったデータビジュアライゼーション

近未来の技術トレンドを先取り！ 「Tech-Sketch」出張所 第8回

API概要

　ここまでD3.jsの基本的な使い方を説明してきました。他にも豊富にAPIがありますので、APIリファレンスを参照してください。ここでは簡単に概要をご紹介します。

　D3.jsのAPIは、以下のように大別されています。

Core

• selectionやtransition、データの読込などD3.jsの中心的なモジュール

Scales

• 尺度に関するモジュール

SVG

• 線や、軸、図形を描画するためのモジュール

Time

• 日付関連の便利な機能やフォーマット、時間をもとにした尺度関連のモジュール

Layouts

• 基本機能では難しい、複雑なレイアウトをつくるためのモジュール

　以下のような複雑なレイアウトをつくることができます。それぞれレイアウトごとにAPIの利用方法が異なりますので、利用の際はドキュメントや作品、サンプルを参照してください。

Layout

Geography

• 地図データを表示するためのモジュール
• 地理的特徴を表現する標準的なフォーマットであるGeoJSONを、よりシンプルに拡張したTopoJSONを利用する

Geography

Geometry

• 幾何学的な図を作成するためのモジュール
• ボロノイ図、凸包、四分木などが作成可能

Geometry

Behaviors

• ドラッグやズーム、パンといった振る舞いを処理するモジュール
• マウス、タッチイベントの両方に対応

データビジュアライゼーション実践

　ここまでD3.jsの特徴、基本的な使い方、APIの概要を紹介してきました。以下では実際のデータを使い、D3.jsで可視化してみます。

　ところで夏に飲むビールも美味しいですが、秋に飲むビールも良いものですよね。ビールはホップと大麦（二条大麦）が主な原料です。ホップは国内だと北海道や東北地方が産地として挙げられますが、大麦の生産地については、ぱっと思いつきませんでした。好きなビールの原料の生産地を知らないのは良くないので（？）グラフにしてみました。

　二条大麦の生産地別収穫量のデータは、政府統計の総合窓口 e-Statから「麦類（子実用）の収穫量（全国農業地域別・都道府県別）-二条大麦（2012年）」のExcelデータを取得しCSV化しています。

 two-rowed_barley.csv

都道府県,作付面積(ha),10a当たり収量(kg),収穫量(t)
北海道,1990,337,6710
茨城,1520,222,3380
栃木,9850,308,30300
群馬,1400,315,4410
埼玉,658,360,2370
静岡,8,106,8
滋賀,54,233,126
京都,131,154,202
鳥取,83,302,251
島根,509,301,1530
岡山,1950,335,6530
山口,104,181,188
徳島,17,338,57
福岡,5670,278,15800
佐賀,10400,305,31700
長崎,1040,228,2370
熊本,1620,255,4130
大分,1080,175,1890
宮崎,60,203,122
鹿児島,119,204,243

　X軸で都道府県、Y軸で収穫量、円の大きさで作付面積を表すグラフを作成しました。では、順を追ってコードについて説明していきます。

　以下のコードでは、データや内容を追加する前の状態の要素、オブジェクトを生成し、グラフ描画のための下準備をしています。X軸は都道府県で順番に並べているため、scale.ordinalを指定し、Y軸は収穫量の等間隔の目盛にしたいのでscale.linearを指定しています。軸線についてはaxisで設定します。表示位置はorientで指定します。X軸ならbottomで下に、Y軸ならleftで左に配置しています。また、マウスオーバー時にツールチップを表示するためにツールチップ用のDIV要素を作成しています。

sample2のソースコード（一部）

// 描画領域の設定
var margin = {top: 20, right: 40, bottom: 30, left: 40},
    width = 1080 - margin.left - margin.right,
    height = 768 - margin.top - margin.bottom;

// X軸、Y軸の表示比率
var x = d3.scale.ordinal().rangeRoundBands([0, width]);
var y = d3.scale.linear().range([height, 0]);

// 円に設定する色のカテゴリ
var color = d3.scale.category10();

// X軸
var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom"); // 下に配置

// Y軸
var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left"); // 左に配置

// ツールチップ生成
var tooltip = d3.select("body")
  .append("div")
  .attr("class", "tooltip")
  .style("opacity", 0); // 初期値は透明

// SVG要素生成
var svg = d3.select("body").append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");