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


D3.jsとは?

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

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

D3.jsの基本的な使い方

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

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

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

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

これを実行すると以下のように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()
まで実行した場合の戻り値を見てみると、

[code language=”javascript”]
[
0 : {
__data__ : 1
},
1 : {
__data__ : 2
},

]
[/code]

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

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

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

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

  • データ

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

[code language=”javascript”]
[
{
"week" : "月",
"time" : 0,
"pv": 43605
},
{
"week" : "月",
"time" : 1,
"pv": 24782
},….
{
"week" : "日",
"time" : 23,
"pv": 24782
}
]
[/code]

  • コード

[code language=”javascript”]
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
})
[/code]

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

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

活用事例

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

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

AoneCapture

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

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


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


DACエンジニア採用情報

  関連記事

Tableau 9.2で郵便番号の特性を地図で可視化してみる

Tableau 9.2から郵便番号地図が表示可能に 弊社ではデータ分析ツールのTableauを利用しています。オーディエンスデータの重複を分析したり、デモグラフィック属性を表示したりするなどデータの可視化に役立ちますTableauでは9.2から日本の郵便番号を用いて地図を可視化できるようになりました …

Android 非同期処理についてまとめてみた

Androidには、UIに影響を与えないよういくつか非同期処理が用意されています。 今回は非同期処理の代表的な ・Service ・IntentService ・HandlerThread について違いを踏まえながらまとめます! 非同期処理について(http://codezine.jp/articl …

Scala番外編「Boxに保存したファイルをBox APIを使ってダウンロードしよう!」

はじめに みなさんこんにちは、プロダクト開発本部の亀梨です。 普段はXmediaOneというメディアプランニング・広告運用管理・トラッキング・マーケティング分析を行う 統合プラットフォームの開発を担当しています。 Box APIを使う背景・目的 DACはメディアレップです メディアレップとは、インタ …

【Hivemall入門】RandomForestで毒キノコ推定モデルを作る

こんにちは。俺やで。 今回も前回から間が空いてしましたが、ビッグデータに対応したHiveで使える機械学習ライブラリ、 Hivemallの使い方について、書かせていただければと思います。 なお今回はQiitaのTreasure Data / Advent Calender 2015の12/3日分として …

TypeScriptについてまとめてみた

はじめに JavaScript がとりあえずそのまま動くので、雰囲気で使ってしまいがちな TypeScript。初心者向けに基本的なことをまとめてみました。 TypeScript って何? TypeScript はマイクロソフトが開発したプログラミング言語で、オープンソースでメンテナンスされています …

気象予報士とビッグデータ解析の意外な関係

DACから気象予報士が誕生しました ビッグデータ解析部のMikeです。 2015年1月の気象予報士試験に合格し、めでたく4月からアドテク業界ただ一人(本当?)の気象予報士となりました 。 そんなわけで、今回は気象予報士とビッグデータ解析の関係についてお話したいと思います。 なぜ気象予報士を目指したか …

トレジャーデータの新機能「Data Connector」でクライアントレスなビッグデータ連携を実現する

トレジャーデータは、スキーマレスな大量のデータ(ビッグデータ)をパブリッククラウド上に保管して集計や抽出をするためのサービスなのですが、他システムからの連携データをトレジャーデータのテーブルに格納するまでが一苦労でした。 他システムとの外部連携を行う場合、一般的にローカルサーバー内のストレージを外部 …

no image
Treasure Dataで長期間の集計

プラットフォーム・ワン T氏です。プラットフォーム・ワンでは、DSPのMarketOneとSSPのYIELD ONE提供しています。 MarketOneやYIELD ONEのログを調査する場合にTreasure Dataを使うことがあります。Treasure Dataでは大量のデータに対してHive …

【未経験からのRuby on Rails – 第3回】変数と定数

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

fastavroとjqでAVRO形式のファイルからデータを取得しよう

AVRO形式のファイルを取り扱いたい AVROとはApacheプロジェクトのひとつとして開発されているデータ交換形式です。 コンパクトなバイナリで高速なシリアライズ・デシリアライズが行えるため、サーバーログなどに利用されています。 弊社内での一部システムのログデータにも利用されているのですが、専用の …