Series of 2016-2017 by genre_

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    *{
      font-family: "Gill Sans"
    }
    p, text {
      font-size: 1.5em;
            }
    svg {
     // background: #fcfcfc;
    }
    
    circle {
      stroke: #a6bddb;
      stroke-width: 0.5px;
		}
    
  </style>
</head>

<body>
  <h1>Best TV Series of 2016-2017 by genre</h1>
  <button id="decade">Split by year
  2016/2017</button>
  <button id="combine">Combine</button>
  <div id="chart"></div>
  
  <script>
    
    (function() {
      var width = 1000,
          height = 600;
      
      var svg = d3.select("#chart")
      	.append("svg")
      	.attr("height", height)
      	.attr("width", width)
      	.append("g")
      	.attr("transform", "translate(0,0)")
      
      let color = d3.scaleOrdinal()
        .domain(['drama', 'comedy', 'horror', 'thriller', 'criminal', 'melodrama', 'biography', 'detective', 'fantasy', 'documentary', 'history', 'musical', 'cartoon'])
        .range(["#fbb4ae", '#fddbc7', "#ccebc5", "#9ecae1", "#c6dbef", "#deebf7", "#fbb4ae", "#e5d8bd", "#ffffcc", "#fddaec", "#fed9a6", '#decbe4',  '#ceece4' ]);

var tooltip = d3.select("body")
      	.append("div")
      	.style('position', "absolute")
      	.style("z-index", '10')
      	.style("visibility", "hidden")
      	
      
      var radiusScale = d3.scaleSqrt().domain([5.5, 8.9]).range([2, 45])
      
      var forceXSeparate = d3.forceX(function(d) {
        if (d.years == '2016') {
            return 350
            } else {
           return 800 
            }
          }).strength(0.05)
      
      var forceXCombine = d3.forceX(width / 2).strength(0.04)
      
      var forceCollide = d3.forceCollide(function(d) {
        return radiusScale(d.rate) + 0.4 
      })
      
      //simulation forces the circles to go
      //and interact
      var simulation = d3.forceSimulation()
      	.force("x", forceXCombine)
      	.force("y", d3.forceY(height/2).strength(0.04))
      	.force("collide", forceCollide)
      
           
      d3.queue()
      	.defer(d3.csv, "series.csv")
      	.await(ready)
      
      function ready (error, datapoints) {
        
        var legend = svg.append('g')
        	.attr('class', 'legend')
        	.attr('transform', 'translate(' + 0 + ',' + 30 + ')')
        	.selectAll('g')
        	.data(color.domain())
        	.enter().append('g')
       	 .attr('fill', color)
   
        legend.append('text')
        	.attr('y', function(d, i) {
          return i * 30 + 5
        })
        	.attr('x', 20)
        	.text(function(d) {
           return d })
        
        
        var circles = svg.selectAll(".titles")
        	.data(datapoints)
        	.enter().append("circle")
        	.attr("class", "titles")
        	.attr("r", function(d) {
            return radiusScale(d.rate)
          })
        	.attr("fill", function (d) { 
            return color(d.genre)})
          
        	.on('click', function(d) {
            console.log(d)
          })
        	.on('mouseover', function(d) {
          	return tooltip.style("visibility", "visible")
            .html(d.titles)
            .style('color', '#525252')
            		})
        	.on('mousemove', function() {
          	return tooltip.style("top", (event.pageY-10) + "px").style("left", (event.pageX + 10) + "px")
          })
        	.on("mouseout", function() {
            return tooltip.style("visibility", "hidden")
          })
        	.attr("data-legend",function(d) { return d.genre})
            
        
        d3.select('#decade').on('click', function() {
          simulation
          	.force("x", forceXSeparate)
          	.alphaTarget(0.4)
          	.restart()
        })
        
        d3.select('#combine').on('click', function() {
          simulation
          	.force("x", forceXCombine)
          	.alphaTarget(0.4)
          	.restart()
          })
        
        simulation.nodes(datapoints)
        	.on('tick', ticked)
        
        function ticked() {
          circles
          	.attr("cx", function(d) {
            return d.x
          })
          	.attr("cy", function(d) {
            return d.y
          })
   
 }      
      }
    })();
  </script>
</body>

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