Built with blockbuilder.org
xxxxxxxxxx<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