D3 Examples - Series of 2016-2017 by genre

xxxxxxxxxx
 
<!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>
​
    