What’s going on? I wanted to make clean, elegant, simple charts to represent data about armed conflicts in Africa. I used the Chart.js javascript library to obtain some pretty graphs, but I added functionality to the graphs and then wrote about it here so you can do it, too. This is the third in a series of three posts, and it’s about automatically assigning colors to the sections of a circle chart.
For more info on Chart.js, have a look at the first post in this three-post series.
To see how I adjusted the labels on line charts, look at the second post in the series.
In order to visualize the data represented in the ACLED app, I wanted to include some circle charts to show the proportion of violent events by type and by actor, as seen here:
Here’s the obstacle: for a given set of data over a variable number of days, I did not know precisely how many sections the pie chart would have. The number of actors or types could change. This presents an issue because Chart.js takes in the data as an array of hashes, and each section gets passed in as a hash along with its section color and highlight color. I needed a way to assign these inside of an array that might change in size.
So, I created a method to do this for me:
This method has two paramenters (arguments): the data for the chart and a list of colors to assign to each of the sections. It loops through a list of, in my app, nine colors:
On the left are the colors, and on the right of each color is another color, similar to the color on the left but lighter. This is the color that the Chart uses to highlight a section when a user hovers over it (see the hover action on “Military Forces of Somalia” above).
So how do we do this? We look through the hash and create new hashes for each data section, so we can create a data array that changes in size according to the number of sections represented in the data. If there are more sections than there are color choices, we loop back through the color array. So the colors repeat. For me, this was a sufficient solution. You may prefer to have a bigger list of colors or to auto-generate colors. I worried about getting seven shades of brown with the latter method, hence the list approach.
Here’s where the array of hashes that we just created gets passed into the javascript:
Presto! If I were to do this again, I might make the colors array a hash (with highlight colors as values and non-highlight colors as keys). Technically it’s a matter of preference. I could hear the argument that, if there were another programmer looking at my code (fancy that), a hash might more clearly express the intent of the data. Here’s the issue I take with that argument: when I see a hash, I sort of expect the key to be some kind of label for the value. This is the case in JSON, Ruby, and Javascript, which are the places that I most often live. If I make a hash with this data, the key is not a label: it’s a color. It is, if you will, a value in itself. I could, theoretically, solve this problem by naming hash block variables non_highlight_color and highlight_color instead of the traditional k and v.
Actually, that last one isn’t a terrible idea. Maybe I need to go back and do it that way.