Charts, Colors, and Complements: Oh my!

Charts are the black hole of programming.

I was warned, but I wanted to tackle charts anyway. That was my first mistake.

Humans tend to understand graphical information better than text on average. But presenting information visually in a compelling way is not only not easy. It’s hard.

If I wasn’t convinced, my recent experience left me with little doubt.

The process of adding simple charts took me down a number of rabbit holes to explore… and get lost in.

This post is intended to document three major takeaways from the process:

1. Charts are hard; budget your time accordingly
2. Purely random colors can be jarring; complementary colors can be derived using the Golden Ratio
3. The math behind converting colors to / from RGB, HSV, HSL, and Hexidecimal representations is both fascinating, and something that should not need to be redefined every time.

Drawing Charts

To draw my charts in my app, I used chart.js. I’m building a React app, and there is react-chartjs-2, a chart.js package for React.

However, I ran into some strange errors trying to incorporate it into the project, so I went with the MVP approach and used the basic package.

I plan to refactor in the future to use the React version as it seems to have better support for components, but in the mean time, I got it working.

One of the charts I eventually was able to render.

I used the patternomaly package which helps to address accessibility concerns by including patterns on charts.

Randomizing Colors

At this point, I don’t have a designer helping me with the app. Nor do I have a style guide that can support dozens of colors.

With that being the case, I should have just done the easiest thing possible to randomize colors for my chart. That would have looked something like:

This would have totally worked. The problem was that I wanted something slightly more … elegant. Thus, began my descent into rabbit hole number one: color theory.

I read close a dozen articles about color theory before finding Martin Ankerl’s post How to Create Random Colors Programmatically. In it, Martin outlines why purely random colors aren’t ideal and how to achieve complements with the Golden Ratio. Here’s one of his snippets

Okay, now we’re getting places! The problem was that function hsv_to_rgb(). How did it work?

Queue rabbit hole number two.

HSV, HSL, and RGB

When it comes to computers, colors are just numbers. But which numbers we use and how they relate was a source of hours of learning this week. Starting with the the wikipedia page on HSL and HSV and branching out from there.

Now that I had a bit of background on how the different color systems related, I needed to be able to go from one to the next.

Two resources were intensely valuable on this front:

1. The Converting To RGB section on the Wikipedia page
2. RapidTables is a site that will convert these numbers for you one at a time. They also include the derivations on their page for the interested parties (like me!).

With those references, I was able to write my own hsv_to_rgb (as well as several others – see my full list at the end of the post) — and understand why it worked the way it did. At least for the most part!

Putting Complements Into practice

Now that I had a my own color conversion functions, I could write a function that took an input of the number of color/pattern combinations I needed returned and would generate complements.

Color Conversions

Going back and forth between different color types is something that comes up with some regularity. While there are libraries out there that will handle these calculations for you, I wanted to understand how they worked.

So, I wrote out functions for several common conversions. Here’s a gist with some of the common conversions I found particularly useful.

Comments

[Henrique Macedo]

Yup, charts is a pain in the... ok, so... I also used the chart.js and react-chartjs-2, but I found nivo and is just awesome! Take a look, you've a lot of components and is highly customizable.

[Mark Otway]

One of the key points to remember is that pie charts are almost always terrible ways to represent data. Doughnut charts are even worse. It's almost always better to use a bar chart.

[Stephen Charles Weiss]

Touché. I completely agree with you.

My only counter-point is that while that seems to be the consensus, I've definitely faced resistance in trying to communicate that point to clients before who had a preference for pie charts.

[Elliot Derhay]

Pie charts do seem prevalent in my workplace too. Don't use bars very often.