rui live note

WordPress、PHP、子育て、ブログ、将棋、コワーキング、子育て、群馬等に関する日々感じたことを書いているブログです

*

Adventarの登録状況をD3.jsのツリーマップで可視化してみました

      2015/12/26   PHP, 開発 , ,

  • このエントリーをはてなブックマークに追加
  • Pocket

Adventar にはすでに昨年を上回る勢いの310以上(11月17日時点)のアドベントカレンダーが作られているようで、12月に向けてどんどん盛り上がっているようですね。

さて、そんなアドベントカレンダーには数時間で満員御礼になるものもあれば、なかなか参加者が増えないものもあるわけですが、ページを一目ぱっと見ただけではその様子は分かりにくいものです。試しに登録状況データを可視化してみました。

ちなみに可視化したできあがりはこんなページになります。(画像をクリックするとサンプルページに飛びます。)

アドベントカレンダー登録状況ツリーマップ
アドベントカレンダーTreeMap

※このデモページは cron で1時間毎に更新してますが、データを無許可でスクレイピングしてますので、もし Adventar の方に注意されるようでしたらやめます。2015/12/26:アドベントカレンダーも終わったのでcronを止めました。

登録状況のデータをスクレイピングで取得

まず、Adventarのページをスクレイピングして各カレンダーのデータを取得します。

スクレイピングには Goutte を使用しています。

この php をコマンドラインから実行すると、各カレンダーのデータ(タイトル、URL、背景色、登録件数)を取得した json ファイル(adventar.json)が、同じディレクトリに出力されます。

D3.jsのツリーマップを作成

作成した json ファイルを読み込んで、ツリーマップを表示します。

D3.js のツリーマップはこちらのサンプルを参考にしました。

以下、作成したツリーマップについての補足です。

  • タイトルの後ろにあるカッコ内の数字が参加登録件数です。
  • 各ブロックをクリックするとアドベントカレンダーのページに飛びます。
  • 各ブロックの背景色はAdventarのものに合わせています。
  • 「登録件数」「タイトル文字数」ラジオボタンを選択するとそれぞれの割合にアニメーション切り替えします。(アニメーションさせたかっただけで、タイトル文字数の値には何も意味はありませんw)

参考までに、使ったソースコードは GitHub に UP してあります。

おわりに

データビジュアライゼーションなんていろはの「い」も知らないので、このデータをツリーマップで可視化することが適切だったのかもよく分かってませんが、とりあえずやってみたいからやってみました。もしツッコミなどございましたら大歓迎です!

さて、自分が今年作成した「作業用BGM」は、ツリーマップにするとこの辺りに入ってるようです。まだまだ小さいですね!

作業用BGMアドベントカレンダー

何となく前後に並んでいるカレンダーに親近感が湧いてきたりしつつも、やっぱり最後にはもっと大きく右の方に移動しているようになってるといいなーと。。

ちなみに、Qiita のアドベントカレンダーでも同じことをしてみようと思ったんですが、一覧を取得できるページがすぐに見つからなかったのでとりあえずやめました。もしページがあるようでしたら、時間のある時にまたやってみたいと思います。

ad

この記事が気に入ったらシェアしてもらえると嬉しいです!

  • このエントリーをはてなブックマークに追加
  • Pocket
  • follow us in feedly
  • RSS

  関連記事

トンネリング
MacでSSHトンネル作ってサーバにFileZillaでファイル転送する方法

以前、Windows で開発していた頃はよくやっていたのですが、何気に Mac …

Eコマース
EC-CUBEにGoogleアナリティクスのeコマーストラッキングを埋め込む設定方法

Google Analytics の eコマーストラッキング機能を使用すると、サ …

鍵
WordPressで不正アクセス履歴がチェックできるプラグイン「Crazy Bone(狂骨)」でセキュリティ意識を高めよう

とあるサイトのお客さんから、WordPress管理画面のログイン履歴が確認したい …

iMac
EC-CUBEでユーザー独自のセッション情報を管理する

EC-CUBE をカスタマイズしていると独自のセッション情報を使いたいケースが出 …

programming_language
プログラミング言語の使い手の呼び名を集めてみました

photo credit: nyuhuhuu via photopin cc プ …

Thank you
1月28日はWordPressの「プラグイン開発者に感謝する日」

WordPress 公式ブログによると1月28日は「プラグイン開発者に感謝する日 …

テスト
「SonicGarden Study #05」を見てテストについて感じたこと

先日、Ustreamで配信されたソニックガーデンさん主催のオンライン勉強会「So …

キーボード
WordPressでEnterキー押下時のsubmitはうまくできている

タイトルのままですが、WordPressを使っていてEnterキー押下時のsub …

svg
PHP+ImagickでSVGを画像変換する手順まとめ

PHP+ImagickでSVGを画像変換してみるまでの流れをまとめておきます。 …

WordPress
WordPressで特定のタグを持つ投稿にだけ共通メッセージを表示させてみる

WordPressの小ネタです。 ある特定のタグを持つ投稿にだけ、本文の先頭に共 …