All examples By author By category About

RaphAllier

Full window Github gist

Iris Dataset Scatterplot

<!DOCTYPE html>
<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