Scatterplot_Iris_Fregosi

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
    <script type="text/javascript" >
        var w=800;
        var h=400;
        var padding=20;
          d3.csv('iris.csv',function(data){
            var dataset=data;
            var taille=dataset.length;
            console.log(taille);
            console.log(dataset);
            var svg=d3.select("body").append("svg").attr("width",w).attr("height",h);
            var zone_totale=svg.append("rect")
              .attr('x',0)
              .attr('y',0)
              .attr("width",w)
              .attr("height",h)
              .attr("fill","#F2F3F4")
              .attr("opacity","0.9")
              .attr("stroke","#2C3E50")
              .attr("stroke-width","1");
              //A supprimer avant livraison
            var zone_accessible=svg.append("rect")
              .attr('x',padding)
              .attr('y',padding)
              .attr("width",w-2*padding)
              .attr("height",h-2*padding)
              .attr("fill","#F2F3F4")
              .attr("opacity","0.9")
              .attr("stroke","#2C3E50")
              .attr("stroke-width","1");

var xScale = d3.scaleLinear()
  						.domain([0, d3.max(dataset, function(d) { return parseFloat(d["sepal_length"]); })])
  						.range([padding, w - padding * 2]);
            var yScale = d3.scaleLinear()
  						.domain([0, d3.max(dataset, function(d) { return parseFloat(d["sepal_width"]); })])
  						.range([h - padding, padding]);

var circles=svg.selectAll("circle").data(dataset).enter().append("circle")
  			       .attr("cx", function(d) {return xScale(parseFloat(d["sepal_length"]));})
  	           .attr("cy", function(d) {return yScale(parseFloat(d["sepal_width"]));})
  			       .attr("r", 4);

});

</script>
</body>

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