Processing Month, Day 25 - Circular Bar Charts

Posted by Jan Vantomme on 25 May 2011.
Tags: ,

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 floatvalues.length );
    
}
    void renderLines
()
    
{
        
for (int i 0values.lengthi++) {
            float x1 
cosangle ) * ( minRadius );
            
float y1 sinangle ) * ( minRadius );
            
float r map(values[i]0100minRadiusmaxRadius);
            
float x2 cosangle ) * r;
            
float y2 sinangle ) * r;
            
line(x1y1x2y2);
        
}
    } 

Examples

A circular bar chart with 30 bars, made with Processing

A circular bar chart with 50 bars, made with Processing

A circular bar chart with 80 bars, made with Processing

A circular bar chart with 120 bars, made with Processing

Downloads

Download the sketch for Processing Month Day 25, Circular Bar Charts.

Tweet this article