git.rot13.org Git - webpac2/blob - vhost/dipl/pie.html

   1 <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>