year wise

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>

.tooltip {
  position: absolute;
  width: 150px;
  height: 60px;
  background: #f2f2f2;
  pointer-events: none;
}
</style>
  
<body>
  <h2>Scatterplot</h2>
  <div><svg id="chart" width="800" height="600"></svg></div>

var g = svg.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
//var colorScale = d3.scaleOrdinal(d3.schemeCategory20);
// add the tooltip area to the webpage
var tooltip = d3.select("body").append("div")
    .attr("class", "tooltip")
    .style("opacity", 0);

// load data
d3.csv("novel-adaptations.csv", function (d) {
  // change string (from CSV) into number format
  d["release_date"] = +d["release_date"];
  d["vote_average"] = +d["vote_average"];
  d["budget"] = +d["budget"];
  d["revenue"] = +d["revenue"];
  return d;
}, function(error, data) {

if (error) throw error;
   
// setup x 
var xValue = function(d) { return d["release_date"];}, // data -> value
    xScale = d3.scaleLinear().range([0, width]),     // value -> display
    xMap = function(d) { return xScale(xValue(d));}; // data -> display

// setup y
var yValue = function(d) { return d["vote_average"];}, // data -> value
    yScale = d3.scaleLinear().range([height, 0]),    // value -> display
    yMap = function(d) { return yScale(yValue(d));}; // data -> display

// don't want dots overlapping axis, so add in buffer to data domain
  xScale.domain([d3.min(data, xValue)-1, d3.max(data, xValue)+1]);
  yScale.domain([0, d3.max(data, yValue)+1]);

// x-axis
  g.append("g")
 		.attr("class", "axis x-axis")
  	.attr("transform", "translate(0," + height + ")") // move axis to bottom of chart
   	.call(d3.axisBottom(xScale));
  
  // x-axis label
  g.append("text")
  	.attr("class", "label")
   	.attr("x", width/2)
    .attr("y", height+(margin.bottom*0.75))
    .style("text-anchor", "middle")
    .text("Year of Release");

// y-axis
  g.append("g")
 		.attr("class", "axis y-axis")
 		.call(d3.axisLeft(yScale));
  
  // y-axis label
  g.append("text") 
    .attr("class", "label")
    .attr("x", 0-(height/2))
    .attr("y", 0-(margin.left*0.55))
    .attr("transform", "rotate(-90)") // rotate text -90 degrees from x, y
    .style("text-anchor", "middle")
    .text("IMDb Rating");

// draw dots
  g.selectAll(".dot")
      .data(data)
      
    .enter().append("circle")
      .attr("class", "dot")
      .attr("r", function (d) {
        if (d.revenue > d.budget) {return d = 5.5}
       else if (d.revenue < d.budget){return d = 3.5}
    })
      .attr("cx", xMap)
      .attr("cy", yMap)
      .style("fill", function (d) {
 		      
		      if (d["Novel Adaptation"] === 'Yes') {return 'blue';}
 		      else {return 'gray';};
		      
	    })//tried to use colorScale but was unable to generate a common color for all the conferences

// tooltip
      .on("mouseover", function(d) {   
      tooltip.transition()
               .duration(200)         // ms delay before appearing
               .style("opacity", .8); // tooltip appears on mouseover
          tooltip.html('Name:' + d.title + "<br/> " + 'Year:' + d.release_date + "<br/> " + 'IMDb rating:' + d.vote_average + "<br/>" + 'Revenue:' + d.revenue + "<br/>" + 'Budget:' + d.budget)
               .style("left", (d3.event.pageX + 10) + "px")  // specify x location
               .style("top", (d3.event.pageY - 28) + "px");  // specify y location
	             
      })

.on("mouseout", function(d) {
          tooltip.transition()
               .duration(500)
               .style("opacity", 0) // disappear on mouseout
               
      });
 });

</script>
</body>
</html>

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

https://d3js.org/d3-scale-chromatic.v1.min.js