D3.jsとその活用事例について


D3.jsとは?

D3とは「Data Driven Document」の略で、データに基づいてドキュメントを操作するための JavaScript ライブラリです。

ご存知の方も多いと思いますが、ちょっとだけD3.jsの基本的な使い方、そして弊社プラットフォームでの利用についてご紹介したいと思います。

D3.jsの基本的な使い方

D3.jsはHighChartsGoogleChartsのようにぽんっとデータを渡せばいい感じのグラフを出してくれるようなライブラリではありません。
もっと低レイヤーのライブラリで、学習コストはそれなりに高いと思います。
が、覚えるととても便利です。(まだまだ僕も使いきれていませんが)

では、さっそく基本的な使い方です。

データをhtmlとして書き出してみましょう。

var data = [1,2,3,4];
d3.select("body")
    .selectAll("p")
    .data(data)
    .enter()
    .append("p")
    .text(function(d) {return "データ: " + d});

これを実行すると以下のようにhtmlが生成されます。

d3sample1

  • d3.select(“body”).selectAll(“p”)
    まずD3.jsのメソッドでbodyを選択し、HTML内のすべてのpタグを取得しています。
    ※ただし、この時点ではpタグ存在せず、追加するタグになります。
    ※セレクタの使い方はjQueryとほとんど同じです。

  • .data(data).enter()
    データセットをバインドし、enter()メソッドでデータを保存します。

d3.select(“body”).selectAll(“p”).data(data).enter()
まで実行した場合の戻り値を見てみると、

[
    0 : {
        __data__ : 1
    },
    1 : {
        __data__ : 2
    },
...
]

と「__data__」にデータが保存されていることがわかります。

  • .append(“p”).text(function(d) {return “データ: ” + d});
    pタグを挿入し、pタグ内のテキストとして、function(d) {return “データ:” + d}を挿入しています。
    function内のdにはバインドした値が入ってきます。今回は”データ”という文字列を付与してreturnしていますので、
    さきほどの画像のように表示されます。

ヒートマップを作ってみる

基本的な使い方からかなり飛んでいるような気もしますが、D3.jsを使ってヒートマップを作ってみたいと思います。

  • データ

曜日/時間帯ごとのPV数のデータを用意しました。

[
    {
        "week" : "月",
        "time" : 0,
        "pv": 43605
    },
    {
        "week" : "月",
        "time" : 1,
        "pv": 24782
    },....
    {
        "week" : "日",
        "time" : 23,
        "pv": 24782
    }
]
  • コード
var dataset = [{"week" : "月","time" : 0,"pv": 43605}, ...];
// カラースケール作成のためdatasetのmax,min,medianを取得
var max = d3.max(dataset, function(d){ return Number(d.pv) });
var min = d3.min(dataset, function(d){ return Number(d.pv) });
// カラースケールを作成
var colorScale = d3.scale.linear().domain([min, max]).range(["#fefcfc","#f8696b"]);

// ヒートマップのテーブルを追加
var tbl = d3.select("body").append('table');

// 横軸の0~23時の配列を生成
var hours = d3.range(24);

// 生成したtableにtheadを追加
var thead = tbl.append('thead');

// theadに0~23時の横軸を入れる
tbl.append('th');
tbl.selectAll('class')
	.data(hours)
	.enter()
	.append('th')
	.text(function(d){ return d + " 時" });

// 縦軸のデータを生成する(曜日をキーにする)
var weekdata = d3.nest().key(function(d){ return d.week; }).entries(dataset);
// tbodyを生成し、tbodyにtrを追加する
var tbody = tbl.append('tbody');
var tr = tbody.selectAll('tr')
	.data(weekdata)
	.enter()
	.append('tr')
tr.append('th').text(function(d){ return d.key;});

// 実際のデータをtdに入れる
tr.selectAll('td')
	.data(function(d){ return d.values} )
	.enter()
	.append('td')
	// 作成したカラースケールから背景色を設定
	.style("background-color", function(d){ return colorScale(d.pv); })
	// td内に数値を入れる(3桁区切りでカンマを入れる)
	.text(function(d){
		var num = new String(d.pv).replace(/,/g, "");
		while(num != (num = num.replace(/^(-?\d+)(\d{3})/, "$1,$2")));
		return num
	})

これを実行するとこんな感じになります。
d3sample2

まあ、内容はコメントに書いてあるとおりで、割りと簡単に作れます、と言いたかったのです。

活用事例

最後にD3.jsの活用事例について紹介します。

弊社が提供しているAudienceOne®では、今回紹介したD3.jsを使って、オウンドサイトのリーセンシー/フリークエンシー毎のユニークユーザ数をヒートマップを使って直感的に可視化できる機能を提供しています。

