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

  関連記事

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

photo credit: nyuhuhuu via photopin cc プ …

MySQL
MySQLで実行されたSQLクエリをログ出力する設定

MySQL で実行された全ての SQL クエリをログ出力する設定方法について。 …

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

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

野球ボールわぷー
野球ボールわぷーを作ってみました

高校野球真っ盛りシーズン!ということで、野球にちなんでボールを抱き抱えたわぷーを …

Stinger
WordPressテーマをStingerに変更しました

先日からこのWordPressサイトのテーマを話題の「Stinger」に変更して …

FuelPHP
「はじめてのフレームワークとしてのFuelPHP 第2版」が当選したのでFuelPHPを軽くいじってみました

先日、軽い気持ちでこちらの電子書籍版 FuelPHP 本のプレゼントに応募したと …

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

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

Gravatar
Gravatar Widgetプラグインでサイドバーにプロフィール画像を表示してみた。

Gravatar Widget Gravatar WidgetというWordPr …

Git
とりあえずGit使ってみたい!「Gitポケットリファレンス」はそんな人に向いてる一冊でした。

今さらながら、最近ようやくGitを使い始めている今日この頃です。 少し前までは、 …

WP-CLI
WordPress移行時にwp search-replaceコマンドでマルチサイトのドメイン文字列も置換する

WP-CLI の「wp search-replace」コマンドについて、自己解決 …