What method would be best to build this complex graph

Question

After 15 years doing UI development, there\'s very little I look at and think, \"how on earth do I do that.\" This is one of those times.

A graphic designer has sold

Answer 1

What about ? You can easily draw one triangle and then draw the others by just rotating the canvas 360/5 degrees.

Example: http://jsfiddle.net/Stijntjhe/dC6kX/

window.onload = function() {
    var ce = document.getElementById('ce');
    var c = ce.getContext('2d');
    c.translate(ce.offsetWidth / 2, ce.offsetHeight / 2);

    for(var pie = 0; pie < 5; pie++) {
        c.save();
        c.rotate(pie/5 * Math.PI * 2);

        c.beginPath();
        c.moveTo(0, -10);
        c.lineTo(-50, -80);
        c.lineTo(50, -80);
        c.lineTo(0, -10);
        c.lineWidth = 5;
        c.lineCap = 'square';
        c.strokeStyle = colors[pie];
        c.stroke();

        c.restore();
    } 
}

Becomes:

Cons: Maybe not cross-browser yet.