2018-12-20

|~10 min read

|1974 words

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:

- Charts are hard; budget your time accordingly
- Purely random colors can be jarring; complementary colors can be derived using the Golden Ratio
- 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.

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.

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:

```
const red = Math.rand() * 255
const green = Math.rand() * 255
const blue = Math.rand() * 255
return [red, green, blue]
```

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:

```
# Credit: Martin Ankerl: How to Generate Random Colors Programmatically
# Source: https://martin.ankerl.com/2009/12/09/how-to-create-random-colors-programmatically/
# use golden ratio
golden_ratio_conjugate = 0.618033988749895
h = rand # use random start value
gen_html {
h += golden_ratio_conjugate
h %= 1
hsv_to_rgb(h, 0.5, 0.95)
}
```

Okay, now we’re getting places! The problem was that function `hsv_to_rgb()`

. How did it work? Queue rabbit hole number two.

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:

- The Converting To RGB section on the Wikipedia page
- 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!

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.

```
function generateComplementaryColors(numberToGenerate) {
/**
* I: Three arguments are the number of complementary colors to generate (integer > 0),
* O: A set of color and pattern
* Credit for the inspiration to use the golden ratio goes to Martin Ankerl who wrote:
* https://martin.ankerl.com/2009/12/09/how-to-create-random-colors-programmatically/
* NB: Definitions of helperfunctions `rgbFromHSL` and `hexFromRGB` can be found here:
* https://gist.github.com/stephencweiss/eab510dabb2ba50652434372e46b5980
*/
const goldenRatio = 1.61803398749895
const colors = []
const patterns = [
"plus",
"cross",
"dash",
"cross-dash",
"dot",
"dot-dash",
"disc",
"ring",
"line",
"line-vertical",
"weave",
"zigzag",
"zigzag-vertical",
"diagonal",
"diagonal-right-left",
"square",
"box",
"triangle",
"triangle-inverted",
"diamond",
"diamond-box",
]
const saturation = 0.8
const lightness = 0.5
let hue = Math.random()
for (let i = 0; i < numberToGenerate; i += 1) {
hue = goldenRatio * hue
hue %= 1
const huePrime = Math.round(hue * 360)
const [red, green, blue] = rgbFromHSL(huePrime, saturation, lightness)
const color = hexFromRGB(red, green, blue)
const pattern = patterns[Math.floor(patterns.length * Math.random())]
colors.push({ color, pattern })
}
return colors
}
```

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.

