Think I'm going to have to see it used in drawing to really understand it. Looks decently complex though.

 

Finally finished it. Getting the maths right was hard haven't done it in ages. Still a bit messy though but it works..

<script>
function toFixed(x) {
  if (Math.abs(x) < 1.0) {
    var e = parseInt(x.toString().split('e-')[1]);
    if (e) {
        x *= Math.pow(10,e-1);
        x = '0.' + (new Array(e)).join('0') + x.toString().substring(2);
    }
  } else {
    var e = parseInt(x.toString().split('+')[1]);
    if (e > 20) {
        e -= 20;
        x /= Math.pow(10,e);
        x += (new Array(e+1)).join('0');
    }
  }
  return x;
}

function closest (num, arr) {
    var curr = arr[0];
    var diff = Math.abs (num - curr);
    for (var val = 0; val < arr.length; val++) {
        var newdiff = Math.abs (num - arr[val]);
        if (newdiff < diff) {
            diff = newdiff;
            curr = val;
            
        }
    }
    return curr;
}

var lookuparea= [];
var angles = [];
for(i = 1; i < 5001; i+=1){
    angle= (i*360)/10000;
    percentage=i/100;
    radseg = angle * (Math.PI / 180);
    r=1;
    area=((1/2)*r*r)*(radseg-Math.sin(radseg));

    lookuparea.push(toFixed(area));
    angles.push(angle);
}

var arc=0;
var width = 200;
var height = width;
var startx=100;
var starty=100;
var radius=90;
var piechart="";
var percentages=[10,20,20,20,20,10];
var lastpercentage=0;
var beginning = "<svg width='" + width + "' height='" + height + "'>";
var end = "</svg>";
var movex = 10;

