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
2016年私のWordPressの思い出を振り返ります(WordPress Advent Calendar 2016 5日目)

この記事は「WordPress Advent Calendar 2016」5日目 …

CentOS
CentOSでコンソールが文字化けするのをLocale変更して直す

CentOSにSSHでログインしてコンソールをいじってると、マルチバイト文字が文 …

WordBench 東京
WordBench東京 7月「WordPressでのブログライティングとブログ運営」に参加してきたのでその感想など。

7月3日に開かれた、WordBench東京7月『WordPressでのブログライ …

配達
EC-CUBEで商品を大量注文するとお届け先情報が空っぽになる件

EC-CUBE で商品を大量に注文した時に、お届け先情報が空っぽになるという問題 …

引っ越し
WordPressのサーバ移転した時の以降作業手順まとめ

先日、とあるサイトのWordPressサイトをサーバ移転する作業を行いました。 …

コンソール
さくらVPSでGNU GLOBALをインストールした時のメモ

先日から使い始めたさくら VPS 環境にGNU GLOBALをインストールした時 …

ネットショップ
EC-CUBEでサーバー移行するときの作業手順まとめ

サイト公開までは開発用ドメインで EC-CUBE を作成しておき、完成したらごっ …

ERMaster
ERMasterの動作が重くなった時に変更履歴の削除を試してみてはいかが

・ER Master DBのモデリングには対応DBが多く、エクスポート機能も充実 …

鍵
WordPressを強化するためのセキュリティ対策32項目

みなさんの WordPress はセキュリティ対策できてますか? 世界中の We …

PERARI
WebRTCで動画チャットできる「PERARI」というWebサービスを作りました

※この投稿は「WebRTC Advent Calendar 2014」の3日目の …