scatterplot iris

<!DOCTYPE html encoding="utf-8">
<html>
  <head>
  <script src="https://d3js.org/d3.v3.min.js"></script>
 </head>
  <body>
	<script type="text/javascript">
		var margin = {
            top: 30,
            right: 30,
            bottom: 40,
            left: 40
        },
        width = 960 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;

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 + ")");
		
		d3.csv("iris.csv", function(data)
			{
		
				var xScale = d3.scale.linear().domain(d3.extent(data, function(d){return d.sepal_width;}))
									.range([0, width]);
				
				var yScale = d3.scale.linear().domain(d3.extent(data, function(d){return d.sepal_length;}))
									.range([height, 0]);
				
				var xAxis = d3.svg.axis().scale(xScale).orient("bottom");
				
				var yAxis = d3.svg.axis().scale(yScale).orient("left");
				
				var symbol = d3.svg.symbol().size(50);

var x = data.map(function(d){return +d.sepal_width;});
				var y = data.map(function(d){return +d.sepal_length;});

var x_mean = 0;
		        var y_mean = 0;
		        var term1 = 0;
		        var term2 = 0;

for (var i = 0; i < x.length; i++) {
		            x_mean += x[i]
		            y_mean += y[i]
		        }

// calculate mean x and y
		        x_mean /= x.length;
		        y_mean /= x.length;

var xr = 0;
		        var yr = 0;
		        for (i = 0; i < x.length; i++) {
		            xr = x[i] - x_mean;
		            yr = y[i] - y_mean;
		            term1 += xr * yr;
		            term2 += xr * xr;

}
		        var b1 = term1 / term2;
		        var b0 = y_mean - (b1 * x_mean);
		        // perform regression

var yhat = [];
		        // fit line using coeffs
		        for (i = 0; i < x.length; i++) {
		            yhat.push(b0 + (x[i] * b1));
		        }

var line = d3.svg.line()
					        .x(function(d, i) {
					            return xScale(x[i]);
					        })
					        .y(function(d, i) {
					            return yScale(yhat[i]);
					        });

svg.selectAll("path")
					.data(data)
					.enter()
					.append("path")
					.attr("transform", function(d, i){return "translate("+xScale(x[i]) +","+ yScale(y[i]) + ")";})
					.attr("d", function(d){
						if(d.species === "setosa"){
							return symbol.type("cross")();
						}else{
							if(d.species === "virginica"){
								return symbol.type("diamond")();
							}else{
								return symbol.type("square")();
							} 
						}
					})
					.attr("fill", function(d){
						
						if(d.species === "setosa"){
							return "rgb(30,144,255)";
						}else{
							if(d.species === "virginica"){
								return "rgb(255,140,0)";
							}else{
								return "rgb(105,105,105)";
							} 
						}
					});

svg.append("path")
			       .datum(data)
			       .attr("class", "line")
			       .attr("d", line)
			       .style("stroke", "rgb(176,224,230)")
			       .style("stroke-width", "3")
			       ;
					
				svg.append("g")
			        .attr("transform", "translate(0," + height + ")")
			        .call(xAxis)
			        .append("text")
			        .attr("class", "label")
			        .attr("x", width)
			        .attr("y", -6)
			        .style("text-anchor", "end")
			        .text("sepal_width");

svg.append("g")
			        .call(yAxis)
			        .append("text")
			        .attr("class", "label")
			        .attr("transform", "rotate(-90)")
			        .attr("y", 6)
			        .attr("dy", ".71em")
			        .style("text-anchor", "end")
			        .text("sepal_length")

var labels = svg.append("g").attr("transorm", "translate(1000,900)")
			    	
			var legend = svg.append("g")
      		
        
      legend.append("path")
      			.attr("transform", "translate(" + width + ", 0)")
        		.attr("d", symbol.type("cross")())
      			.style("fill", "rgb(30,144,255)")
      
      legend.append("path")
      			.attr("transform", "translate(" + width + ", 20)")
        		.attr("d", symbol.type("square")())
      			.style("fill", "rgb(105,105,105)")
			
      legend.append("path")
      			.attr("transform", "translate(" + width + ", 40)")
        		.attr("d", symbol.type("diamond")())
      			.style("fill", "rgb(255,140,0)")
			
      legend.append("text")
      			.attr("transform", "translate(" + (width -55) + ", 5)")
      			.text("setosa")
      			.style("fill", "rgb(30,144,255)")
      
      legend.append("text")
      			.attr("transform", "translate(" + (width - 80) + ", 24)")
      			.text("versicolor")
      			.style("fill", "rgb(105,105,105)")
      
      legend.append("text")
      			.attr("transform", "translate(" + (width - 75) + ", 45)")
      			.text("virginica")
      			.style("fill", "rgb(255,140,0)")
      
      var data_species = data.map(function(d){return d.species});
      console.log(data_species)

});
		
    </script>
  </body>
</html>

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