DS July: Code 6

Built with blockbuilder.org

forked from sxywu's block: DS July: Code 1

forked from sxywu's block: DS July: Code 2

forked from sxywu's block: DS July: Code 3

forked from sxywu's block: DS July: Code 4

forked from sxywu's block: DS July: Code 5

forked from sxywu's block: DS July: Code 6

<!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.13.1/lodash.js'></script>
  <link href='https://fonts.googleapis.com/css?family=Libre+Baskerville:700' rel='stylesheet' type='text/css'>
  
  <style>
    body {
      font-family: "Libre Baskerville";
    }
    
    svg {
      position: absolute;
      width: 900px;
      height: 6200px;
      top: 0;
    }
    
    .years {
      position: absolute;
      top: 0;
      color: #444;
      text-align: center;
    }
    
    .titles {
      position: absolute;
      top: 0;
      text-align: center;
      font-weight: 700;
      font-size: .85em;
    }
    
    /* blend options taken from visual cinnamon tutorial: https://www.visualcinnamon.com/2016/05/beautiful-color-blending-svg-d3.html */
    /*Set isolate on the group element*/
    .flower {
      isolation: isolate;
      cursor: pointer;
    }  
    /*Set blend mode on SVG element: e.g. screen, multiply*/
    .flower circle { mix-blend-mode: multiply; }
  </style>
</head>

<body>
  <div class='errthang'>
    <svg></svg>
    <div class='years'></div>
    <div class='titles'></div>
  </div>
  
  <script>
    var flowerSize = 150;
    var padding = 20;
    var svg = d3.select('svg')
    	.style('left', flowerSize + 'px')
    	.append('g')
    	.attr('transform', 'translate(' + [padding, padding] + ')');
    var years = d3.select('.years');
    var titles = d3.select('.titles')
    	.style('left', flowerSize + 'px')
    	.style('padding', padding + 'px');
    
		var petalPaths = [[
    	'M0 0',
      "C50 50 50 100 0 100",
      "C-50 100 -50 50 0 0"
    ],
    [
			'M-35 0',
      'C-25 25 25 25 35 0',
      'C50 25 25 75 0 100',
      'C-25 75 -50 25 -35 0'
    ],
    [
      'M0 0',
      'C50 40 50 70 20 100',
      'L0 85',
      'L-20 100',
      'C-50 70 -50 40 0 0'
    ],
    [
      'M0 0',
      'C50 25 50 75 0 100',
      'C-50 75 -50 25 0 0'
    ]];
    var leaf = [
      'M0 15',
      'C15 40 15 60 0 75',
      'C-15 60 -15 40 0 15'
    ];
    
    var numPetalScale = d3.scaleQuantize()
    	.range(_.range(5, 15));
    var flowerSizeScale = d3.scaleLinear()
    	.range([.05, .5]);
    var petalScale = d3.scaleOrdinal()
    	.range(_.range(4));
    var petalColors = d3.scaleOrdinal()
    	.range(['#FFB09E', '#CBF2BD', '#AFE9FF', '#FFC8F0', '#FFF2B4']);
