Combining two CSS3 transforms —
rotate – along with some basic (albeit long-forgotten) high-school geometry, we can visually, dynamically, visualise data.
We skew rectangular elements based on the given percentage. By rotating each element around a common point we create “slices of pie”. The parent container uses
border-radius: 50% and
overflow: hidden to create a circular mask.
While the degrees of percentage and rotation points can be calculated by hand, I’ve coded a jQuery plugin to do the mathmatical lifting for us.
Colors and percentages are dynamically generated on each chart generation.