31:[] 2f:{"title":"Studying Visualization Color Palettes for Contiamo","cells":[{"id":0,"value":"md`# Studying Visualization Color Palettes for Contiamo`","pinned":false,"hidden":false,"mode":"ojs"},{"id":380,"value":"md`With new needs and a brand new UI coming up at Contiamo, it's time to re-evaluate our colors and come up with a clear and fresh palette that works well for both visualizations and more traditional UI elements.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"md`This is the palette we have been working with so far:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"view([\n \"#2ca02c\",\n \"#1f77b4\",\n \"#ff7f0e\",\n \"#d62728\",\n \"#9467bd\",\n \"#17becf\",\n \"#7f7f7f\",\n \"#e377c2\",\n \"#8c564b\",\n \"#bcbd22\",\n \"#98df8a\",\n \"#aec7e8\",\n \"#ffbb78\",\n \"#ff9896\",\n \"#c5b0d5\",\n \"#9edae5\",\n \"#c7c7c7\",\n \"#f7b6d2\",\n \"#c49c94\",\n \"#dbdb8d\"\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":390,"value":"md`*(the numbers in the lower right corners note brightness values, so contrasts can be looked at in comparison)*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":385,"value":"md`Here are some shortcomings we'll be looking to improve on:\n* some colors look less important than others, risking that some of them be interpreted as disabled or stale\n* lots of hues: while it creates effective color contrast, it can use some improvement in visual harmony\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":131,"value":"md`Let's have a first naive tweak looks at a bit more variation in value, and a bit more homogeneity in saturation:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":133,"value":"view([\n \"#1499CE\",\n \"#FF7905\",\n \"#00AD5F\",\n \"#D31F1F\",\n \"#9467bd\",\n \"#17becf\",\n \"#7f7f7f\",\n \"#e377c2\",\n \"#8C3939\",\n \"#ACC90A\",\n \"#222222\",\n \"#00BF3C\"\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"md`## HCL Interpolation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":361,"value":"md`HCL-interpolated colors between two extremes distinct both in hue and value guarantees equally-spaced colors that minimize the chance of two adjacent ones being mixed up. Here is the classic example from the chroma.js library's website:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"view(\n chroma.scale([ \"#fafa6e\", \"#2A4858\" ]).mode('lch').colors(10)\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"md`Some natural progressions suggested by the recent [Graphiq blog post](https://blog.graphiq.com/finding-the-right-color-palettes-for-data-visualizations-fcd4e707a283):`","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"view(\n chroma.scale([ \"#F4E153\", \"#362142\" ]).mode('lch').colors(10)\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":96,"value":"view(\n chroma.scale([ \"#60C96E\", \"#4D4193\" ]).mode('lch').colors(10)\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":103,"value":"view(\n chroma.scale([ \"#D66000\", \"#A9A9B4\" ]).mode('lch').colors(10)\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":364,"value":"md`While these transitions look pleasing to the eye, they become tricky to distinguish as the number of color stops increases. Below, I'll experiment with combining multiple natural progressions to allow for a bit more contrast.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":120,"value":"md`## Combining HCL Interpolations`","pinned":false,"hidden":false,"mode":"ojs"},{"id":369,"value":"md`Combining the following two progressions:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":122,"value":"view(\n chroma.scale([ \"#16A7E0\", \"#4A2D5B\" ]).mode('lch').colors(10)\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":141,"value":"view(\n chroma.scale([ \"#F2DD41\", \"#4A2D5B\" ]).mode('lch').colors(10)\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":251,"value":"md`Yields one where there is more contrast between adjacent ones:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"colors = {\n const mode = 0\n \n const pickAlternate = index => acc => ([ [ head1, ...tail1 ], [ head2, ...tail2 ] ]) =>\n head1\n ? pickAlternate(index + 1)([ ...acc, index % 2 === 1 ? head1 : head2 ])([ tail1, tail2 ])\n : acc\n \n const pickAlternateOpposite = index => acc => ([ scheme1, scheme2 ]) =>\n scheme1.length > 0\n ? pickAlternateOpposite(index + 1)([ ...acc, index % 2 === 0 ? scheme1[0] : scheme2[scheme2.length - 1] ])([ scheme1.slice(1), scheme2.slice(0, -1) ])\n : acc\n \n const scheme2 = chroma.scale([ \"#16A7E0\", \"#4A2D5B\" ]).mode('lch').colors(10)\n const scheme1 = chroma.scale([ \"#F2DD41\", \"#362142\" ]).mode('lch').colors(10)\n \n const pickedScheme = (mode === 0 ? pickAlternate : pickAlternateOpposite)(0)([])([ scheme1, scheme2 ])\n \n return view(pickedScheme)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":394,"value":"md`Again, pleasing to the eye, but they tend to converge.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":290,"value":"md`## The Selection`","pinned":false,"hidden":false,"mode":"ojs"},{"id":372,"value":"md`Picking colors completely algorithmically is not something I'll go for in terms of a final selection, but in the scheme below, some of the progression patterns come as far as the blues and viridian and pine greens are considered.\n\nFor a clear and polished look, the palette has narrowed in both hues and values. The blue-purples and the orange-red-yellows dominate the palette, with some added greenish shades that don't go quite all the way to green, giving some additional color contrast while avoiding going full rainbow.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":322,"value":"colorScheme = [ \"#1499CE\", \"#7C246F\", \"#EAD63F\", \"#343972\", \"#ED5B17\", \"#009691\", \"#1D6199\", \"#D31F1F\", \"#AD329C\", \"#006865\" ]","pinned":false,"hidden":false,"mode":"ojs"},{"id":296,"value":"view(colorScheme)","pinned":false,"hidden":false,"mode":"ojs"},{"id":378,"value":"md`Some use-cases are avatars:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":331,"value":"html`\n

\n ${colorScheme.map(avatar)}\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"view = {\n const truncate = no => Math.floor(no * 1000) / 1000\n \n const viewBox = (color) => `\n \n

${truncate(chroma(color).hsv()[2])}

\n \n `\n \n return colorScheme => html`\n

\n ${colorScheme.map(viewBox).join(\"\")}\n

\n `\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"chroma = require(\"https://cdnjs.cloudflare.com/ajax/libs/chroma-js/1.3.7/chroma.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":316,"value":"avatar = color => `\n

\n IN\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":396,"value":"alternatingScheme = ([ scheme1Start, scheme1End], [ scheme2Start, scheme2End]) => {\n const mode = 0\n \n const pickAlternate = index => acc => ([ [ head1, ...tail1 ], [ head2, ...tail2 ] ]) =>\n head1\n ? pickAlternate(index + 1)([ ...acc, index % 2 === 1 ? head1 : head2 ])([ tail1, tail2 ])\n : acc\n \n const pickAlternateOpposite = index => acc => ([ scheme1, scheme2 ]) =>\n scheme1.length > 0\n ? pickAlternateOpposite(index + 1)([ ...acc, index % 2 === 0 ? scheme1[0] : scheme2[scheme2.length - 1] ])([ scheme1.slice(1), scheme2.slice(0, -1) ])\n : acc\n \n const scheme2 = chroma.scale([ \"#16A7E0\", \"#4A2D5B\" ]).mode('lch').colors(10)\n const scheme1 = chroma.scale([ \"#F2DD41\", \"#362142\" ]).mode('lch').colors(10)\n \n const pickedScheme = (mode === 0 ? pickAlternate : pickAlternateOpposite)(0)([])([ scheme1, scheme2 ])\n \n return view(pickedScheme)\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}