NVD3에서 Qiita의 투고를 월 단위로 집계한 그래프를 만들어 보았다

여기 에 쓴 순서로 취득한 Qiita의 「거의」전 투고를, 월 단위로 집계해 NVD3를 사용해 막대 그래프로 표시해 보았다.



만든 것



NVD3이란?



d3.js를 사용한 차트 라이브러리.
다양한 차트 템플릿이 준비되어 있어 인터랙티브한 조작이 가능하고 깨끗한 그래프를 만들 수 있다.

d3.js에서는 SVG등에서 스스로 그래프를 쓸 필요가 있지만, NVD3에서는 데이터를 건네주어 몇개의 설정을 하는 것만으로 좋다.

단지 문서가 보이지 않기 때문에, 샘플을 보지 않으면 사용법을 전혀 모른다.

샘플을 보고, 자신이 만들고 싶은 그래프에 딱 일치하는 것이 있으면, 채용을 검토해 보면 좋다고 생각한다.

샘플
htp : / / n vd3. rg/에ぁmpぇs/그리고 x. HTML
출처
htps : // 기주 b. 이 m / ゔ s / n vd3

데이터



데이터는 여기 에 작성한 순서로 취득한 2014년 9월까지의 투고.
※정확하게 모든 투고를 취득하고 있는 것은 아니다.

투고의 JSON을 그대로 사용하면 크기가 너무 커서 작성일시와 태그를 추출한 TSV 파일을 미리 준비했다.
2014-09-30 23:32:50 +0900   MySQL   Windows
2014-09-30 23:33:55 +0900   Go
2014-09-30 23:43:43 +0900   AWS CloudFront
2014-09-30 23:50:42 +0900   C#
2014-09-30 23:57:42 +0900   Vim RuboCop Ruby    syntastic

QiitaAPI는 v1을 사용.
v2에서는 더 많은 데이터를 얻을 수 있기 때문에 사용하고 싶었지만, 현시점에서는 아직 문제가 있기 때문에 v1을 사용했다.

좋은 웹페이지 즐겨찾기