D3 Examples - Iris scatter plot

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    rect {
      fill: none;
      stroke: black;
      stroke-width: 1;
    }
  </style>
</head>
​
<body>
  <script>
​
    // On définit la taille et les marges du csv
    var margin = {top: 50, right: 50, bottom: 50, left: 50},
    w = 900 - margin.left - margin.right,
    h = 500 - margin.top - margin.bottom;
    var svg = d3.select("body").append("svg")
      .attr("width", w+margin.left + margin.right)
      .attr("height", h+margin.bottom + margin.top);
​
    // On load le csv
    d3.csv("iris.csv", function(error, data) {
      
        // On fait en sorte que les points s'affichent au bon endroit selon x
      xValue = function(d){return d.petal_width}
      xmin = d3.min(data, xValue)
      xmax = d3.max(data, xValue)
      xMap = function(d) { return margin.left + (xValue(d)-xmin)*w/(xmax-xmin);}
      
      // On fait en sorte que les points s'affichent au bon endroit selon y
      yValue = function(d){return d.petal_length}
      ymin = d3.min(data, yValue)
      ymax = d3.max(data, yValue)
      yMap = function(d) { return margin.top + (yValue(d)-ymin)*h/(ymax-ymin);}
      
      // On fait en sorte que les points s'affichent avec la bonne couleur
      cValue = function(d){return(d.species)}
      color = d3.scaleOrdinal(d3.schemeCategory10);
      
      // On affiche les deux axes et leurs titres
      xScale = d3.scaleLinear().range([0, w]).domain([xmin,xmax]);
      xAxis =  d3.axisBottom().scale(xScale);
      yScale = d3.scaleLinear().range([0, h]).domain([ymin,ymax]);
      yAxis =  d3.axisLeft().scale(yScale);
      
      svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate("+margin.left+"," + (h+margin.top) + ")")
      .call(xAxis)
      
      svg.append("text")             
      .attr("transform","translate(" + (margin.left+w/2) + " ," + (h + margin.top + margin.bottom/2 + 20) + ")")
      .style("text-anchor", "middle")
      .text("Petal width");
​
        svg.append("g")
      .attr("class", "y axis")
        .attr("transform", "translate("+margin.left+","+ margin.top +")")
        .call(yAxis)
      
      svg.append("text")             
      .attr("transform","translate(" + (margin.left/2-5) + " ," + (h/2 + margin.top) + ")rotate(-90)")
      .style("text-anchor", "middle")
      .text("Petal length");
​
      // On affiche les points
      data.forEach(function(d, i) {
        svg.selectAll(".dot").data(data).enter()
          .append("circle")
            .attr("class", "dot")
            .attr("r", 3.5)
            .attr("cx", xMap)
            .attr("cy", yMap)
            .style("fill", function(d) { return color(cValue(d));}) 
                })
      
      legend = svg.selectAll(".legend")
        .data(color.domain()).enter()
        .append("g")
            .attr("class", "legend")
            .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
        
            legend.append("rect")
            .attr("x", w - 18)
            .attr("width", 18)
            .attr("height", 18)
            .style("fill", color);
​
        legend.append("text")
            .attr("x", w - 24)
            .attr("y", 9)
            .attr("dy", ".35em")
            .style("text-anchor", "end")
            .text(function(d) { return d;})
     
    })
    
        
    
  </script>
</body>
​
    