D3 Examples - Film Flowers, Single Starter Code

xxxxxxxxxx
 
<!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:400,700' rel='stylesheet' type='text/css'>
  
  <style>
    body {
      height: 100%;
      width: 500px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
    }
  </style>
</head>
​
<body>  
  <script>
    const width = 600;
    const height = 600;
   
    const generatePetal = (scale, num) => {
      return [
        `M3,3`,
        `C3,3, ${10 * scale},20, 20,25`,
        `C50,40 50,70 30,100`,
        `C30,60, 0,${80 + (20 * scale)}, 3,3`
      ]
    }
    
    const petalPaths = [
      [
        'M3,3',
        'C3,3, 10,20, 20,25',
        'C50,40 50,70 30,100',
        'C30,60, 0,80, 3,3'
      ],
      [
        'M0,0',
        'C50,40 50,70 20,100',
        'L0,85',
        'L-20,100',
        'C-50,70 -50,40 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'
      ]
    ];
    
    // instantiate scales and petal path lookup
    const sizeScale = d3.scaleLinear()
        .range([0.1, 1]);
    const numPetalsScale = d3.scaleQuantize()
        .range(_.range(5, 10));
    const pathLookup = {
      G: petalPaths[1],
      PG: petalPaths[2],
      'PG-13': petalPaths[3],
      R: petalPaths[4],
    };
    
    /*****************************************************
    ** get movie data
    ******************************************************/
    
    d3.json('movies.json', function(movies) {
      movies = _.map(movies, movie => {
        return {
          rating: ++movie.imdbRating,
          votes: parseInt(movie.imdbVotes.replace(/\,/g, '')),
          year: ++movie.Year,
          title: movie.Title,
          pg: movie.Rated,
        }
      });
            
      const sizeExtent = d3.extent(movies, d => d.rating)
      const numPetalsExtent = d3.extent(movies, d => d.votes)
      sizeScale.domain(sizeExtent)
      numPetalsScale.domain(numPetalsExtent)
​
        const body = d3.select('body')
      const groups = body.selectAll('svg')
        .data(movies).enter().append('svg')
        .attr("width", 250)
        .attr("height", 250)
      const petals = groups.selectAll('path')
        .data(d => {
          const numPetals = numPetalsScale(d.votes)
          const scale = sizeScale(d.rating)
          return _.times(numPetals, i => ({
            rotate: i / numPetals * 360,
            //      path: pathLookup[d.pg],
            path: generatePetal(scale, numPetals),
            scale: scale
          }))
        }).enter().append('path')
        .attr('d', d => d.path)
        .attr('transform', (d, i) => `
                    translate(${250/2}, ${250/2})
                    scale(${d.scale})
                    rotate(${d.rotate})
                `)
        .attr('stroke', '#000000')
        .attr('stroke-width', d => 2 / d.scale)
        .attr('fill', 'none')
    });
  </script>
</body>
​
    