D3 Examples - iris scatter plot

xxxxxxxxxx
 
<!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>
    
    var width = 960;
    var height = 500;
    var paddingLeft = 30;
    var paddingBottom = 30;
    var paddingRight = 30;
    var paddingTop = 30;
    
    var dot_shapes = {
      "setosa":d3.symbolStar,
      "versicolor":d3.symbolTriangle,
      "virginica":d3.symbolCross,
    };
      
    var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height);
        
    d3.csv("iris.csv", function(data) {
      data.forEach(function(d) {
        d.sepal_length = +d.sepal_length;
        d.petal_length = +d.petal_length;
        d.petal_width = +d.petal_width;
        d.species = d.species;
      });
    
      var xVar = "sepal_length";
      var yVar = "petal_length";
      
      var xMax = d3.max(data, function(d){return d[xVar]});
      var yMax = d3.max(data, function(d){return d[yVar]});
​
      var xScale = d3.scaleLinear()
                    .range([0, width - paddingRight - paddingLeft])
                    .domain([0, xMax]);
      
      var yScale = d3.scaleLinear()
                    .range([0, height - paddingTop - paddingBottom])
                    .domain([yMax,0]);
​
      var xAxis = d3.axisBottom()
                    .scale(xScale)
​
      var yAxis = d3.axisLeft()
                    .scale(yScale)
​
      svg.append("g")
        .attr("class", "axis")
        .attr("transform", "translate(" + paddingLeft + "," + (height - paddingBottom) +")")
        .call(xAxis);
​
      svg.append("g")
        .attr("class", "axis")
        .attr("transform", "translate("+ paddingLeft + "," + paddingTop +")")
        .call(yAxis);
      
      svg.selectAll(".dot")
        .data(data)
        .enter().append("path")
        .attr("d", d3.symbol().type(function(d){return dot_shapes[d.species];}))
        .attr("class", "dot")
        .attr("transform", function(d){return "translate("+(paddingLeft+xScale(d[xVar]))+","+(paddingTop+yScale(d[yVar]))+")";})
​
        data.forEach(function(d){console.log(xScale(d[xVar]));});
      
    });
    
    
  </script>
</body>
​
    