vhost/dipl/pie.html

<html>
  <head>
    <title>citirani pie</title>
    <script type="text/javascript" src="vis.stanford.edu/protovis/protovis.js"></script>
    <script type="text/javascript" src="data.cgi"></script>
    <style type="text/css">
      body { max-width: 7in; }
    </style>
  </head>
  <body>

<a href="http://vis.stanford.edu/protovis/api/">Protovis</a>

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

//var data = [ 282, 189, 174, 163, 152, 140, 138, 130, 117, 116, 116, 94, 76, 44, 38 ];

var width  = 600;
var height = 400;

var vis = new pv.Panel()
        .width(width)
        .height(height)
        ;

function radius(d) {
        return Math.sqrt(d[0]) * 10;
}

var pie = vis.add(pv.Wedge)
        .data(data)
        .left( width / 2 )
        .bottom( height / 2 )
        .outerRadius(function(d) radius(d))
        .angle(function() 2 * Math.PI / data.length)
        ;

// ca
vis.add(pv.Label)
        .data(data)
        .left(  function(d)  radius(d) * Math.cos(pie.midAngle()) + width  / 2)
        .bottom(function(d) -radius(d) * Math.sin(pie.midAngle()) + height / 2)
        .textAlign("center").textBaseline("middle")
        .text(function(d) d[1] )
        ;

// ttc
vis.add(pv.Label)
        .data(data)
        .left(  function()  50 * Math.cos(pie.midAngle()) + width  / 2)
        .bottom(function() -50 * Math.sin(pie.midAngle()) + height / 2)
        .textAlign("center").textBaseline("middle")
        .text(function(d) d[0] )
        ;
vis.root.render();
</script>

  </body>
</html>
1	dpavlin	1229	<html>
2			<head>
3			<title>citirani pie</title>
4			<script type="text/javascript" src="vis.stanford.edu/protovis/protovis.js"></script>
5			<script type="text/javascript" src="data.cgi"></script>
6			<style type="text/css">
7			body { max-width: 7in; }
8			</style>
9			</head>
10			<body>
11
12			<a href="http://vis.stanford.edu/protovis/api/">Protovis</a>
13
14			<script type="text/javascript+protovis">
15
16			//var data = [ 282, 189, 174, 163, 152, 140, 138, 130, 117, 116, 116, 94, 76, 44, 38 ];
17
18			var width = 600;
19			var height = 400;
20
21			var vis = new pv.Panel()
22			.width(width)
23			.height(height)
24			;
25
26			function radius(d) {
27			return Math.sqrt(d[0]) * 10;
28			}
29
30			var pie = vis.add(pv.Wedge)
31			.data(data)
32			.left( width / 2 )
33			.bottom( height / 2 )
34			.outerRadius(function(d) radius(d))
35			.angle(function() 2 * Math.PI / data.length)
36			;
37
38			// ca
39			vis.add(pv.Label)
40			.data(data)
41			.left( function(d) radius(d) * Math.cos(pie.midAngle()) + width / 2)
42			.bottom(function(d) -radius(d) * Math.sin(pie.midAngle()) + height / 2)
43			.textAlign("center").textBaseline("middle")
44			.text(function(d) d[1] )
45			;
46
47			// ttc
48			vis.add(pv.Label)
49			.data(data)
50			.left( function() 50 * Math.cos(pie.midAngle()) + width / 2)
51			.bottom(function() -50 * Math.sin(pie.midAngle()) + height / 2)
52			.textAlign("center").textBaseline("middle")
53			.text(function(d) d[0] )
54			;
55			vis.root.render();
56			</script>
57
58			</body>
59			</html>