2b:null 2c:["$","title",null,{"children":"Theory and Application of Visualization Color Tools and Strategies | Danielle Szafir | Observable"}] 31:[{"id":"f5687447d5fa2d7cce768ccd9c82437b1cb9c3af008de53a807b11fb61c07e5adcc7729bbde70744ba774aa916e6b5408c61547419715e04089559c8e14b9e5e","href":"https://static.observableusercontent.com/files/f5687447d5fa2d7cce768ccd9c82437b1cb9c3af008de53a807b11fb61c07e5adcc7729bbde70744ba774aa916e6b5408c61547419715e04089559c8e14b9e5e","name":"vispubdata@4.csv","type":"text/csv","lastModified":1617848407577.552,"size":803},{"id":"360485dd472a2df7cf0dae036ccbea4e1025288f9e30a4f4189c8812f936395599fb87b3ff1597a4ca7a509f0a7475dfad8e3b0595bb40e9998f948018378cc3","href":"https://static.observableusercontent.com/files/360485dd472a2df7cf0dae036ccbea4e1025288f9e30a4f4189c8812f936395599fb87b3ff1597a4ca7a509f0a7475dfad8e3b0595bb40e9998f948018378cc3","name":"vispubdata_five.csv","type":"text/csv","lastModified":1617848407577.552,"size":1344}] 2f:{"id":"883b859dffc4d9ae","slug":"hands-on-with-color","title":"Theory and Application of Visualization Color Tools and Strategies","thumbnail":"44ab089d028ab1bd64f928045999884f0c318dd4a8d693a427cd6465c42c3cab","access_level":"public","create_time":"$D2021-04-08T02:20:07.577Z","update_time":"$D2024-04-15T18:28:10.157Z","view_time":null,"first_public_time":"$D2021-04-08T02:27:18.523Z","fork":{"id":"c39b1faabb384a8b","slug":"vis_2020_color_tools","title":"Theory and Application of Visualization Color Tools and Strategies","owner":{"id":"cdb0aa153996e2b0","login":"dalbersszafir","name":"Danielle Szafir"}},"stars":4,"starred":false,"owner":{"type":"team","id":"cdb0aa153996e2b0","login":"dalbersszafir","name":"Danielle Szafir","avatar_url":"https://avatars-next.observableusercontent.com/30d220a45145de1e2523a7b78d011b64f042ff6882753c955b653a21b28f76d6","tier":"starter_2024"},"version":393,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"e57d09d110957607","login":"dalbersszafir","name":"Danielle Szafir","avatar_url":"https://avatars-next.observableusercontent.com/30d220a45145de1e2523a7b78d011b64f042ff6882753c955b653a21b28f76d6","tier":null}],"members":[{"type":"individual","id":"e57d09d110957607","login":"dalbersszafir","name":"Danielle Szafir","avatar_url":"https://avatars-next.observableusercontent.com/30d220a45145de1e2523a7b78d011b64f042ff6882753c955b653a21b28f76d6","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":17,"collection":null,"type":"notebook","body":{"title":"Theory and Application of Visualization Color Tools and Strategies","cells":[{"id":0,"value":"md`# Theory and Application of Visualization Color Tools and Strategies`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"md`This notebook contains the scaffolding code for experimenting with color encodings drawn from two color design tools that help people construct encodings for qualitative (Colorgorical) and quantitative (Color Crafter) data. Note that the following exercises will help you explore the capabilities of the tool in the context of principles from color science and color theory. The default schemes below were generated using the respective tools. However, you should replace them with encodings you create using these tools!` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":378,"value":"md`For your in-class activity, you will want to first hand-generate an encoding using Carolina Blue (#4B9CD3). Then, you will use the code below to update at least one of the color encoding arrays (e.g., colorcrafter, colorcrafterdark, colorgoricalSlidersThree, etc.) for both the Quantitative Data and Qualitative Data sections below. This notebook is all in Vega Lite, so feel free to play around with the code if you want to get a little more hands-on with another visualization library.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9,"value":"md`## Data Loading`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"md`We will experiment with the VisPub Dataset (https://sites.google.com/site/vispubdata/home) from Isenberg et al. that contains data on the history of visualization publications. You are welcome to swap this dataset out for another of your choosing. The data contains the following structure:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":38,"value":"data = FileAttachment(\"vispubdata@4.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":40,"value":"md`The core attributes in this dataset are the publication 'Year', the 'Conference', the number of 'Papers', and the 'Acceptance' rate. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":53,"value":"md`## Quantitative Data Encoding with Color Crafter`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":56,"value":"md`We can use Color Crafter (https://danielleszafir.com/ColorCrafter/) to generate encodings for quantitative data. These encodings generally step through lightness to encode data using continuous values. We'll define a custom encoding using the colorcrafter scheme, shown on the heatmap below. ` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":90,"value":"colorcrafter = ['#ffd2d5', '#ffbdce', '#eca9c6', '#d796be', '#c384b6', '#af74ae', '#9c64a6', '#89559e', '#EEEEEE']","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":83,"value":"md`By default, Color Crafter seeds ramps using greys and yellows. You can manipulate curves using the sliders with these defaults to generate ramps across a range of color families. You can also explicitly seed Color Crafter to generate ramps with a specific color family by specifying a target seed color. Color Crafter will then rotate and translate the current encoding curves to the specified color. You can adjust the resulting encodings using the provided sliders. You can also reflect the curve to change the path the encoding traverses in color space, which will make encodings with larger curves warmer or cooler. \n\nLet's start with a simple heatmap of acceptance rates across the venues over time. Since we have a heatmap with large marks, you may wish to use a lighter, less saturate color scheme to represent your data. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":58,"value":"VegaLite = require('@observablehq/vega-lite')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":69,"value":"VegaLite({\n data: {values : data},\n mark: \"rect\",\n width: 800,\n height: 400,\n encoding: {\n y: {field: \"Conference\", type: \"nominal\"},\n x: {field: \"Year\", type: \"ordinal\"},\n color: {field: 'Acceptance', type: 'quantitative', scale: \n {\n range: colorcrafter\n }\n }\n },\n config: {\n axis: {grid: true, tickBand: \"extent\"}\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":111,"value":"md`We can try to represent the same data on a scatterplot, but the smaller points may make the colors appear more muted. Let's try using the same ramp here to illustrate this.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":115,"value":"VegaLite({\n title: \"Small Marks Are Hard To See\", \n data: {values : data},\n mark: {type: \"circle\", size: 80},\n width: 800,\n height: 400,\n encoding: {\n y: {field: \"Papers\", type: \"quantitative\"},\n x: {field: \"Year\", type: \"ordinal\"},\n color: {field: 'Acceptance', type: 'quantitative', scale: \n {\n range: colorcrafter\n }\n }\n },\n config: {\n axis: {grid: true, tickBand: \"extent\"},\n style: {r: 8}\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":117,"value":"md`To correct for the smaller marks, you may want to increase the contrast both with the background and between points. Try using a more saturate and darker ramp by adjusting the ramp parameters in your encoding. To increase contrast with the background, you'll want to play with the lightness and/or saturation. Making the ramp darker and more saturate can make the colors pop in small marks. Increasing the color range can make the differences between small marks more visible. \n\nAdjust the ramp and apply the updated encoding to the scatterplot below by adjusting the colorcrafterdark variable.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":121,"value":"colorcrafterdark = ['#ffa9d3', '#ff81c6', '#ff5ab8', '#ec2daa', '#c8009c', '#a5008f', '#830081', '#620072', '#430062']","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":124,"value":"md`Now let's apply that ramp and compare it to the prior scatterplot. Hopefully you can see the smaller values pop!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":128,"value":"VegaLite({\n title: \"Smaller Marks Need More Contrast!\", \n data: {values : data},\n mark: {type: \"circle\", size: 80},\n width: 800,\n height: 400,\n encoding: {\n y: {field: \"Papers\", type: \"quantitative\"},\n x: {field: \"Year\", type: \"ordinal\"},\n color: {field: 'Acceptance', type: 'quantitative', scale: \n {\n range: colorcrafterdark\n }\n }\n },\n config: {\n axis: {grid: true, tickBand: \"extent\"}\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":262,"value":"md`Note that Color Crafter is still currently in alpha. Any thoughts or feedback on how to improve the tool and its capabilities are welcome!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":186,"value":"md`# Qualitative Data with Colorgorical`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":224,"value":"import { vl } from \"@vega/vega-lite-api\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":269,"value":"md`We will explore qualitative data encodings by working with Colorgorical (http://vrl.cs.brown.edu/color). Colorgorical uses a series of parameters to automatically suggest color palettes of different sizes. For this activity, we'll use both the dataset from above and an adjusted version with five categories.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":275,"value":"dataFive = FileAttachment(\"vispubdata_five.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":183,"value":"md`Colorgorical uses sliders to update encoding parameters. For each of the following sliders, try moving it all the way to the right end (max) while the other sliders at the left end (min). Notice the effect each slider has on the generate palettes. \n\n\tPerceptual distance \n\tName difference\n\tPair preference\n\nUpdate the colorgoricalSlidersThree and colorgoricalSlidersFive variables with your favorite palettes to apply them to the visualizataions below. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":196,"value":"colorgoricalSlidersThree = ['rgb(141,228,211)', 'rgb(25,79,70)', 'rgb(35,158,179)']","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":199,"value":"colorgoricalSlidersFive = [\"rgb(32,142,183)\", \"rgb(124,229,230)\", \"rgb(33,77,78)\", \"rgb(33,240,182)\", \"rgb(110,164,126)\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":205,"value":"VegaLite({\n title: \"Colorgorical Three Color Palettes\", \n data: {values : data},\n mark: {type: \"line\", size: 5},\n width: 800,\n height: 400,\n encoding: {\n y: {field: \"Papers\", type: \"quantitative\"},\n x: {field: \"Year\", type: \"ordinal\"},\n color: {field: 'Conference', type: 'nominal', scale: \n {\n range: colorgoricalSlidersThree\n }\n }\n },\n config: {\n axis: {grid: true, tickBand: \"extent\"},\n style: {r: 8}\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":209,"value":"VegaLite({\n title: \"Colorgorical Five Color Palettes\", \n data: {values : dataFive},\n mark: {type: \"line\", size: 5},\n width: 800,\n height: 400,\n encoding: {\n y: {field: \"Papers\", type: \"quantitative\"},\n x: {field: \"Year\", type: \"ordinal\"},\n color: {field: 'Conference', type: 'nominal', scale: \n {\n range: colorgoricalSlidersFive\n }\n }\n },\n config: {\n axis: {grid: true, tickBand: \"extent\"},\n style: {r: 8}\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":191,"value":"md`Try selecting different ranges of color space using the hue filter. You might explore:\n\n

Selecting all parts *except* the yellow/greens.
Making two filters, one that selects one part of the space (e.g., reds) and one that selects the other part of the space (e.g., blues).

\nBe sure to delete your filters by pressing the “trash” icon before generating new palettes. Update the colorgoricalHueThree and colorgoricalHueFive variables with your favorite palettes to apply them to the visualizations below. `\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":246,"value":"colorgoricalHueThree = ['rgb(141,228,211)', 'rgb(25,79,70)', 'rgb(35,158,179)']","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":249,"value":"colorgoricalHueFive = [\"rgb(32,142,183)\", \"rgb(124,229,230)\", \"rgb(33,77,78)\", \"rgb(33,240,182)\", \"rgb(11,164,126)\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":290,"value":"VegaLite({\n title: \"Three Colors with Hue\", \n data: {values : data},\n mark: {type: \"line\", size: 5},\n width: 800,\n height: 400,\n encoding: {\n y: {field: \"Papers\", type: \"quantitative\"},\n x: {field: \"Year\", type: \"ordinal\"},\n color: {field: 'Conference', type: 'nominal', scale: \n {\n range: colorgoricalHueThree\n }\n }\n },\n config: {\n axis: {grid: true, tickBand: \"extent\"},\n style: {r: 8}\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":293,"value":"VegaLite({\n title: \"Five Colors with Hue\", \n data: {values : dataFive},\n mark: {type: \"line\", size: 5},\n width: 800,\n height: 400,\n encoding: {\n y: {field: \"Papers\", type: \"quantitative\"},\n x: {field: \"Year\", type: \"ordinal\"},\n color: {field: 'Conference', type: 'nominal', scale: \n {\n range: colorgoricalHueFive\n }\n }\n },\n config: {\n axis: {grid: true, tickBand: \"extent\"},\n style: {r: 8}\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":301,"value":"md`Colorgorical is set by default to recommend colors in the mid-lightness range so they are visible on light and dark backgrounds. Given the current excitement about “dark mode”, you may want to design palettes for dark backgrounds using very light colors. Try moving the lightness range for to generate light color palettes for dark backgrounds.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":308,"value":"colorgoricalDarkThree = ['rgb(141,228,211)', 'rgb(25,79,70)', 'rgb(35,158,179)']","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":310,"value":"colorgoricalDarkFive = [\"rgb(32,142,183)\", \"rgb(124,229,230)\", \"rgb(33,77,78)\", \"rgb(33,240,182)\", \"rgb(11,164,126)\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":303,"value":"VegaLite({\n title: {\n text: \"Three Colors with on a Black Background\", \n color: \"white\"\n },\n data: {values : data},\n mark: {type: \"line\", size: 5},\n width: 800,\n height: 400,\n encoding: {\n y: {field: \"Papers\", type: \"quantitative\"},\n x: {field: \"Year\", type: \"ordinal\"},\n color: {field: 'Conference', type: 'nominal', scale: \n {\n range: colorgoricalDarkThree\n }\n }\n },\n config: {\n axis: {grid: true, tickBand: \"extent\"},\n style: {r: 8},\n background: \"black\"\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":314,"value":"VegaLite({\n title: {\n text: \"Five Colors with on a Black Background\", \n color: \"white\"\n },\n data: {values : dataFive},\n mark: {type: \"line\", size: 5},\n width: 800,\n height: 400,\n encoding: {\n y: {field: \"Papers\", type: \"quantitative\"},\n x: {field: \"Year\", type: \"ordinal\"},\n color: {field: 'Conference', type: 'nominal', scale: \n {\n range: colorgoricalDarkFive\n }\n }\n },\n config: {\n axis: {grid: true, tickBand: \"extent\"},\n style: {r: 8},\n background: \"black\"\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":334,"value":"md`As in Color Crafter, you can set explicit colors that you'd like to appear in your encoding using a seed color. Try setting a seed color in the “Add starting colors” box. You could use your favorite color, or maybe a company / university color. You could also select a color from a palette you already generated by pressing the “+start” button next to that color. Then, have Colorgorical generate palettes for you around that seed color.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":342,"value":"colorgoricalSeededThree = ['rgb(141,228,211)', 'rgb(25,79,70)', 'rgb(35,158,179)']","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":345,"value":"colorgoricalSeededFive = [\"rgb(32,142,183)\", \"rgb(124,229,230)\", \"rgb(33,77,78)\", \"rgb(33,240,182)\", \"rgb(11,164,126)\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":347,"value":"VegaLite({\n title: \"Three Colors Starting From A Seed\", \n data: {values : data},\n mark: {type: \"line\", size: 5},\n width: 800,\n height: 400,\n encoding: {\n y: {field: \"Papers\", type: \"quantitative\"},\n x: {field: \"Year\", type: \"ordinal\"},\n color: {field: 'Conference', type: 'nominal', scale: \n {\n range: colorgoricalSeededThree\n }\n }\n },\n config: {\n axis: {grid: true, tickBand: \"extent\"},\n style: {r: 8}\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":359,"value":"VegaLite({\n title: \"Five Colors Starting From A Seed\", \n data: {values : dataFive},\n mark: {type: \"line\", size: 5},\n width: 800,\n height: 400,\n encoding: {\n y: {field: \"Papers\", type: \"quantitative\"},\n x: {field: \"Year\", type: \"ordinal\"},\n color: {field: 'Conference', type: 'nominal', scale: \n {\n range: colorgoricalSeededFive\n }\n }\n },\n config: {\n axis: {grid: true, tickBand: \"extent\"},\n style: {r: 8}\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":363,"value":"md`

Thanks!

\n\nThat's it for today's walkthrough. We hope you enjoy the rest of the tutorial. Feel free to reach out to Danielle Szafir (danielle.szafir@colorado.edu) for support with Color Crafter and Karen Schloss (kschloss@wisc.edu) for support with Colorgorical. Keep an eye out for upcoming updates to the tools.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"