Merge branch 'tab'

[webpac2] / vhost / dipl / pie.html

diff --git a/vhost/dipl/pie.html b/vhost/dipl/pie.html
index ca3d32c..9d58a17 100644 (file)
--- a/vhost/dipl/pie.html
+++ b/vhost/dipl/pie.html
@@ -15,8 +15,8 @@
 
 //var data = [ 282, 189, 174, 163, 152, 140, 138, 130, 117, 116, 116, 94, 76, 44, 38 ];
 
-var width  = 600;
-var height = 400;
+var width  = 800;
+var height = 600;
 
 var vis = new pv.Panel()
        .width(width)
@@ -27,31 +27,81 @@ function radius(d) {
        return Math.sqrt(d[0]) * 10;
 }
 
+function r_ca(d) {
+       return Math.sqrt(d[2]) * 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)
+       .strokeStyle("white").lineWidth(1)
+       ;
+
+var pie_ca = vis.add(pv.Wedge)
+       .data(data)
+       .left( width / 2 )
+       .bottom( height / 2 )
+       .outerRadius(function(d) r_ca(d))
+       .angle(function() 2 * Math.PI / data.length)
+       .strokeStyle("white").lineWidth(1)
        ;
 
 // 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)
+       .left(  function(d)  (radius(d) - 10 ) * Math.cos(pie.midAngle()) + width  / 2)
+       .bottom(function(d) -(radius(d) - 10 ) * Math.sin(pie.midAngle()) + height / 2)
        .textAlign("center").textBaseline("middle")
+       .text(function(d) d[0] )
+       .textStyle("white")
+       ;
+
+vis.add(pv.Label)
+       .data(data)
+       .left(  function(d)  (radius(d) + 5 ) * Math.cos(pie.midAngle()) + width  / 2)
+       .bottom(function(d) -(radius(d) + 5 ) * Math.sin(pie.midAngle()) + height / 2)
+       .textAlign("center").textBaseline("middle")
+       .font(function(d) Math.sqrt(d[0]) + "px sans-serif")
        .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)
+       .left(  function(d)  (r_ca(d) - 10) * Math.cos(pie.midAngle()) + width  / 2)
+       .bottom(function(d) -(r_ca(d) - 10) * Math.sin(pie.midAngle()) + height / 2)
        .textAlign("center").textBaseline("middle")
-       .text(function(d) d[0] )
+       .text(function(d) d[2] )
+       .textStyle("white")
        ;
+
+// bar charts
+
+vis.add(pv.Bar)
+       .data(data)
+       .left(0)
+       .top(function(d) this.index * 25)
+       .width(function(d) d[0])
+       .height(10)
+.anchor("right").add(pv.Label)
+       .textAlign("left")
+       .text(function(d) d[0])
+       ;
+
+vis.add(pv.Bar)
+       .data(data)
+       .left(0)
+       .top(function(d) this.index * 25 + 10)
+       .width(function(d) d[2])
+       .height(10)
+.anchor("right").add(pv.Label)
+       .textAlign("left")
+       .text(function(d) d[2])
+       ;
+
 vis.root.render();
 </script>