Scatter Plot

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style type = "text/css">
    svg{
      border: 1px solid rgb(93,39,200)
    }
    circle {
  fill-opacity: 0.8;
}
  </style>
</head>

<body>
  <script type="text/javascript">
		var xdim ="investmen_Loan",
    ydim = "investment_approved",
    colordim = "Sector";
    
    var margin = { top: 15, right: 12, bottom: 33, left: 30 },
    width = 500 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;
    
    
  // create quantitative linear scales
    var xscale = d3.scaleLinear()
      .range([0, width]);

var yscale = d3.scaleLinear()
      .range([height, 0]);
	  
    
    var color = d3.scaleOrdinal()
  .range([
    "#71dfbd",
    "#db7683",
    "#b1ce76",
    "#869eda",
    "#bda15a",
    "#69bece",
    "#dc8b5e",
    "#68a375",
    "#cd9a8c",
    "#d4daa8"
      ]);

d3.csv("Renwable_clean.csv", function(error, data) {
  if (error) console.log(error);
    console.log(data)

// coerce the data to a number
  		data.forEach(function(d) {
    	d[xdim] = +d[xdim];
    	d[ydim] = +d[ydim];
      d["year"] = +d["year"];
  	});
      
      // dynamically setting scale extents
  xscale.domain(
    [0, d3.max(data, function(d) { return d[xdim]; })]
  );

yscale.domain(
    [0, d3.max(data, function(d) { return d[ydim]; })]
  );

var xAxis = d3.axisBottom()
    .scale(xscale);

var yAxis = d3.axisLeft()
    .scale(yscale);
    
    
    
    var svg = d3.select("body").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
    .append("g")
      .attr("transform", "translate(" + [margin.left, margin.top] + ")");
    
    svg.append("g")
    .attr("class", "y--axis")
    .call(yAxis);
    
    svg.append("g")
    .attr("class", "x--axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);

//   });

//       // join the data to some circle elements
//     var update = svg.selectAll("circle")
//     .data(initial, function(d) { return d; })
//     .enter().append("circle")
//     .attr("fill", function(d) { return color(d[colordim]); })
//     .attr("cx", function(d) { return xscale(d[xdim]); })
//     .attr("cy", function(d) { return yscale(d[ydim]); })
//     .attr("r", 5.5)
//     .on("mouseover", function(d) {
//       console.log(d);
//     });
    
//     update
//     	.exit()
//     	.remove()

//    subset = data.filter(function(d) {
//        if( d["year"] == 5 ||
//        	d["year"]== 6 ||
//        	d["year"]== 7)
//        { 
//             return d;
//         } 
//   });
    
//     update = svg.selectAll('circle')
//     	.data(subset,function(d) { return d; })
//     	.enter().append("circle")
//     	.attr("fill", function(d) { return color(d[colordim]); })
//     	.attr("cx", function(d) { return xscale(d[xdim]); })
//     	.attr("cy", function(d) { return yscale(d[ydim]); })
//     	.attr("r", 5.5)
    
//     update
//     	.exit()
//     	.remove()

//     update
//     	.transition()
//     	.delay(100)
//     	.duration(750)
//     	.attr("cx", function(d) { return xscale(d[xdim]); })
//     	.attr("cy", function(d) { return yscale(d[ydim]); })
    
//     subset = data.filter(function(d) {
//     return d.year == 8||
//       		d.year == 9 ||
//           d.year == 10; 
//         });
    
//     update = svg.selectAll('circle')
//     	.data(subset,function(d) { return d; })
//     	.enter().append("circle")
//     	.attr("fill", function(d) { return color(d[colordim]); })
//     	.attr("cx", function(d) { return xscale(d[xdim]); })
//     	.attr("cy", function(d) { return yscale(d[ydim]); })
//     	.attr("r", 5.5)
    
//     update
//     	.exit()
//     	.remove()
    
//     update
//     	.transition()
//     	.delay(100)
//     	.duration(750)
//     	.attr("cx", function(d) { return xscale(d[xdim]); })
//     	.attr("cy", function(d) { return yscale(d[ydim]); })
    
    
//     subset = data.filter(function(d) {
//     return d.year == 11||
//       		d.year == 12||
//           d.year == 13; 
//         });
    
//     update = svg.selectAll('circle')
//     	.data(subset,function(d) { return d;})
//     	.enter().append("circle")
//     	.attr("fill", function(d) { return color(d[colordim]); })
//     	.attr("cx", function(d) { return xscale(d[xdim]); })
//     	.attr("cy", function(d) { return yscale(d[ydim]); })
//     	.attr("r", 5.5)
    
//     update
//     	.exit()
//     	.remove()
    
//     update
//     	.transition()
//     	.delay(100)
//     	.duration(750)
//     	.attr("cx", function(d) { return xscale(d[xdim]); })
//     	.attr("cy", function(d) { return yscale(d[ydim]); })

update(subset);
    
});

</script>
</body>

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