D3 Examples - animation-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: .7;
    }
    circle{
        mix-blend-mode:multiply;
    }
    .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;
    }
    .highlight {
        fill: rgb(55,169,64);
    }
    .normal {
        fill: rgb(168,215,163);
    }
​
​
    </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 timeScale = d3.time.scale()
    .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(",");
    var parseDate = d3.time.format("%I:%M");
​
​
    //create x axis
    var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("bottom")
    .ticks(8)
    .tickFormat(function(d) {
        return format(d);
    });
    //create x axis-time
    var xTimeAxis = d3.svg.axis()
    .scale(timeScale)
    .orient("bottom")
    .ticks(8)
    .tickFormat(function(d) {
        return parseDate(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 = d3.dsv(",", "text/csv;charset=gb2312");
    d3.csv("bubbles.csv", type, function(error, data){
        // debugger;
​
        var trans = 15;
        // Get Regression Data
        // var xSeries = []
        // var ySeries = []
        data
        // .filter(function(d) { return d.tube == 'beijing' })
        // .forEach(function(d) {
        //     xSeries.push(+d.sepalWidth)
        //     ySeries.push(+d.sepalLength)
        // });
​
        // var leastSquaresCoeff = leastSquares(xSeries, ySeries);
        // var x1 = xScale(0),
        //     y1 = leastSquaresCoeff[0] * x1 + leastSquaresCoeff[1],
        //     x2 = xScale(d3.max(data, function(d) { return d.sepalWidth; })),
        //     y2 = leastSquaresCoeff[0] * x2 + leastSquaresCoeff[1];
        // var trendData = [x1, y1, x2, y2];
        // console.log(trendData);
​
        //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")
        // .filter(function(d) { return d.tube == 'beijing' })
        .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
            function(d){
                return d.volume*4;
            }
        )
        .attr("opacity", "1.0")
        .attr("class", function(d){
            return d.cityType;
        });
​
        //create title with data
        circles
        .append("title")
        .text(function(d) {
            return d.cityType +": "+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");
​
        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");
​
        // Add regression line
        // var regression = svg.selectAll(".trend")
        // regression.data([trendData]).enter()
        // .append("line")
        // .attr("class", "trend")
        // .attr("x1", function(d) { return xScale(d[0]) })
        // .attr("y1", function(d) { return yScale(d[1]) })
        // .attr("x2", function(d) { return xScale(d[2]) })
        // .attr("y2", function(d) { return yScale(d[3]) })
        // .attr('stroke', "rgb(255,116,0)")
        // .attr('stroke-width','2px')
​
    });
    function leastSquares(xSeries, ySeries) {
      var reduceSumFunc = function(prev, cur) { return prev + cur; };
      
      var xBar = xSeries.reduce(reduceSumFunc) * 1.0 / xSeries.length;
      var yBar = ySeries.reduce(reduceSumFunc) * 1.0 / ySeries.length;
​
      var ssXX = xSeries.map(function(d) { return Math.pow(d - xBar, 2); })
        .reduce(reduceSumFunc);
      
      var ssYY = ySeries.map(function(d) { return Math.pow(d - yBar, 2); })
        .reduce(reduceSumFunc);
        
      var ssXY = xSeries.map(function(d, i) { return (d - xBar) * (ySeries[i] - yBar); })
        .reduce(reduceSumFunc);
        
      var slope = ssXY / ssXX;
      var intercept = yBar - (xBar * slope);
      var rSquare = Math.pow(ssXY, 2) / (ssXX * ssYY);
      
      return [slope, intercept, rSquare];
    }
    
    function type(d){
        d.sepalWidth = +d.level;
        d.sepalLength = +d.volume;
        d.volume = +d.rent;
        // d.sleep = parseDate.parse(d.sleep);
        // d.name = +d["fulname"];
        d.cityType = d.cityClassify;
        return d;
    }
​
    </script>
​
</body>
</html>
​
    