```
/**
* This gist covers the conversion of color values.
* It includes:
* 1) hsvFromRGB
* 2) rgbFromHSV
* 3) hslFromRGB
* 4) rgbFromHSL
* 5) hexFromRGB
* 6) rgbFromHex
*
* The primary inspiration for this was the work done by https://gist.github.com/mjackson/5311256
* Source I found helpful for understanding the details and deriving the values include:
* [Wikipedia: HSL and HSV](https://en.wikipedia.org/wiki/HSL_and_HSV)
* [CS StackExchange: Convert HSV to RGB Colors](https://cs.stackexchange.com/questions/64549/convert-hsv-to-rgb-colors)
* [Rapid Tables](https://www.rapidtables.com/)
* [MDN: parseInt()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt)
* [MDN: toString()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toString)
*/
function hsvFromRGB(r, g, b) {
/**
* I: Three arguments, red (r), green (g), blue (b), all ∈ [0, 255]
* O: An array of three elements hue (h) ∈ [0, 360], and saturation (s) and value (v) which are both ∈ [0, 1]
*/
;(r /= 255), (g /= 255), (b /= 255)
const max = Math.max(r, g, b)
const min = Math.min(r, g, b)
const diff = max - min
let h, s
// Value
const v = max
// Saturation
s = max === 0 ? 0 : diff / max
// Hue
if (diff === 0) {
h = 0
} else {
// 1/6 is equivalent to 60 degrees
if (max === r) {
h = (1 / 6) * (0 + (g - b) / diff)
}
if (max === g) {
h = (1 / 6) * (2 + (b - r) / diff)
}
if (max === b) {
h = (1 / 6) * (4 + (r - g) / diff)
}
}
h = Math.round(h * 360)
return [h, s, v]
}
function rgbFromHSV(h, s, v) {
/**
* I: Three elements hue (h) ∈ [0, 360], and saturation (s) and value (v) which are both ∈ [0, 1]
* O: An array of red (r), green (g), blue (b), all ∈ [0, 255]
*/
hprime = h / 60
const c = v * s
const x = c * (1 - Math.abs((hprime % 2) - 1))
const m = v - c
let rPrime, gPrime, bPrime
if (!hprime) {
rPrime = 0
gPrime = 0
bPrime = 0
}
if (hprime >= 0 && hprime < 1) {
rPrime = c
gPrime = x
bPrime = 0
}
if (hprime >= 1 && hprime < 2) {
rPrime = x
gPrime = c
bPrime = 0
}
if (hprime >= 2 && hprime < 3) {
rPrime = 0
gPrime = c
bPrime = x
}
if (hprime >= 3 && hprime < 4) {
rPrime = 0
gPrime = x
bPrime = c
}
if (hprime >= 4 && hprime < 5) {
rPrime = x
gPrime = 0
bPrime = c
}
if (hprime >= 5 && hprime < 6) {
rPrime = c
gPrime = 0
bPrime = x
}
const r = Math.round((rPrime + m) * 255)
const g = Math.round((gPrime + m) * 255)
const b = Math.round((bPrime + m) * 255)
return [r, g, b]
}
function rgbFromHSL(h, s, l) {
/**
* I: Three elements hue (h) ∈ [0, 360], and saturation (s) and lightness (l) which are both ∈ [0, 1]
* O: An array of red (r), green (g), blue (b), all ∈ [0, 255]
*/
const hprime = h / 60
const c = (1 - Math.abs(2 * l - 1)) * s
const x = c * (1 - Math.abs((hprime % 2) - 1))
const m = l - c / 2
let rPrime, gPrime, bPrime
if (h >= 0 && h < 60) {
rPrime = c
gPrime = x
bPrime = 0
}
if (h >= 60 && h < 120) {
rPrime = x
gPrime = c
bPrime = 0
}
if (h >= 120 && h < 180) {
rPrime = 0
gPrime = c
bPrime = x
}
if (h >= 180 && h < 240) {
rPrime = 0
gPrime = x
bPrime = c
}
if (h >= 240 && h < 300) {
rPrime = x
gPrime = 0
bPrime = c
}
if (h >= 300 && h < 360) {
rPrime = c
gPrime = 0
bPrime = x
}
const r = Math.round((rPrime + m) * 255)
const g = Math.round((gPrime + m) * 255)
const b = Math.round((bPrime + m) * 255)
return [r, g, b]
}
function hslFromRGB(r, g, b) {
/**
* I: Three arguments, red (r), green (g), blue (b), all ∈ [0, 255]
* O: An array of three elements hue (h) ∈ [0, 360], and saturation (s) and lightness (l) which are both ∈ [0, 1]
*/
;(r /= 255), (g /= 255), (b /= 255)
const max = Math.max(r, g, b)
const min = Math.min(r, g, b)
const diff = max - min
let h, s
//Lightness
const l = (max + min) / 2
//Saturation
s = diff === 0 ? 0 : diff / (1 - Math.abs(2 * l - 1))
//Hue
if (diff === 0) {
h = 0
} else {
// 1/6 is equivalent to 60 degrees
if (max === r) {
h = (1 / 6) * (0 + (g - b) / diff)
}
if (max === g) {
h = (1 / 6) * (2 + (b - r) / diff)
}
if (max === b) {
h = (1 / 6) * (4 + (r - g) / diff)
}
}
h = Math.round(h * 360)
return [h, s, l]
}
function baseTenToHex(c) {
/**
* I: A number
* O: A string representation of the number in base 16
*/
let hex = c.toString(16)
return hex.length == 1 ? "0" + hex : hex
}
function hexFromRGB(r, g, b) {
/**
* I: Three arguments, red (r), green (g), blue (b), all ∈ [0, 255]
* O: A hexidecimal representation of the three numbers, concatenated as one string.
*/
return "#" + baseTenToHex(r) + baseTenToHex(g) + baseTenToHex(b)
}
function baseHexToTen(c) {
/**
* I: A string of a number in base 16
* O: A number representation of the string in base 10
*/
return parseInt(c, 16)
}
function rgbFromHex(hexValue) {
/**
* I: A single hexidecimal value (without a leading `#`);
* O: An array of red (r), green (g), blue (b), all ∈ [0, 255]
*/
debugger
const r = baseHexToTen(hexValue.slice(0, 2))
const g = baseHexToTen(hexValue.slice(2, 4))
const b = baseHexToTen(hexValue.slice(4, 6))
return [r, g, b]
}
```

Hi there and thanks for reading! My name's Stephen. I live in Chicago with my wife, Kate, and dog, Finn. Want more? See about and get in touch!