Qiita의 투고를 NVD3로 가시화해 보면 Ruby 인기다고 다시 알았다.

12304 단어 자바스크립트데이터 시각화NVD3d3.jsQiita
Qiita에서 어떤 기술이 인기인지 알고 싶었고, Qiita API를 사용해 태그 일람을 취득해, 그 팔로워와 투고수를 NVD3로 가시화해 보았습니다.
※NVD3는 d3.js의 확장 라이브러리입니다.
템플릿이 몇 개 준비되어 있으므로, 즉시 d3.js로 깨끗한 그래프를 그릴 수 있습니다.

이번 완성이 이쪽입니다.

htp // bl. 오크스. 오 rg / 가네자 씨 / b7636 6 6c1196 6b60b



Qiita API를 사용하여 태그 목록 얻기



하고 싶은 것은 Qiita API로 JSON을 취득 ⇒ JSON 파일로서 보존입니다.
이번에는 JavaScript로 해 보려고합니다.

Qiita API로 태그 목록을 얻는 방법


https://qiita.com/api/v1/tags.json?page=1&per_page=100

페이지가 대상인 페이지
per_page가 페이지 당 건수

자세한 것은 이쪽을 확인해 주세요.

h tp : // 쿠이타. 코 m / 두 cs

JavaScript로 JSON 데이터 저장



이 기사에 더 간단한 것을 쓰고 있습니다.

ぃ tp // 이 m / 가네자 씨 /

저장 후 qiita.json이라는 이름을 사용하십시오.

<!DOCTYPE html>
<meta charset="utf-8">
<style>
  * {
    margin: 0;
    padding: 0;
    border: 0;
  }

  body {
    background: #fff;
  }
</style>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

<script src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button type="button" class="btn btn-primary" id="getJson">JSONファイル取得</button>

<script>
$("#getJson").bind("click",function(){
var max = 50;
var data = [];
var i = 1;
getQiita(data,i);

function getQiita(data,i){
  if(i > max){
    //jsonデータをlocation.herfにデータとして渡している
    //ダウンロードというファイル名で保存されます
    var href = "data:application/octet-stream," + encodeURIComponent(JSON.stringify(data));
    location.href = href;
    return true;
  }
  //Qiita APIでJSONデータを取得
  d3.json('https://qiita.com/api/v1/tags.json?page='+i+'&per_page=100',function(json){
    console.log(i);
    console.log(json.length);
    data = data.concat(json);
    i++;
    setTimeout(getQiita(data,i), 3000);
  });
}
});
</script>

소스 코드는 여기입니다.


<!DOCTYPE html>
<meta charset="utf-8">
<style>
* {
margin: 0;
padding: 0;
border: 0;
}

body {
background: #fff;
}

</style>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="nv.d3.css">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="nv.d3.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="svg_area" style="height:500px;">
  <svg id="ScatterPlot" width="1000" height="500"></svg>
</div>

<script>
d3.json("qiita.json",function(json){
    //jsonファイルを読み込み、nvd3のscatterChartで使用するデータの型に変換する
    var data = json.map(function(d){ return         {key:d.name,values:[{
         x: d.follower_count
      , y: d.item_count
      , size: d.item_count
      , shapes: 'circle'
    }]}})

    nv.addGraph(function() {

      //showLegendをtrueにすると判例がでて見やすいのですが、今回ドットの件数が多いためfalseにして消しています
      //sizeRangeはドットの大きさを表しています
      var chart = nv.models.scatterChart()
                    .showLegend(false)
                    .showDistX(true)
                    .showDistY(true)
                    .color(d3.scale.category20().range())
                    .sizeRange([10, 5000]);

      //マウスオーバーした時のツールチップの表示
      chart.tooltipContent(function(key) {
          return '<h3>' + key + '</h3>';
      });
      //ドットをサークルのみにするかを指定します。ドットを三角とかにもできます
      chart.scatter.onlyCircles(false);

      //軸のラベル
      chart.xAxis.axisLabel("フォロワー数");     
      chart.yAxis.axisLabel("投稿数");

      //svgを選択して、データを渡しています
      d3.select('#ScatterPlot')
          .datum(data)
          .call(chart);

      nv.utils.windowResize(chart.update);   
      return chart;
  });
});

</script>

요약





이 그래프의 견해로서 오른쪽 상단에 있는 도트가 유저도 있고, 투고수도 많은 것을 알 수 있습니다. 그 때문에 Ruby는 Qiita 중에서는 가장 투고수가 많은 태그군요.
Ruby 태그에 올리면 9414명의 사람들이 볼 수 있습니다.
또, 제일 오른쪽의 회색의 원이 JavaScript입니다만, Ruby와는 오른쪽에 오르는 각도가 꽤 다릅니다. Ruby는 인원수에 비해 게시물이 많은 것을 알 수 있습니다.

또한 왼쪽 상단에 Rails와 iOS가 있습니다만, 이것은 팔로워수는 JavaScript의 3분의 1 정도로 10000명의 차이가 있습니다만, 투고수는 JavaScript와 1000 정도밖에 바뀌지 않습니다. 따라서 Rails와 iOS는 상당히 유저가 활발한지, 또는 태그를 팔로우하고 있지 않지만, Rails와 iOS 태그를 사용하는 유저가 많을까의 가능성이 보입니다.

이번에는 전혀 데이터가 부족하기 때문에, 조금 불완전 연소입니다만,
역시 많은 데이터를 가시화해 보는 것은 즐겁네요.

이번에 산포도를 드래그한 부분을 좁힐 수 있도록 하고 싶었습니다만,
d3.svg.brush()를 nvd3에 통합하는 곳에서는 빠져 버렸기 때문에,
다음은 다시 도전하고 싶습니다.
이대로라면, 단지 이미지와 다르지 않기 때문에, 보다 인터랙티브한 것으로 해 갑니다.
JavaScript로 JSON 파일 다운로드
NVD3에서 Qiita의 투고를 월 단위로 집계한 그래프를 만들어 보았다

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage