D3.js・ワードクラウドを使ってみた【twitterトレンドを線画する】

この記事は、D3.jsのプラグインのワードクラウドだけどどうやって使うの？というのに答えます

D3のプラグインであるワードクラウドを使って地域別のtwitterトレンド情報の線画ページを作ります。

Contants

D3ワードクラウドとは？
今回のサンプル
- D3-cloudのポイント
- twitterAPIのポイント
  - ポイント1:リアルタイムtwitterAPI呼び出しでなくキャッシュを設ける
  - ポイント2:トレンドの数値化を検討する
参考サイト
まとめ

D3ワードクラウドとは？

ワードクラウドとは、文章中の出現頻度や一定の数値から、その値に応じた大きさで図示する手法です。

今回はtwitterの本日(2019.1.23)の各地域のトレンド情報を可視化してみます。

twitterのAPIを呼び出し、一度DBに格納します。
格納DB内のトレンド情報を返すWebAPI経由で、D3/cloudライブラリに渡して線画します。
D3.js・ワードクラウドを使ってみた【twitterトレンドを線画する】―イメージ図

直接twitterAPI呼び出しを検討していたのですが、テスト中一定回数でロックされる現象が発生した為、バッファとしてDBに格納します

その前にD3.jsとDB連動についての記事はこちら

D3.jsでWebに地図を描くPART2【DBとの接続方法紹介！】この記事は、Webに線画した地図とDB(データベース)を連動したいんだけど、どうしたらいいの？に答えます。前回紹介したD3.js...

今回のサンプル

今回のサンプルサイトは下記のイメージ。

※画像をクリックすることでサンプルサイトへ飛びます。

D3-cloudのポイント

D3-cloudでのソース理解に関する勘所は下の3点。

線画のタイミングはendイベント
線画する中心値を設定する
サンプルは線画サイズを動的に対応させる

■線画部分ソース

var size = {width: $(".chartcontainer").width(), height: 480};

d3.layout.cloud().size([size.width, size.height])
    .words(words)
    .rotate(function() { return Math.round(1-random()) *90; }) //ランダムに文字を90度回転
    .font("Impact")
    .fontSize(function(d) { return d.size; })
    .on("end", draw) //描画関数の読み込み
    .start();

//wordcloud 描画
function draw(words) {
    d3.selectAll('text').remove();
    d3.selectAll(".chartcontainer")
      .append("svg")
        .attr("viewBox", "0 0 " + size.width + " " + size.height)
        .attr("width", size.width)
        .attr("height", size.height)
        .style("border", "1px solid gray")
      .append("g")
        .attr("transform", "translate(" + size.width / 2 + "," + size.height / 2 + ")")
      .selectAll("text")
        .data(words)
        .enter()
        .append("text")
          .style("font-size", function(d) { return d.size + "px"; })
          .style("font-family", "Impact")
          .style("fill", function(d, i) { return d3.schemeCategory10[i % 10]; })
          .attr("text-anchor", "middle")
          .attr("transform", function(d) {
              return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
          })
        .text(function(d) { return d.text; });
}

ポイント1:線画のタイミングはendイベント

d3.layout.cloudオブジェクトの【end】イベントでdraw関数を呼び出します。

d3.layout.cloud().size([size.width, size.height])
    .words(words)
    --(中略)--
    .on("end", draw) //描画draw関数の読み込み
    .start();

    //wordcloud 描画
    function draw(words) {
        --(中略)--
    }

ポイント2:線画する中心値を設定する

全体ソースのdraw関数内、【g】要素に対する「transform」属性を幅と高さの半分の値にすることで線画位置を中心にできます。

function draw(words) {

    d3.selectAll(".chartcontainer")
     --(中略)--
    .append("g")
    .attr("transform", "translate(" + size.width / 2 + "," + size.height / 2 + ")")

ポイント3:サンプルは線画サイズを動的に対応させる

全体ソースのdraw関数内、【g】要素に対する「transform」属性を幅と高さの半分の値にすることで線画位置を中心にできます。

var size = {width: $(".chartcontainer").width(), height: 480};

d3.layout.cloud().size([size.width, size.height])
--(中略)--

//wordcloud 描画
function draw(words) {
    --(中略)--
    .append("svg")
      .attr("viewBox", "0 0 " + size.width + " " + size.height)
      .attr("width", size.width)
      .attr("height", size.height)
      .style("border", "1px solid gray")
    .append("g")
      .attr("transform", "translate(" + size.width / 2 + "," + size.height / 2 + ")")