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  = 800;
  19 var height = 600;
  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 function r_ca(d) {
  31         return Math.sqrt(d[2]) * 10;
  32 }
  33
  34 var pie = vis.add(pv.Wedge)
  35         .data(data)
  36         .left( width / 2 )
  37         .bottom( height / 2 )
  38         .outerRadius(function(d) radius(d))
  39         .angle(function() 2 * Math.PI / data.length)
  40         .strokeStyle("white").lineWidth(1)
  41         ;
  42
  43 var pie_ca = vis.add(pv.Wedge)
  44         .data(data)
  45         .left( width / 2 )
  46         .bottom( height / 2 )
  47         .outerRadius(function(d) r_ca(d))
  48         .angle(function() 2 * Math.PI / data.length)
  49         .strokeStyle("white").lineWidth(1)
  50         ;
  51
  52 // ca
  53 vis.add(pv.Label)
  54         .data(data)
  55         .left(  function(d)  (radius(d) - 10 ) * Math.cos(pie.midAngle()) + width  / 2)
  56         .bottom(function(d) -(radius(d) - 10 ) * Math.sin(pie.midAngle()) + height / 2)
  57         .textAlign("center").textBaseline("middle")
  58         .text(function(d) d[0] )
  59         .textStyle("white")
  60         ;
  61
  62 vis.add(pv.Label)
  63         .data(data)
  64         .left(  function(d)  (radius(d) + 5 ) * Math.cos(pie.midAngle()) + width  / 2)
  65         .bottom(function(d) -(radius(d) + 5 ) * Math.sin(pie.midAngle()) + height / 2)
  66         .textAlign("center").textBaseline("middle")
  67         .font(function(d) Math.sqrt(d[0]) + "px sans-serif")
  68         .text(function(d) d[1] )
  69         ;
  70
  71 // ttc
  72 vis.add(pv.Label)
  73         .data(data)
  74         .left(  function(d)  (r_ca(d) - 10) * Math.cos(pie.midAngle()) + width  / 2)
  75         .bottom(function(d) -(r_ca(d) - 10) * Math.sin(pie.midAngle()) + height / 2)
  76         .textAlign("center").textBaseline("middle")
  77         .text(function(d) d[2] )
  78         .textStyle("white")
  79         ;
  80
  81 // bar charts
  82
  83 vis.add(pv.Bar)
  84         .data(data)
  85         .left(0)
  86         .top(function(d) this.index * 25)
  87         .width(function(d) d[0])
  88         .height(10)
  89 .anchor("right").add(pv.Label)
  90         .textAlign("left")
  91         .text(function(d) d[0])
  92         ;
  93
  94 vis.add(pv.Bar)
  95         .data(data)
  96         .left(0)
  97         .top(function(d) this.index * 25 + 10)
  98         .width(function(d) d[2])
  99         .height(10)
 100 .anchor("right").add(pv.Label)
 101         .textAlign("left")
 102         .text(function(d) d[2])
 103         ;
 104
 105 vis.root.render();
 106 </script>
 107
 108   </body>
 109 </html>