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

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

この記事を書いた人

ko31

岩手県出身、群馬県在住のフリーランスWeb系エンジニアです。
Webシステム・アプリ、Webサービス、WordPress開発等を雑多にこなしています。バンカラ応援好きの振り飛車党。
PHP / WordPress / 高校野球 / 将棋 / WordPress / ブログ / 食べること / 二児の父親

>>もっと詳しいプロフィールはこちら

お仕事のご相談・お問い合わせ

当ブログの管理人は、Gosign(ゴーサイン)という屋号でフリーランス Web エンジニアとして活動しています。
ブログの掲載内容はもちろん、Web サイト制作や Web アプリケーション開発などのご相談・ご質問がありましたら、どうぞお気軽にお問い合わせください!

合わせて読みたい記事