Built with blockbuilder.org
xxxxxxxxxx<html lang="en"> <head> <meta charset="utf-8"> <title>Scatterplot of Iris</title> <script src="https://d3js.org/d3.v4.min.js"></script> <style type="text/css"> .axis path, .axis line{ fill: none; stroke: black; shape-rendering: crispEdges; } .axis text { font-family : sans-serif; font-size: 10px; } .label { font-family: sans-serif; font-size: 11px; } .title { font-family : sans-serif; font-size: 25px; text-anchor: middle; } .line { stroke: black; fill: none; stroke-width: 1; stroke-dasharray: 10,5; } #tooltip { font-family: sans-serif; font-size: 11px; font-weight: bold; } </style> </head> <body> <script type="text/javascript"> // Width and height definition var w = 760; var h = 400; var symbolsize = 40; // Margin setup var margin = {top: 50, right: 30, bottom: 50, left: 100}, width = w - margin.left - margin.right, height = h - margin.top - margin.bottom; // Basic SVG canvas 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 + ")"); // g var g = svg.append("g"); // Loading data var iris; d3.csv("iris.csv", function(data) { iris = data; // Scale definition var x = d3.scaleLinear() .domain([0,d3.max(iris,function(d,i) {return d.petal_length; })]) .range([0, width]); var y = d3.scaleLinear() .domain([0,d3.max(iris, function(d) {return d.petal_width; })]) .range([height,0]); // Line definition for regression var line = d3.line() .x(function(d) { return x(d.x);}) .y(function(d) {return y(d.yreg);}); // Regression function function create_regression(d){ var x_mean = 0; var y_mean = 0; var term1 = 0; var term2 = 0; var xr = 0; var yr= 0; // Compute mean for (var i =0; i< d.length;i++){ x_mean += parseFloat(d[i].petal_length); y_mean += parseFloat(d[i].petal_width); } x_mean /= d.length; y_mean /= d.length; // Compute coefficients for (i=0; i<d.length;i++){ xr = parseFloat(d[i].petal_length) - x_mean; yr = parseFloat(d[i].petal_width) - y_mean; term1 += xr*yr; term2 += xr*xr; } var b1 = term1/term2; var b0 = y_mean - (b1*x_mean); // Push regression coordinates var yreg = []; for (i=0;i<d.length;i++){ yreg.push(b0 + (parseFloat(d[i].petal_length)*b1)); } // Creates Data for regression line var regdata = []; for (i=0;i<d.length;i++){ regdata.push({ "yreg":yreg[i], "x":parseFloat(d[i].petal_length) }) } return (regdata) } // Regression creation var reg = create_regression(iris); svg.append("path") .datum(reg) .attr("class","line") .attr("d",line); // Generate axis var xAxis = d3.axisBottom(x); var yAxis = d3.axisLeft(y); svg.append("g") .attr("class","axis") .call(yAxis); svg.append("g") .attr("class","axis") .attr("transform", function(){return "translate(0,"+height+")";}) .call(xAxis); // Axis names svg.append("text") .attr("class","label") .attr("transform","rotate(-90)") .attr("x","-55") .attr("y","15") .text("Petal width"); svg.append("text") .attr("class","label") .attr("x",width-50) .attr("y",height-5) .text("Petal length"); // Scatterplot title svg.append("text") .attr("class","title") .attr("x",(w-margin.left)/2) .attr("y",-margin.top/2) .text("Iris dataset Scatterplot"); // Legend var LegendSymbolSize = 120; var GenLegendStar = d3.symbol() .type(d3.symbolStar) .size(LegendSymbolSize); var GenLegendCross = d3.symbol() .type(d3.symbolCross) .size(LegendSymbolSize); var GenLegendCircle = d3.symbol() .type(d3.symbolCircle) .size(LegendSymbolSize); svg.append("rect") .attr("x","50") .attr("y","30") .attr("width","200") .attr("height","100") .style("fill","white") .style("stroke-width","1") .style("stroke","black"); var legend = svg.append("g") .attr("class","legend-symbol"); legend.append("path") .attr("d",GenLegendCircle()) .attr("transform","translate(70,50)") .style("fill","blue"); legend.append("path") .attr("d",GenLegendStar()) .attr("transform","translate(70,80)") .style("fill","green"); legend.append("path") .attr("d",GenLegendCross()) .attr("transform","translate(70,110)") .style("fill","red"); legend.append("text") .attr("transform","translate(85,55)") .text("Setosa"); legend.append("text") .attr("transform","translate(85,85)") .text("Versicolor"); legend.append("text") .attr("transform","translate(85,115)") .text("Virginica"); // Symbol Generation /* Star, green : versicolor Circle, blue : setosa Cross, red : virginica*/ var GenerateStar = d3.symbol() .type(d3.symbolStar) .size(symbolsize); var GenerateCircle = d3.symbol() .type(d3.symbolCircle) .size(symbolsize); var GenerateCross= d3.symbol() .type(d3.symbolCross) .size(symbolsize); // Symbol Creation for each value svg.append("g") .selectAll("path") .data(iris) .enter() .append("path") .attr("d", function(d) { if (d.species == "setosa") {return GenerateCircle(); } else if (d.species == "versicolor") {return GenerateStar();} else {return GenerateCross();} }) .attr("transform",function(d) {return "translate(" + x(d.petal_length) +","+y(d.petal_width)+")" ;}) .style("fill", function(d) { if (d.species == "setosa") {return "blue"; } else if (d.species == "versicolor") {return "green";} else {return "red";} }) .on("mouseover",function(d) { d3.select(this).transition().duration(500).style("fill","black"); svg.selectAll("#tooltip").data([d]).enter().append("text") .attr("id","tooltip") .text(function(d){return "(" + d.petal_length +"," + d.petal_width + ") " +d.species ; }) .attr("x",function(d) {return x(d.petal_length);}) .attr("y",function(d) {return y(d.petal_width)-5;}); }) .on("mouseout",function(d){ d3.select(this).transition().duration(250).style("fill",function(d) { if (d.species == "setosa") {return "blue"; } else if (d.species == "versicolor") {return "green";} else {return "red";}}); d3.select("#tooltip").remove(); }) }); </script> </body></html> https://d3js.org/d3.v4.min.js