Protovis Examples: Bursting Circular Lines

Saturday, May 21, 2011

Bursting Circular Lines

<html> 

    <head> 

    <script type="text/javascript"  src="protovis-r3.2.js"></script> 

    </head> 

    <body> 

    <script type="text/javascript+protovis">  

    var inner_radius = 120, 

        centerx = 200, 

        centery = 200; 

    var data = pv.range(0,12,1); 

    var vis = new pv.Panel() 

                .fillStyle("yellow") 

                .width(400) 

                .height(400); 

    vis.add(pv.Wedge) 

        .left(centerx) 

        .bottom(centery) 

        .outerRadius(150) 

        .innerRadius(inner_radius) 

        .fillStyle("none") 

        .strokeStyle("black") 

        .lineWidth(0.5) 

        .angle(Math.PI * 2); 

    vis.add(pv.Dot) 

        .data(data) 

        .shape("tick") 

        .left(function(d) centerx) 

        .angle(function(d) (2 * Math.PI/12) * (this.index+1)) 

        .bottom(centery) 

        .fillStyle("none") 

        .strokeStyle("black") 

        .lineWidth(1) 

        .size(50);     

    vis.render(); 

    </script> 

    </body> 

</html>

Protovis Examples

Saturday, May 21, 2011

Bursting Circular Lines

No comments:

Post a Comment