for (i = 0; i < percentages.length; i += 1) {
    arc=0;
    percentage=percentages[i]+lastpercentage;    
    color = '#' + (0x1000000 + (Math.random()) * 0xffffff).toString(16).substr(1,6);
    if(percentage < 50 ){    
        area = Math.PI*(percentage/100);
        test = closest (area, lookuparea);        
        radseg = (angles[test] * (Math.PI / 180))/2;        
        y=Math.abs(Math.cos(radseg)*radius);
        x=Math.sin(radseg)*radius;
        y=starty-y;
        secondx=startx-x;
        x=x+startx;        
        if(i==0){
            piechart +=  "<path d=\"M" + x + "," + y;
            piechart += " L" +secondx + " , " + y;
            piechart +=  " A" + radius + " , " + radius + " 0 " + arc + " , " + " 1 " + x + " , " + y;
            piechart +=  " z\" ";
            piechart +=  " fill=\"" + color + "\" stroke=\"black\" stroke-width=\"1\" ";
            piechart +=  " fill-opacity=\"1\" stroke-linejoin=\"round\" />";
        }
        else{
            piechart +=  "<path d=\"M" + x + "," + y;
            piechart += " L" +secondx + " , " + y;
            piechart +=  " A" + radius + " , " + radius + " 0 " + arc + " , " + " 1 " + lastsecondx + " , " + lasty;
            piechart += " L" +lastx + " , " + lasty;
            piechart +=  " A" + radius + " , " + radius + " 0 " + arc + " , " + " 1 " + x + " , " + y;
            piechart +=  " z\" ";
            piechart +=  " fill=\"" + color + "\" stroke=\"black\" stroke-width=\"1\" ";
            piechart +=  " fill-opacity=\"1\" stroke-linejoin=\"round\" />";
        }
        lastpercentage=percentage;
        lastx=x;
        lastsecondx=secondx;
        lasty=y;    
    }
    else if(percentage == 100){
        if(i==0){
            piechart +=  "<circle cx="+startx+" cy="+starty+" r="+radius+" stroke=black stroke-width=1 fill="+color+" />";
        }
        else{            
            piechart +=  "<path d=\"M" + lastsecondx + "," + lasty;
            piechart += " L" +lastx + " , " + lasty;
            piechart +=  " A" + radius + " , " + radius + " 0 " + arc + " , " + " 1 " + lastsecondx + " , " + lasty;
            piechart +=  " z\" ";
            piechart +=  " fill=\"" + color + "\" stroke=\"black\" stroke-width=\"1\" ";
            piechart +=  " fill-opacity=\"1\" stroke-linejoin=\"round\" />";
            lastpercentage=percentage;
            lastx=x;
            lastsecondx=secondx;
            lasty=y;    
        }
    }
    else if(percentage > 50 ){    
        lastpercentage=percentage;
        temppercentage=100-percentage;
        area = Math.PI*temppercentage/100;
        test = closest (area, lookuparea);
        radseg = (angles[test] * (Math.PI / 180))/2;
        y=(Math.cos(radseg)*radius)+starty;
        x=(Math.sin(radseg)*radius);
        secondx = startx - x;
        x= x + startx;        
        if(i == 0 ){
            arc=1;
            piechart +=  "<path d=\"M" + x + "," + y;
            piechart += " L" +secondx + " , " + y;
            piechart +=  " A" + radius + " , " + radius + " 0 " + arc + " , " + " 1 " + x + " , " + y;
            piechart +=  " z\" ";
            piechart +=  " fill=\"" + color + "\" stroke=\"black\" stroke-width=\"1\" ";
            piechart +=  " fill-opacity=\"1\" stroke-linejoin=\"round\" />";
        }
        else{
            piechart +=  "<path d=\"M" + x + "," + y;
            piechart += " L" +secondx + " , " + y;
            piechart +=  " A" + radius + " , " + radius + " 0 " + arc + " , " + " 1 " + lastsecondx + " , " + lasty;
            piechart += " L" +lastx + " , " + lasty;
            piechart +=  " A" + radius + " , " + radius + " 0 " + arc + " , " + " 1 " + x + " , " + y;
            piechart +=  " z\" ";
            piechart +=  " fill=\"" + color + "\" stroke=\"black\" stroke-width=\"1\" ";
            piechart +=  " fill-opacity=\"1\" stroke-linejoin=\"round\" />";
        }
        lastpercentage=percentage;
        lastx=x;
        lastsecondx=secondx;
        lasty=y;
    }    
    else if(percentage == 50 && i==0){
        y=starty;
        secondx = startx - radius;
        x= radius + startx;        
        piechart += "\n";
        piechart +=  "<path d=\"M" + x + "," + y;
        piechart += " L" +secondx + " , " + y;
        piechart +=  " A" + radius + " , " + radius + " 0 " + arc + " , " + " 1 " + x + " , " + y;
        piechart +=  " z\" ";
        piechart +=  " fill=\"" + color + "\" stroke=\"black\" stroke-width=\"1\" ";
        piechart +=  " fill-opacity=\"1\" stroke-linejoin=\"round\" />";
        lastpercentage=percentage;
        lastx=x;
        lastsecondx=secondx;
        lasty=y;
    }    
    else if(percentage==50){
        secondx = startx - radius;
        x= radius + startx;
        y=starty;
        piechart +=  "<path d=\"M" + x + "," + y;
        piechart += " L" +secondx + " , " + y;
        piechart +=  " A" + radius + " , " + radius + " 0 " + arc + " , " + " 1 " + lastsecondx + " , " + lasty;
        piechart += " L" +lastx + " , " + lasty;
        piechart +=  " A" + radius + " , " + radius + " 0 " + arc + " , " + " 1 " + x + " , " + y;
        piechart +=  " z\" ";
        piechart +=  " fill=\"" + color + "\" stroke=\"black\" stroke-width=\"1\" ";
        piechart +=  " fill-opacity=\"1\" stroke-linejoin=\"round\" />";
        lastpercentage=percentage;
        lastx=x;
        lastsecondx=secondx;
        lasty=y;

    }
}
document.write(beginning + piechart + end);
</script>
<body>

Very nice

 

 

When you guys have fully conquered 2D how about tackling 3D?

 

Same problem but on a sphere not a circle.

 

I'm not sure how to even start with 3D there isn't many tutorials on 3Dsvg I did manage to find one though http://www.lutanho.net/svgvml3d/ using a platonic solids.

 

I'm not sure how to even start with 3D there isn't many tutorials on 3Dsvg I did manage to find one though http://www.lutanho.net/svgvml3d/ using a platonic solids.

 

The surface area of the bands of a sphere depend only on the height of the band* - so easier than your circle mathematically ; I proved this further up the thread. How you would go about changing this into a computer image; you are on your own - frankly I would have a better chance of translating it into Sanskrit than into code

 

*to explain further. If you have a sphere with bands which correspond to equal divisions of height - ie if you marked the axis at 1 unit intervals and extended the banding out to the surface then all the bands would have equal area.

 

To get the coordinates (rectangular) is pretty simple - imagine a unit sphere with centre at the origin and horizontal bands. nb orientated normally - ie x +ve towards you, y horizontal +ve to right, and z vertical +ve upwards). The height up and down the z axis directly corresponds to the areas of the bands

 

Work out your first z coordinate (which would be z₁=1-percentage of sphere in band one)

You then have a right triangle on the zy plane with one side equal to z₁ the hypotenuse equal to radius.

It is on the zy plane so x1=0

Pythagoras then gives you the third side. This third side is y1

You have the first point x1,y1,z1 on your circle around the sphere

Mathematically as you know the axis (z axis) and you have a point on the sphere you now have a unique circle on the sphere