スポンサーリンク
技術情報

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

D3.js・ワードクラウドを使ってみた【twitterトレンドを線画する】
この記事は、D3.jsのプラグインのワードクラウドだけどどうやって使うの?というのに答えます

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

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.js・ワードクラウドを使ってみた【twitterトレンドを線画する】―サイトイメージ図

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 + ")")

twitterAPIのポイント

twitterAPIでの勘所は下の2点。

  • リアルタイムtwitterAPI呼び出しでなくキャッシュを設ける
  • トレンドの数値化を検討する

ポイント1:リアルタイムtwitterAPI呼び出しでなくキャッシュを設ける

APIの厳格化に伴い、呼び出し階数の上限が厳しくなりました。
その為、トレンド取得に関するAPI呼び出しを最小限度にする為、DBやファイルなど一時キャッシュを作成します。

※実際には現在DBではなくJSONファイルで管理していますが、DBへの書き出しの影響を最小限度にする為にWebAPI化します。

米Twitterは7月24日(現地時間)、APIの使用条件を変更すると発表した。開発者アカウントの登録が必須になるほか、アプリからのツイート/リツイートの合計値が3時間当たり300までになるなど制限が厳しくなる。スパム投稿アプリなど不正アプリ対策が目的

引用:Twitter、API使用条件を厳格化 「厳しすぎる」開発者から悲鳴も【Itmedia News】より

ポイント2:トレンドの数値化を検討する

ご存知の通り、視覚化する為にキーワード及びその係数値が必要です。

twitterトレンドに関する順位やツイート数は、固定のアルゴリズムが提示されているわけではありません。

又ハッシュタグに代表されるように、グループ化されたキーワードもランキングされ、ツイート数も判断の一条件でしかないようです。

今回は、トレンドが示すランキング値をある程度優先的にしながらも、実際のツイート数を加味して数値化しました。

※ざっくりとした計算方法なので、今後再検討していきたいと思います。

トレンドはアルゴリズムによって決定され、初期設定では、フォローしているアカウント、興味関心、位置情報をもとにカスタマイズされています。

引用:Twitterのトレンドについてのよくある質問【Twitter FAQ】より

参考サイト

作成にあたり、下記の記事を参考にさせて頂きました。

大変ありがとうございます。ぜひこちらの記事も見てください!

【ナオユネット】Twitter Appsの廃止に伴いTwitter developerに申請・登録完了!面倒な申請方法や手順など画像つきで紹介

【Qiita】D3-cloud (d3-v5版) でワードクラウドを作成する@january108

まとめ

D3-cloudでのワードクラウドは、視覚的にもわかりやすく簡単です。

twitterAPIとの組み合わせはその力を発揮しやすいと思います。

今後他の機能についても、調査していきたいと思います。

D3.jsは強力なライブラリでオススメです!