Processing Month, Day 25 - Circular Bar Charts

Posted on 2011-05-25 by Jan Vantomme
Tags: processing, tutorial

Today we'll take a dive into data visualisation. We're going to take look at how we can draw a circular bar chart. I'm not going to use a real data set for this example. An array of random numbers between 0 and 100 will do the trick for now, the focus is on drawing the chart to the screen.

The code below is the full class to draw the chart. To create a beautiful chart you need about 60 values, but it's flexible enough to draw charts with 30 bars or 100 bars.

class CircularBarChart
{
    float maxRadius;
    float minRadius;
    float values[];
    float angle;
    CircularBarChart(float[] _values)
    {
        minRadius = 50;
        maxRadius = 200;
        values = _values;
        angle = TWO_PI / float( values.length );
    }
    void renderLines()
    {
        for (int i = 0; i < values.length; i++) {
            float x1 = cos( i * angle ) * ( minRadius / 2 );
            float y1 = sin( i * angle ) * ( minRadius / 2 );
            float r = map(values[i], 0, 100, minRadius, maxRadius);
            float x2 = cos( i * angle ) * r;
            float y2 = sin( i * angle ) * r;
            line(x1, y1, x2, y2);
        }
    } 
}