Proportional circles

Search interest in Oscar nominated movies, 2019 in the US.

Built with blockbuilder.org
Partly from Peter Cook's D3 in Depth tutorials.
Data from Google Trends, in the 7 days leading up to the Oscars 2019, in the US.

<!DOCTYPE html>
<head>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body {
      margin:10;
      font-family:Arial;
      font-size:12px;
      text-align:center;
    }
    circle{
      fill:turquoise;
      opacity:0.75
    }
  </style>
</head>

<body>
  
  <svg width="1000" height="1000">
    <g transform="translate(70, 200)">
      <circle r="40" />
      <circle r="40" cx="120" />
      <circle r="40" cx="240" />
      <circle r="40" cx="360" />
      <circle r="40" cx="480" />
      <circle r="40" cx="600" />
      <circle r="40" cx="720" />
      <circle r="40" cx="840" />
    </g>
    <g transform="translate(70, 200)">
      <text />
      <text />
      <text />
      <text />
      <text />
      <text />
      <text />
      <text />
    </g>
  </svg>
  
  <script>
    
    d3.csv("oscarmovies.csv", (error, data) => {
      if (error) throw error;
      
      
    })
    	
    
    var oscarmovies = [
      {
        "movie": "A Star Is Born",
        "searchindex": 53.08
      },
      {
        "movie": "Black Panther",
        "searchindex": 21.17
      },
      {
        "movie": "BlackkKlansman",
        "searchindex": 19.35
      },
      {
        "movie": "Bohemian Rhapsody",
        "searchindex": 100
      },
      {
        "movie": "Green Book",
        "searchindex": 56.84
      },
      {
        "movie": "Roma",
        "searchindex": 39.63
      },
      {
        "movie": "The Favourite",
        "searchindex": 29.29
      },
      {
        "movie": "Vice",
        "searchindex": 25.56
      }
    ];

d3.selectAll('circle')
      .data(oscarmovies)
      .attr('r',function(d) {
        return d.searchindex;
    	})
    	.on('mouseover', function(d, i) {
        d3.select(this)
          .style('opacity', '1');
       })
    	.on('mouseout', function(d, i) {
        d3.select(this)
          .style('opacity', '0.75');
       })
    
    d3.selectAll('text')
    	.data(oscarmovies)
    	.attr('x', function(d,i) {
      	return i * 120;
    	})
    	.attr('y', function(d,i) {
      	return 125
    	})
    	.text(function(d) {
      	return d.movie
    	})
    
  </script>
</body>

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