AoneCapture

また、今回のサンプルでは実装しませんでしたが、Javascriptのイベントも自由に設定することができるため、ドラッグ操作で任意の範囲選択の数値を出力といったことも分析できます。

気になる方は、ぜひお問い合わせください。AudienceOne®


【2015/08/27 追記】
DAC AD TECH BLOGで、AudienceOne®について詳しく紹介しております。
ぜひご一読ください。顧客を可視化し、データドリブンなマーケティングを支援/「AudienceOne」


DACエンジニア採用情報

  関連記事

スクリーンショット 2015-07-31 16.41.25
【未経験からのRuby on Rails – 第3回】変数と定数

こんにちは。新卒1年目のmatsuariです。 今回はRubyに限らずプログラミングを学ぶ上で非常に重要となる「変数と定数」について、ご紹介していきます。 変数とは・・・ オブジェクトを一時的に格納しておく箱で、オブジェクトを識別するために利用します。 言葉だけでは理解が難しいかと思いますので、まず …

logomono-tableau-software-mono
Tableauを利用してMySQLとRedshiftのクロスDBジョインを実現する

はじめに RedshiftやTreasureDataなどのデータマート用のDBにはID単位の解析結果が格納され、ローカルのMySQLにはIDに紐づいた名称マスタが管理されている構成の場合、データマートのクロス集計結果に対してIDに紐づいた名称を付与したいことがあります。 データマート用に用意したDB …

swift
iOS端末情報をTreasureDataに送るアプリをswiftで作ってみた。

はじめまして、2年目のOyamanです。 通常業務とは別のことになりますが、Swiftに触れる機会が少しあったので、スマホ関連の記事を書かせていただきます。 はじめに SwiftとTreasureDataのSDKを使って、 iOSの端末情報をTreasureDataへ送るアプリを作ってみます。 今回 …

no image
Polymer on Rails

Web Componentsをご存知だろうか。これが普及すればWebの開発は画期的に変わるだろう。 説明すると長くなるので、LIGさんのにその辺はお任せして。(この記事読んでください。) 簡単に言えば、下記にあるような新たに提案されたブラウザ向けAPIの総称。 Custom Elements, 説明 …

heatmap
巨大データベースのスケールアップと引越作業

はじめに ビッグデータ解析部でオーディエンスデータ解析基盤の開発、運用を担当している Mike です。 弊社ではインターネット広告配信ログをはじめとする「ビッグデータ」と呼ぶにふさわしいデータボリュームを扱うオーディエンスデータ解析基盤を構築しています。今秋、そのうちの1構成要素である、データサイズ …

androidsdk10
SDKってどうやって作ってるの?【Android編】

こんにちは。4度目の投稿です。 現在私はAndroidのSDKを開発しています。 javaにもAndroidにもSDKにも手を出したのは初めてなので、最初はそもそもSDKのイメージが湧かず、ふわふわした状態で始めました。 SDKと調べても「あるソフトウェアを開発するために必要なプログラムや文書などを …

11396380473_26f323b1e4_z
Google BigQuery / Tableauを使ってみた

TableauからGoogle BigQueryへ接続してみました。 弊社で利用しているTreasureDataからデータ出力してBigQueryへロード、Tableauから接続まで実際に行った手順について記載します。 TreasureDataからAmazonS3へデータ出力 まず、データが蓄積され …

tf
ディープラーニングで「顔が似ているAKB48のメンバーを教えてくれるbot」を構築

概要 こんにちは、システム開発部の中村です。 今回は、Facebook Messenger APIを利用して、 画像をアップロードすると、似ているAKB48のメンバーを教えてくれるbotを実装しました。 尚、ディープラーニングやTensorFlowそのものの解説というより、 「エンジンとしてディープ …

sqlカクテル
【入門編】TreasureDataでサイトのアクセス解析をしてみた~第2弾!~

今回もやります、集計クエリ解説シリーズ第2弾!! 前回は、Webログからセッション単位のデータを作成するだけでした。 第2弾では作成したテーブルを元に、より実践的なアクセス解析、サイト分析で使えるHiveQLについて、実際に使用したクエリとともに解説していきたいと思います。 今回やったこと 利用した …

shogi
ナイーブベイズで羽生さんと羽生くんを分類してみた

はじめに こんにちは。システム開発部の中村です。 機械学習についての理解を促進するため、 データから分類モデルを自動で構築する古典的な方法である、 ナイーブベイズ分類器を実装してみました。 最近はCloudVisionAPIなど専ら画像解析が流行っていますが、 自分のような初学者には敷居が高そうだっ …