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

I think if you have to do it in JS/CSS and Flash/HTML5 isn't an option, take a look at a handy trick of using triangles in CSS:

http://www.howtocreate.co.uk/tutorials/css/slopes

And an alternative reference:

http://css-tricks.com/snippets/css/css-triangle/

By setting the border thickness's of boxes cleverly, you can get any shape triangle you want, at any rotation. It's tricky to figure out, and I don't have code handy but it is possible.

You could nest triangles within each other (looking the sample picture I note it is composed entirely of triangles, the inner triangle is an inverted nest of the outer triangle) so I think it's perfectly possible, although that maths might get a bit tricky in regards to positioning and if you need the chart to be flexible (arbitrary numbers of triangles and sizes).