d3.jsでqiita記事tagの統計を可視化してみた

やりたいこと

Qiitaの記事にはその記事を表現するトピックとしてのタグを最大5つつけます。各タグのページではそのタグをもつ記事とともに記事の数とフォロワー数が表示されます。この数字は世間におけるそのタグの人気や注目度合いを表わしていますが、他のタグの記事数などど比較することで全体での位置付けなどを測ることができます。この為に複数のタグの記事数などを並べて比較できる可視化を試みました。githubの各レポジトリの人気やpushやfolk数などを可視化したgithutと同じようなことを目指し、参考にしました。

手法とか

データ

Qiita Api を使って以下のものを取得しました。
-各タグの記事数
-フォロワー数
-そのタグを含んだ記事の総ストック数
GET /api/v2/tagsをたたいてタグ一覧を取得します。これで得られるjsonに"stockers_count"を追加した以下のようなjsonで表現されるデータを可視化します.

{"id": タグの名前,
 "items_count": 0,
 "followers_count": 0,
 "stockers_count": 0}

"stockers_count"はそのタグのついた記事の被ストック数の合計です。GET /api/v2/items/:item_id/stockersを使うと"item_id"で指定される記事をストックしているユーザ一覧が取得できるので、それをたしあげて"stokers_count"を求めます。またこれを行なうにはitem_idを取得する必要があるのですが、これはGET /api/v2/tags/:tag_id/itemsで指定したタグtag_idをもつ記事の一覧を取得してその一覧の各記事のitem_idを取得します。
ながれは
1. GET /api/v2/tags: タグ一覧の取得
2. GET /api/v2/tags/:tag_id/items: 上で所得したタグを持つ記事一覧の取得
3. GET /api/v2/items/:item_id/stockers: 上で取得したidをもつ記事をストックしているユーザ一覧の取得
Qiita APIは要素100個ずつしか取得できずRate limitが1000回/時間なので大変です。一覧を取得するAPIで数だけを取得したい場合はレスポンスヘッダに含まれる"Total count"フィールドをみればよいです。

RESTを使ってみたかったので、Pythonを使って自分でクロールしました。とりあえずgistにあげていますが、Qiita apiのラッパは各言語ごとにすでにあるので参考を参照にそれらを使うとよいと思います。

可視化方法

各タグごとに記事数やフォロワー数がどうなっているのかとそれぞれの値が他のタグと比較してどのような位置付けなのかを示したかったのでパラレルチャートを採用しました。

d3.jsによる可視化

記事数の多い順で表示します．表示するタグの数はデフォルト10で最大100まで表示できます．軸ラベルや各タグの部分にマウスオーバすると具体的な数を表示します．また各指標ごとのランキング上位タグをテーブルに表示しています．

この可視化のページを公開しています．
http://takoika.github.io/qiitaStatViz/
作成したものはソースをgistにあげて，bl.ocks.orgで見れるようにしました．
ソース: http://bl.ocks.org/takoika/389e45f19688416a6c42
サイト: http://bl.ocks.org/takoika/raw/389e45f19688416a6c42

Rubyは投稿数に対してフォロワー数が少ない，これは人気に比して投稿数が多すぎるのかもしれません．Javaは投稿数に対してフォローワ数が多いので，まだまだ記事が足りていないのかまたはすでにある記事の質が高かったり，内容が十分であるのかもしれません．ストッカー数をみるとフォロワー数とはまた別の傾向があります．ストッカー数が多いタグはweb系の実用度の高い技術のタグがめだちます．これらのタグではリファレンスなど後に読む可能性のある記事が多いためストックされやすいと考えられます．

クロールする時間がかかるため，ストッカー数に関してはまだいれていません．準備できしだい追加したいと思っています．

参考にしたサイトとか

Qiita Api Pythonラッパ

https://github.com/nittyan/QiitaAPI
https://github.com/petitviolet/qiita_py

可視化

可視化方法の参考

githut: github統計の可視化

d3.jsに関して

d3: scales, and color.
D3 Tips and Tricks

他のQiita タグの可視化

Qiitaの投稿をNVD3で可視化してみるとRuby人気なんだなと改めて分かった。
Qiitaのタグ別のストック数分布についての考察

コード，データなど

自作のQiita API ラッパ: 今回の為に最低限実装したものですので使用はおすすめしません
可視化用のHTML, Javascriptのソースとデータ

コメント，ご質問などあれば気楽にお問い合わせ下さい．