DS July: Explore Data by sxywu

index.html

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.11.2/lodash.js'></script>
  <style>
    * {
      color: #E0E0E0;
    }
    .title {
      font-size: 1.25em;
      font-weight: 600;
    }
    td {
      padding: 8px;
    }
  </style>
</head>

<body>
  <table />
  <script>
    var colors = d3.scale.linear()
    	.domain([1, 10]).range(['#D7FFDC', '#001702']);
    
		d3.json('movies.json', function(movies) {
      movies = _.chain(movies)
        .sortBy(function(d) {return -parseFloat(d.imdbRating)})
        .map(function(movie, i) {
          movie.index = i + 1;
          return movie;
        }).value();
      console.log(movies);
      
      var genres = _.chain(movies)
      	.map(function(movie) {
          return _.split(movie.Genre, ', ');
        }).flatten().countBy().value();
      console.log(genres);
      
			var years = _.chain(movies)
      	.map(function(movie) {
          return parseInt(movie.Year);
        }).countBy().value();
      console.log(years)
      
      var ratings = _.chain(movies)
      	.map('Rated').countBy().value();
      console.log(ratings)
      
      var actors = _.chain(movies)
      	.map(function(d) {
          return d.Actors.split(', ')
        }).flatten().countBy().value();
      console.log(actors);
      
      var minVotes = d3.min(movies, function(d) {
        return parseInt(d.imdbVotes.replace(',', ''));
      });
      var maxVotes = d3.max(movies, function(d) {
        return parseInt(d.imdbVotes.replace(',', ''));
      });
      console.log(minVotes, maxVotes);
      
      // now to see how many movies I'VE seen
      var moviesSeen = _.filter(movies, 'Seen');
      var movieGenresSeen = _.chain(moviesSeen)
      	.map(function(d) {
          return d.Genre.split(', ');
        }).flatten().countBy().value();
      var movieYearsSeen = _.chain(moviesSeen)
      	.map('Year').countBy().value();
      console.log(movieYearsSeen, movieGenresSeen, moviesSeen.length)
      
      var rows = d3.select('table')
      	.selectAll('tr').data(movies);
      
      var enterRows = rows.enter().append('tr')
      	.style('cursor', 'pointer')
      	.on('click', function(d) {
          window.open('//www.imdb.com/title/' + d.imdbID, '_new');
        });
      enterRows.append('td')
      	.classed('index', true);
      enterRows.append('td')
      	.classed('year', true);
      enterRows.append('td')
      	.classed('title', true);
      enterRows.append('td')
      	.classed('rating', true);
      
      rows.exit().remove();
      
      rows.selectAll('.index')
      	.text(function(d, i) {return d.index});
      rows.selectAll('.year')
      	.text(function(d) {return d.Year});
      rows.selectAll('.title')
      	.text(function(d) {return d.Title});
      rows.selectAll('.rating')
      	.text(function(d) {return d.imdbRating + ' (' + d.imdbVotes + ')'});
      rows.style('background-color', function(d) {
        return colors(parseFloat(d.imdbRating));
      });
    });
  </script>
</body>