【D3.js】参照元別の訪問者数をツリーマップで表示する

流行る記事、流行らない記事[追記あり]

これは身につまされます。
体感では、時間をかけたエントリーほどはてブされない気が。
ただ、ブログのジャンルにもよりますが、長い目でみるとソーシャルメディアからの流入より検索エンジンからの流入の方がブログ全体のアクセスアップには貢献してくれたりもするので、気にしすぎない方がいいかもしれません。(たまにはてブされたりすると、一時的にPVが跳ね上がるのでどうしても気になってしまいますけどね)

そこで、参照元別訪問者数の比率を再確認するためにTreeMapを作ってみました。

訪問者数／新規訪問の割合（TreeMap）

データセットの作成

Googleアナリティクス「トラフィック→参照元→すべてのトラフィック」のデータをCSVでエクスポートします。

エクスポートしたCSVをテキストエディタ等で整形します。

trafficSources.csv(整形済)

TreeMapとして表示

D3.jsのTreeMapレイアウトを使用して表示します。
ヘルパー関数として、こちらの記事で作成した関数を使用しています。

d3.csv('trafficSources.csv', function(csv){
    csv = csv.slice(0, 15); //表示する参照元を15件に絞り込み

    var data = { children:csv }; //csvから取得したデータを全てrootの配下(children)に追加する
    
    var svg = d3.select('svg');  //TreeMapを描画するステージを選択
                        
    //Treemapのboxサイズに対応させる要素を指定
    var retVisits = function(d){ return parseInt(d.Visits) };
    var retNew_Visits = function(d){ return parseInt(d.New_Visits.replace('%', '')) };　//「新規訪問者の割合」は%を削除して数値に変換する

    var w = 1000;   
    var h = 600; 

    var treemap = d3.layout.treemap().size([w, h]); //Treemapレイアウトオブジェクトを作成。Treemapのサイズ(縦横)を指定
    var TreemapData = treemap.value(retVisits).nodes(data); //Visitsの値を基準にTreemap用のデータに変換する

    var boxStyle = { //boxスタイル指定
        x:F('x'),
        y:F('y'),
        width:F('dx'),
        height:F('dy')  
    }
    
    var boxColorStyle = function(d){　//参照元のジャンル別にfillcolorを指定
        var color = "blue";
        switch(d.Source){
            case 'yahoo':
            case 'google.co.jp':
            case 'google':color = 'green';break;
            case 'facebook.com':
            case 'm.facebook.com':
            case 't.co': 
            case 'b.hatena.ne.jp':color = 'red';break;
        }
        return color
    }
    
    
    var boxGroup = svg.selectAll("g") //Boxグループを追加
        .data(TreemapData) 
        .enter()
        .append("g"); 

    var box =  boxGroup.append('rect') //各BoxをBoxグループに追加
        .attr({
            class:F('Source'),
            fill:boxColorStyle, 
            stroke: "black",
            "fill-opacity": 0.5
        })
        .attr(boxStyle)

    var textStyle = { //ラベルスタイル指定
        x:F('x', ' + 5'),
        y:F('y', ' + 20')
    }

    var text = boxGroup.append('text') //ラベル追加
        .attr({
            fill:"white",
            "font-size": 12
        })
        .attr(textStyle)
        .text(F('Source')); //参照元(Source)を表示


    var style1 = function(){ //訪問者数(Visits)を基準としたスタイル
        boxGroup.data(treemap.value(retVisits).nodes(data));
        box.transition().attr(boxStyle).duration(1000);
        text.transition().attr(textStyle).duration(1000);    
    }
    var style2 = function(){ //新規訪問者数の割合(New_Visits)を基準としたスタイル
        boxGroup.data(treemap.value(retNew_Visits).nodes(data));
        box.transition().attr(boxStyle).duration(1000);
        text.transition().attr(textStyle).duration(1000);    
    }

    //ボタンクリックイベントの設定
    d3.select('#Visits_btn').on('click', style1)
    d3.select('#New_Visits_btn').on('click', style2)
});

d3.csv('trafficSources.csv', function(csv){

csv = csv.slice(0, 15); //表示する参照元を15件に絞り込み

var data = { children:csv }; //csvから取得したデータを全てrootの配下(children)に追加する

var svg = d3.select('svg'); //TreeMapを描画するステージを選択

//Treemapのboxサイズに対応させる要素を指定

var retVisits = function(d){ return parseInt(d.Visits) };

var retNew_Visits = function(d){ return parseInt(d.New_Visits.replace('%', '')) };　//「新規訪問者の割合」は%を削除して数値に変換する

var w = 1000;

var h = 600;

var treemap = d3.layout.treemap().size([w, h]); //Treemapレイアウトオブジェクトを作成。Treemapのサイズ(縦横)を指定

var TreemapData = treemap.value(retVisits).nodes(data); //Visitsの値を基準にTreemap用のデータに変換する

var boxStyle = { //boxスタイル指定

x:F('x'),

y:F('y'),

width:F('dx'),

height:F('dy')

}

var boxColorStyle = function(d){　//参照元のジャンル別にfillcolorを指定

var color = "blue";

switch(d.Source){

case 'yahoo':

case 'google.co.jp':

case 'google':color = 'green';break;

case 'facebook.com':

case 'm.facebook.com':

case 't.co':

case 'b.hatena.ne.jp':color = 'red';break;

}

return color

}

var boxGroup = svg.selectAll("g") //Boxグループを追加

.data(TreemapData)

.enter()

.append("g");

var box = boxGroup.append('rect') //各BoxをBoxグループに追加

.attr({

class:F('Source'),

fill:boxColorStyle,

stroke: "black",

"fill-opacity": 0.5

})

.attr(boxStyle)

var textStyle = { //ラベルスタイル指定

x:F('x', ' + 5'),

y:F('y', ' + 20')

}

var text = boxGroup.append('text') //ラベル追加

.attr({

fill:"white",

"font-size": 12

})

.attr(textStyle)

.text(F('Source')); //参照元(Source)を表示

var style1 = function(){ //訪問者数(Visits)を基準としたスタイル

boxGroup.data(treemap.value(retVisits).nodes(data));

box.transition().attr(boxStyle).duration(1000);

text.transition().attr(textStyle).duration(1000);

}

var style2 = function(){ //新規訪問者数の割合(New_Visits)を基準としたスタイル

boxGroup.data(treemap.value(retNew_Visits).nodes(data));

box.transition().attr(boxStyle).duration(1000);

text.transition().attr(textStyle).duration(1000);

}

//ボタンクリックイベントの設定

d3.select('#Visits_btn').on('click', style1)

d3.select('#New_Visits_btn').on('click', style2)

});

example

結果

訪問者数の多い参照元ほど大きなBOXで表示されます。
赤　＝　はてブ／Twitter／Facebookなどソーシャルメディア
緑　＝　検索エンジン
青　＝　それ以外

図にしてみると、数字でみるよりわかりやすい気がしますね。
今回は、直近１ヶ月分のデータを使いましたが、年末あたりに１年間分のデータを使ってもっと細かい内容のツリーマップを作ってみようかと思います。

データセットの作成

TreeMapとして表示

結果

投稿者: shimizu