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

  関連記事

グラフ
「WordPressもくもく勉強会@群馬」の参加者状況を集計してD3.jsで可視化してみました

毎月最終木曜に開いている WordPress のもくもく会「WordPressも …

WordPress
WordPress 3.5.1に更新したのでそのアップグレード手順まとめ

WordPress Logo / Phil Oakley 久しぶりのブログ更新で …

20130328_jodconverter
OpenOfficeとLibreOfficeを使ってJODConverterのPDF変換結果を比べてみる

photo credit: hfreesartography via photo …

ビジネスマン
chrome標準のPDF Viewerを無効にする方法

Adobe Readerとか他のプラグインでPDFを見たい場合に、chrome標 …

棋士データベースクイックサーチ
棋士データベースで遊ぶ(6)〜クイックサーチ機能を作る〜

※この記事は「将棋 Advent Calendar 2016 – A …

notify_from_wp
WordPressからLINE Notifyにメッセージを通知してみた

先日いじってみた LINE Notify が面白かったので、今度は WordPr …

ゴミの分別
だいぶスッキリ。WordPressのカテゴリーを整理してみた。

当ブログのカテゴリーを整理してみました。 今までカテゴリーは無計画に作っていまし …

linkwighin
WordPressの関連記事表示に便利なLinkWithinプラグインを入れてみた。

LinkWithin WordPressで関連記事を表示するのにとても便利なプラ …

D3.js
棋士データベースで遊ぶ(8)〜棋士の師弟関係をD3.jsで可視化〜

※この記事は「将棋 Advent Calendar 2016 – A …

Google Adsense
Stingerのスマホ用Google Adsense表示問題を別な方法で修正してみる

当サイトのテーマをつい最近Stingerに変えたばかりだったのですが、とてもタイ …