Saturday, 2 November 2013

JavaScript D3.js sample code

 Here's the sample code of D3.js. Create a html file and paste the following code in the file.
--------------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
    <title>D3.js sample</title>
</head>
<body>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script>

    var circleData = [64, 48, 85, 36, 51];

    var w = 1000;
    var h = 400;

    var svg = d3.select("body").append("svg").attr({width:w, height:h});

    svg.selectAll("circle")
        .data(circleData)
        .enter()
        .append("circle")
        .transition()
        .delay(function(d, i){return i*1000})
        .duration(2000)
        .ease("bounce")
        .each("start", function() {
            d3.select(this).attr({
                fill:"green",
                r:0,
                cy:h
            });
        })
        .attr({
            cx: function(d, i) {return 150 + (i * 200);},
            cy: h/2,
            r: function(d) { return d;},
            fill:"red"
        })
        .each("end", function() {
            d3.select(this)
                .transition()
                .duration(1500)
                .attr({
                    fill:"blue",
                    r:0,
                    cy:0
            })
        });

    </script>
</body>
</html>  
-------------------------------------------------------------------------------- 

No comments:

Post a Comment