D3 Examples - Iris species visualization

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Tutorial 2 D3</title>
  <style>
    .axis line, .axis path{
      fill: none;
      stroke: black;
      shape-rendering: crispEdges;
    }
​
    .axis text{
      font-family: sans-serif;
      font-size: 10px;
    }
  </style>
    <script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
    <script type="text/javascript">
        var dataset;
​
        var w = 760;
        var h = 400;
        var padding = 0;
​
        var margin = {top: 50, right: 30, bottom: 30, left: 50};
        var width = w - margin.right - margin.left;
        var height = h - margin.top - margin.bottom;
​
        var svg = d3.select("body")
                    .append("svg")
                    .attr("width", w)
                    .attr("height", h)
                    .append("g")
                    .attr("transform", "translate(" + margin.left +", " + margin.top + ")");
​
        d3.csv("iris.csv", function(data){
            dataset = data;
            console.log(dataset);
​
            var xScale = d3.scaleLinear()
                            .domain([0, d3.max(dataset, function(d){ return d.petal_length; })])
                            .range([0, width]);
            var yScale = d3.scaleLinear()
                            .domain([0, d3.max(dataset, function(d){ return d.petal_width; })])
                            .range([height, 0]);
​
            var xAxis = d3.axisBottom(xScale);
            var yAxis = d3.axisLeft(yScale);
​
            svg.append("g")
                .attr("class", "axis")
                .call(yAxis);
​
            svg.append("g")
                .attr("class", "axis")
                .attr("transform", "translate(0, " + height + ")")
                .call(xAxis);
​
            var path = svg.selectAll("path")
                .data(dataset)
                .enter()
                .append("path")
                
            path.attr("transform", function(d) { return "translate(" + xScale(d.petal_length) + ", " + yScale(d.petal_width) + ")"; })
                .attr("d", d3.symbol()
                                .type(function(d){
                                    if (d.species == 'setosa'){
                                        return d3.symbolCircle;
                                    }
                                    else if (d.species == 'versicolor') {
                                        return d3.symbolCross;
                                    }
                                    else if (d.species == 'virginica') {
                                        return d3.symbolDiamond;
                                    }
                                    else {
                                        return d3.symbolSquare;
                                    }
                                }))
                .style("fill", function(d){
                                    if (d.species == 'setosa'){
                                        return "red";
                                    }
                                    else if (d.species == 'versicolor') {
                                        return "orange"
                                    }
                                    else if (d.species == 'virginica') {
                                        return "green";
                                    }
                                    else {
                                        return "black";
                                    }
                                });
        });
    </script>
</body>
</html>
    