D3 Examples - Scatterplot

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Scatterplot chart</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,300" rel="stylesheet" type="text/css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
    <style media="screen">
    body {
        font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
        color: rgb(128,128,128);
    }
    h1{
        font-weight: normal;
        font-size: 25px;
        color: #777;
    }
    circle:hover{
        opacity: .8;
    }
    .axis path,
    .axis line {
        fill: none;
        stroke: rgb(197,197,197);
        shape-rendering: crispEdges;
    }
    .axis text {
        fill: rgb(128,128,128);
    }
    .axis text {
        font-size: 12px;
    }
    .virginica {
        fill: rgb(24,188,204);
    }
    .versicolor {
        fill: rgb(161,205,59);
    }
    .setosa {
        fill: rgb(240,140,0);
    }
​
    </style>
</head>
<body>
    <script type="text/javascript">
​
    //margin convention
    var margin = {top: 10, right: 20, bottom: 60, left: 30},
    width = 960 - margin.left - margin.right,
    height = 650 - margin.top - margin.bottom;
​
​
    //create x and y scale. We'll set the domain later
    var xScale = d3.scale.linear()
    .range([ margin.bottom, width - margin.top - margin.bottom ]);
​
    var yScale = d3.scale.linear()
    .range([ height - margin.right, margin.top]);
​
    //d3 functions to format numbers https://github.com/mbostock/d3/wiki/Formatting
    var format = d3.format("s");
    var formatComma = d3.format(",");
​
​
    //create x axis
    var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("bottom")
    .ticks(8)
    .tickFormat(function(d) {
        return format(d);
    });
​
    //create y axis
    var yAxis = d3.svg.axis()
    .scale(yScale)
    .orient("left")
    .tickFormat(function(d) {
        return format(d);
    });
​
    //create svg container
    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 + ")");
​
    //load data
    d3.csv("data.csv", type, function(error, data){
​
        var trans = 15;
​
        //set scales domain
        xScale.domain(d3.extent(data, function(d) {
            return d.sepalWidth;
        }));
​
        yScale.domain(d3.extent(data, function(d) {
            return d.sepalLength;
        }));
​
        //create our circles, one for each country data
        var circles = svg.selectAll("circle")
        .data(data);
​
        //new elements
        circles
        .enter()
        .append("circle")
        .attr("cx", function(d){
            return xScale(d.sepalWidth);
        })
        .attr("cy", height)
        .attr("fill", "white");
​
        //update position to make the animation
        circles
        .sort(function(a, b) {
            return d3.ascending(+a.sepalWidth, +b.sepalWidth);
        })
        .transition()
        .delay(function(d, i){return i*2;})
        .duration(1000)
        .attr("cy", function(d) {
            return yScale(d.sepalLength);
        })
        .attr("r", 4)
        .attr("opacity", ".9")
        .attr("class", function(d){
            return d.species;
        });
​
        //create title with data
        circles
        .append("title")
        .text(function(d) {
            return d.species +": "+formatComma(d.sepalWidth)+" cm sepal width and "+formatComma(d.sepalLength)+" cm sepal length";
        });
​
        //create axis
        svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + (height) + ")")
        .call(xAxis)
        .append("text")
        .attr("y", 35)
        .attr("x",width/2-margin.left)
        .attr("dy", ".5em")
        .text("Sepal Width (cm)");
​
        svg.append("g")
        .attr("class", "y axis")
        .attr("transform", "translate(" + (margin.bottom - trans) + ",0)")
        .call(yAxis)
        .append("text")
        .attr("transform", "rotate(-90)")
        .attr("y",-55)
        .attr("x",-(height/2)-margin.top)
        .attr("dx", "1em")
        .text("Sepal Length (cm)");
​
    });
    function type(d){
        d.sepalLength = + d.sepalLength;
        d.sepalWidth = +d.sepalWidth;
        return d;
    }
​
    </script>
​
</body>
</html>
​
    