Qiita
d3.js

この記事はeeic (東京大学工学部電気電子・電子情報工学科) Advent Calendar 2017 その2の12日目の記事として書かれたものです。

https://qiita.com/advent-calendar/2017/eeic2

枠が空いていたので元々アドベントカレンダーの記事にしようとしていたものをこちらに書くことにしました.

image.png
(システムのリンクはhttps://ta21cos.github.io/qiqiqi/src/zero.html)

はじめに

EEIC2016でB4をやっているtellusiumと申します.
私は今年の秋に大学の実験の方でTAをやっていました.
情報可視化実験というものです.

http://yatani.jp/teaching/doku.php?id=2017infovislab:start

去年私自身もその実験を受講しており,せっかく作ったのと後輩の参考になればと思いこの記事を書くことにしました.

どんな作品が製作されたかは,まとめ動画をみていただければ分かるかもしれません.ちなみに2016年度の方は私が製作しました(BGMが激しいのはこの動画にインセンティブを受けたからという裏話

https://www.youtube.com/watch?v=oENKNJmkweE

https://www.youtube.com/watch?v=dju0f-UfCAQ

製作物について

なんとなく私はQiitaの記事を使って何か可視化できたら面白そうということで,@natsuki-1994を誘ってチームを組みました.
(この実験は基本的には2人のチームで行われます)

紆余曲折を経て完成したのが,QIitaのタグ同士の関係を可視化したものです.

これは私のGithub(下のリンク)で現在公開しています.

https://ta21cos.github.io/qiqiqi/src/zero.html

使っている記事情報が去年までのため,新しい情報は含まれていませんのでご注意ください.
(後述のWikipedia情報と人気Contributor情報は動的に取ってきているので実は最新です)

説明

プログラマのための技術共有サービス「Qiita」の各記事には投稿者が タグを付与することができますが,「盛り上がっている技術分野の可視化」「技術同士の関連性の可視化」 ができるのではないかと思い、このシステムを作りました.

可視化にはForce Layoutを使っています.タグ同士の関係を表すにはこれが最もふさわしいと考えました.

ノード1つ1つがタグを表していいて,大きさはタグのついている記事数を表しています.
タグは1万種類ほどあるため,ある程度の記事数があるタグのみを表示しています.
また,各ノードは分野(これは自分たちの方で勝手に分類した)ごとに色分けしています.

リンクは特に結びつきの強い分野のノード同士を繋ぐようにしました(そうでないととても見辛かったので…)
しかしこのままでは離れ小島なタグが大量発生したので,最も関連性の高いノード一つとは必ず繋がるようにしています.
また年を変えることができ,ノードの大きさは左下に表示されている年までの記事の積算数に対応しています.

タグ上にマウスオーバーすると,WikipediaのAPIを用いてタグ名で検索した時に出てくる情報の最初の一文を表示しています.
なので物によっては全く関係のない文章が表示されることがあります…
(AWSとか見ると面白いかも)

各ノードをクリックすると,各タグの人気ContributorTOP3とそれぞれのContributorの人気記事一つが表示されるモーダルウィンドウが表示されます.
またContributorや記事はQiitaへのリンクになっており,ページに飛ぶこともできます.

使っている言語など

この実験では可視化ライブラリとしてD3.jsを使います.
なのでこのシステムもページ自体はD3.jsを使って作成しました.
データ処理などは後述しますがPythonを用いています.

データ収集・データ処理

この時は(今もですが)あまりDBに詳しくなかったため,記事の重複を避けるため面倒な手順を踏んでいます.
QiitaのAPIを用いて,

  • tagの一覧を取って来る(get_tags.py
  • 各tagを引数にして記事を10000件ずつ取得(get_article_by_tags.py
  • 各記事について,そのユーザーを取得(get_users_by_article.py
  • 各ユーザーについて,記事を全て取得(get_article_from_users.py

した結果の最後のデータを記事データとして用いています.
もっといい方法があるはず(primary keyを使うとか)

この後でタグ同士の共起関係を計算したものをjsonとしてあらかじめ用意し,これを用いて可視化を行なっています.
共起関係の計算は年ごとに行い,年ごとにjsonファイルを作成しています.
calc_cooccurance.pyあたりに書いてあると思います)

想定される利用方法

この実験では可視化して面白いだけでなく,ターゲットはどんなでどんな風に使われるのか,また可視化することでどんな知見が得られるかまでしっかりと考えることが求められています.

このシステムは,ある技術分野に関して興味を持っており,詳しくその分野を知ってみたいと思ったビギナーをターゲットとして製作しました.
特定の分野の人気Contributorを表示することで,その人の記事を辿ることで効率よく良質な記事にたどり着け,最短でその分野をキャッチアップできます.
なぜなら,特定のタグの人気記事よりも,人気なContributorが投稿した記事の方が良質な記事が多いと考えたからです.
それゆえにモーダルウィンドウに表示されるのも人気記事ではなく人気Contributorの記事となっています.

2012年,Qiitaの登場した年を見てみると,記事数も少なく,注目されるタグ数も少ないことがわかります.
(と書きましたがAPIで取りきれていない可能性も否定できないのであくまでも可能性ということで)

2013年をみるとタグの種類が増加し,Qiitaがプログラマ界隈で徐々に使われてきている様子がわかります.
またスマートフォン関連で見てみるとiOSタグしかなく,Androidがまだ注目されていないこともわかります.

2014年にはタグ数・記事数共に大幅に増えていることがわかります.
Androidも急激に増加しiOSと変わらない大きさに,またPythonも大きく増加しており機械学習などで一気に注目を浴びたことが伺えます.
またAppleが「Swift」を発表した年でもあり,Swiftタグが登場していることもわかります.

2016年はあの「AlphaGo」が世間を騒がせた年ですが,ここにきて「AlphaGo」の基礎技術である「強化学習」タグやGoogleの機械学習フレームワークである「Tensorflow」タグが出現しています.
またIoTタグやRaspberryPiタグも登場しており,IoTというワードが注目され始めたこともわかります.

まとめ

これまで書いたことは実験で提出したレポートを参考に書かれています.

ここまで読んだ方はお分かりかもしれませんが,この実験は多くのことを学生に求めていることがわかります.
ここでは最終成果物について書きましたが,これ以外にも先生から情報可視化についての講義や実際に例となるシステムを作るHands-on Tutorialもあり,内容は盛りだくさんです.
ちなみにこの実験は10日実験(週3日)なので,3週間から1ヶ月程度でここまでのことをやります.

確かにとても大変ですが,非常に密度の高い実験で,私はとても楽しく感じました(2日くらい徹夜した気がします)

EEICには他にもCPUを自分で作るとか,OSSを自分で改良してみるとか,色々な楽しい(つらい)実験がたくさんあります.
この記事を見て,一人でも多くの方がEEICに興味を持っていただけると嬉しいです.
(最後なんてまとめればわからないのでとりあえずEEICを宣伝していくスタイル)