//     	.range(['#FF7453', '#F45492', '#3DCF45', '#0D9EE4', '#FFED4F']);
    
    // blur effect taken from visualcinnamon:
    // https://www.visualcinnamon.com/2016/05/real-life-motion-effects-d3-visualization.html
    var defs = svg.append("defs");
    defs.append("filter")
      .attr("id", "motionFilter") 	//Give it a unique ID
      .attr("width", "300%")		//Increase the width of the filter region to remove blur "boundary"
      .attr("x", "-100%") 			//Make sure the center of the "width" lies in the middle of the element
      .append("feGaussianBlur")	//Append a filter technique
      .attr("in", "SourceGraphic")	//Perform the blur on the applied element
      .attr("stdDeviation", "8 8");	//Do a blur of 8 standard deviations in the horizontal and vertical direction
    
    d3.json('movies.json', function(movies) {
      movies = _.chain(movies)
      	.map(function(movie) {
        	movie.year = parseInt(movie.Year);
          movie.genres = movie.Genre.split(', ');
          movie.rating = parseFloat(movie.imdbRating);
          movie.votes = parseInt(movie.imdbVotes.replace(',', ''));

return movie;
        }).sortBy(function(movie) {
        	return -movie.year
        }).value();
      
      // number of petals depending on number of rating votes
      var minVotes = d3.min(movies, function(d) {return d.votes});
      var maxVotes = d3.max(movies, function(d) {return d.votes});
      numPetalScale.domain([minVotes, maxVotes]);
      // overall flower size from rating
      var minRating = d3.min(movies, function(d) {return d.rating});
      var maxRating = d3.max(movies, function(d) {return d.rating});
      flowerSizeScale.domain([minRating, maxRating]);
      // get the top 4 genres by count
      var topGenres = _.chain(movies)
      	.map('genres').flatten()
      	.countBy().toPairs()
      	.sortBy(1).map(0)
      	.takeRight(4)
      	.value();
      topGenres.push('Other');
      petalColors.domain(topGenres);
      // get all the years
      var allYears = _.chain(movies)
      	.map('year').uniq().value();
      
      // draw flower for each movie
      var flowers = svg.selectAll('g.flower')
        .data(_.values(movies)).enter().append('g')
        .classed('flower', true)
        .attr('transform', function(d, i) {
          var scale = flowerSizeScale(d.rating);
          var x = (i % 5) * flowerSize * 1.25;
          var y = Math.floor(i / 5) * flowerSize * 1.5;
          return 'translate(' + x + ',' + y +
            ')scale(' + scale + ')';
        }).on('click', function(d) {
          window.open('https://www.imdb.com/title/' + d.imdbID, '_new');
        });
      
      // create the data for each flower's colors
      flowers.selectAll('circle')
      	.data(function(d) {
        	// if there's only one genre, center the circle
        	var cy = d.genres.length === 1 ? 0 : -flowerSize / 5;
        	return _.map(d.genres, function(genre, i) {
            genre = _.includes(topGenres, genre) ? genre : 'Other';
            return {
              cy: cy,
              scale: flowerSizeScale(d.rating),
              angle: (360/d.genres.length) * i,
              fill: petalColors(genre)
            }
          });
        }).enter().append('circle')
      	.attr('cy', function(d) {return d.cy})
        .attr('r', flowerSize / 2)
      	.attr('fill', function(d) {return d.fill})
      	.attr('transform', function(d) {
          var x = flowerSize / 2 / d.scale;
          var y = flowerSize / 2 / d.scale;
          return 'translate(' + [x, y] +
            ')rotate(' + d.angle + ')';
        }).style("filter", "url(#motionFilter)");
      
      // draw the flower petals
      flowers.selectAll('path.petal')
        .data(function(d) {
        	var numPetals = numPetalScale(d.votes);
        	var path = petalPaths[petalScale(d.Rated)];
          return _.times(numPetals, function(i) {
            return {
              scale: flowerSizeScale(d.rating),
              angle: (360/numPetals) * i,
              path: path
            }
          });
        }).enter().append('path')
      	.classed('petal', true)
        .attr('stroke', '#444')
        .attr('stroke-width', function(d) {
        	return 2 / d.scale;
        }).attr('fill', 'none')
        .attr('d', function(d) {return d.path.join(' ')})
        .attr('transform', function(d) {
          var cx = flowerSize / 2 / d.scale;
          var cy = flowerSize / 2 / d.scale;
          return 'translate(' + [cx, cy] +
            ')rotate(' + [d.angle] + ')';
        });
      
      // draw the leaves
      flowers.selectAll('path.leaf')
      	.data(function(d) {
        	var leaves = [];
        	if (d.Seen) {
            leaves.push({
              scale: flowerSizeScale(d.rating),
              angle: -120
            });
          }
        	if (d.SeenOnRelease) {
            leaves.push({
              scale: flowerSizeScale(d.rating),
              angle: 120
            });
          }
        	return leaves;
        }).enter().append('path')
        .classed('leaf', true)
        .attr('stroke', '#555')
        .attr('stroke-width', function(d) {
        	return 2 / d.scale;
        }).attr('fill', '#4AB56D')
      	.attr('d', leaf.join(' '))
      	.attr('transform', function(d) {
        	var cx = flowerSize / 2 / d.scale;
          var cy = flowerSize / 2 / d.scale + flowerSize;
          return 'translate(' + [cx, cy] +
            ')rotate(' + [d.angle] + ')';
        });
      
      // add the years to titles
      years.selectAll('.year')
      	.data(allYears).enter().append('h1')
      	.classed('year', true)
      	.style('margin', 0)
      	.style('position', 'absolute')
      	.style('width', flowerSize + 'px')
        .style('top', function(d, i) {
        	return i * flowerSize * 1.5 + flowerSize / 2 + 'px';
        })
        .text(function(d) {return d});
      
      // finally add the titles
      titles.selectAll('.title')
      	.data(_.values(movies))
        .enter().append('div')
      	.classed('title', true)
      	.style('position', 'absolute')
      	.style('padding', '0 ' + padding + 'px')
      	.style('width', flowerSize * 1.25 - 2 * padding + 'px')
      	.style('left', function(d, i) {
        	return (i % 5) * flowerSize * 1.25 + 'px';
      	}).style('top', function(d, i) {
        	return Math.floor(i / 5) * flowerSize * 1.5 + flowerSize * 1.1 + 'px';
        }).text(function(d) {
        	return d.Title;
        });
    });
    
  </script>
</body>

https://d3js.org/d3.v4.min.js

https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.13.1/lodash.js