DS Oct, Data 2 by sxywu

index.html

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js"></script>
  <script src="https://npmcdn.com/babel-core@5.8.34/browser.min.js"></script>
  <style>
    .video {
      display: inline-block;
      width: 304px;
      padding: 20px;
      vertical-align: top;
    }
    
    .video div {
      padding-top: 10px;
    }
  </style>
</head>
 
<body>
  <div id='main'></div>
  <script>
		d3.json('videos.json', videos => {
      _.each(videos, video => {
        // go through each video and convert stats to ints
        _.each(video.statistics, (count, key) => {
          video.statistics[key] = parseInt(count);
        });
        
        // update duration
        var duration = video.duration.replace('PT', '');
        var minutes = duration.match(/(\d*)M/);
        minutes = minutes ? parseInt(minutes[1]) : 0;
        var seconds = duration.match(/(\d*)S/);
        seconds = seconds ? parseInt(seconds[1]) : 0;
        video.duration = {minutes, seconds};
      });
      videos = _.sortBy(videos, video => -video.statistics.viewCount)
      console.log(JSON.stringify(videos))
      
      var main = d3.select('#main');
      
      var video = main.selectAll('.video')
      	.data(videos).enter().append('span')
      	.classed('video', true);
      video.append('iframe')
      	.attr('allowFullScreen', true)
      	.attr('src', d => '//www.youtube.com/embed/' + d.videoId);
      video.append('div')
      	.text((d, i) => i + '. ' + d.channelTitle);
      video.append('div')
      	.text(d => d.title);
      video.append('div')
      	.text(d => d.videoId);
      video.append('div')
      	.text(d => d.publishedAt.split('T')[0]);
      video.append('div')
      	.text(d => d3.format(',')(d.statistics.viewCount));
    });

  </script>
</body>