scatterplot233

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 Page Template</title>
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
	<style>
.axis path,
.axis line{
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
}

.axis text {
    font-family: sans-serif;
    font-size: 11px;
}
</style>
<script type="text/javascript">
// Your beautiful D3 code will go here

svg.append("g")
      .attr("class", "x axis")
    //  .attr("transform", "translate("+ margin.left +"," + (height - margin.bottom) + ")")

.attr("transform", "translate("+ margin.left +"," + (height - margin.top - margin.bottom+5) + ")")
      .call(xAxis)
      .append("text")
      .attr("class", "label")
      .attr("x", width-60)
      .attr("y", -6)
      .style("text-anchor", "end")
      .text("Full time Earning")
      .style("fill", "black");
svg.append("g")
       .attr("transform", "translate(" + ( 				margin.left ) + ",5)")
      .attr("class", "y axis")
      .call(yAxis)
      .append("text")
      .attr("class", "label")
      .attr("transform", "rotate(-90)")
      .attr("y", 10)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("time")
      .style("fill", "black")

var legend = svg.selectAll(".legend")
      .data(csvdata)
    	.enter().append("g")
      .attr("class", "legend")
      .attr("transform", function(d, i) {  if(i <  csvdata.length - 3)     return "translate(0," + i * 20 + ")"; });

legend.append("rect")
      .attr("x", width - 18)
      .attr("width", 18)
      .attr("height", 18)
      .style("fill", function(d, i) { 	 if(i <  csvdata.length - 3)				return color[i]; 
      });

legend.append("text")
      .attr("x", width-24)
      .attr("y", 9)
      .attr("dy", ".35em")
      .style("text-anchor", "end")
      .text(function(d,i) { if(i <  csvdata.length - 3) return d.Highest_level_completed; });
  });
 
</script>
</body>
</html>

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