2c:null 2d:["$","title",null,{"children":"Visualizing Data with Color | Enrico Bertini | Observable"}] 32:T564,md`If you want to use color in visualization effectively it is necessary for you to understand some basic notions of how color works and how colors can be specified using a computer. For this reason we start by covering **color specification** methods. Once these basics are covered, we introduce the **color mapping problem**, that is, the problem behind building color schemes that map data to color effectively. Having a good mental model of the logic behind color mapping is crucial to understand all the color techniques presented later on in the notebook. The next section covers the bulk of technqieus for data visualization with color. The techniques are organized in four main areas covering **4 main data visualization tasks**: *quantify*, *segment*, *label*, *highlight*. Organizing your knowledge around these tasks is very useful becasue most of the time, when you have to use color in visualization you fall into one of these four possible tasks. Within each of these tasks you will learn the main techniques, design decisions and potential pitfalls to avoid. Once these main tasks are covered, we introduce the problem of **color blindness**; a difficult topic that is too often overlooked. In this part, I explain (briefly) what color blindness is and then I cover methods to verify color schemes and how to design color schemes that work for color blindness.`33:T781,md`## Interlude on Color Perception 👁️ 🌈 After mulling over it for a long time, I decided not to cover color percepetion in this notebook. Above all, because it would be hard to cover all the necessary notions in sufficient details. Certainly I am not skipping it becasue I think it is not important! In fact, I think it is very important. For this reason in this short section I will only mention relevant ideas you should be familiar with and I will add specific links to reasources that cover those topics in sufficient details. - Retina and photoreceptors (https://en.wikipedia.org/wiki/Photoreceptor_cell) - Trichromacy theory (https://en.wikipedia.org/wiki/Trichromacy) - Opponent-process (https://en.wikipedia.org/wiki/Opponent_process) - Color constancy (https://en.wikipedia.org/wiki/Color_constancy) If you prefer a textbook that covers these topics in more details, and in a more structured manner, I strongly encourage you to buy Colin Ware's [Information Visualization: Perception for Design](https://www.amazon.com/Information-Visualization-Perception-Interactive-Technologies/dp/0128128755/), the best book about visualization ever. In fact, many of the things I present here derive from knowledge I have acquired over time by reading that book. If you decide to skip this part I want you at least to learn some very basic notions: 1. **Trichromacy.** The human eye uses three photoreceptors to perceive color; hence the theory that color is fundamentally three-dimensional; 2. **Luminance**. Luminance (the perceived brightness of a color) is a fundamental color property that heavily influences how colors are perceived and used; 3. **Environment.** The way color appers to the human eye depends on properties of the environment and specificaly on color properties of surrounding object. To better undertand these ideas I strongly suggest you to explore the resources I mentioned above. `34:T44b,{ const svg = d3.create('svg') .attr("width", pickerSize) .attr("height", pickerSize) const nBins = 50; const cellSize = colorPickerSize/nBins; const idx = Array.from(Array(Math.pow(nBins, 2)).keys()); const row = (d) => Math.floor(d/nBins); const col = (d) => d%nBins; const scale = d3.scaleLinear() .domain([0, nBins]) .range([0, 100]); const cells = svg.selectAll('rect') .data(idx) .enter() .append('rect') .attr('width', Math.floor(cellSize)+1) .attr('height', Math.floor(cellSize)+1) .attr('x', d => row(d) * cellSize) .attr('y', d => col(d) * cellSize) .attr('stroke-width', 0.01) .attr('stroke', 'white') .attr('fill', d => { // return `hsl(${col(d)/nBins*360}, ${row(d)/nBins*100}, ${50})`; // return d3.hsl(250, 50, 50); const hcl = d3.hcl(row(d)/nBins*360, col(d)/nBins*100, hcl_luminance); if(hcl.displayable()){ return hcl.rgb(); } else { // return d3.color("lightgrey") return hcl.rgb(); } } ); return svg.node(); }35:T44b,{ const svg = d3.create('svg') .attr("width", pickerSize) .attr("height", pickerSize) const nBins = 50; const cellSize = colorPickerSize/nBins; const idx = Array.from(Array(Math.pow(nBins, 2)).keys()); const row = (d) => Math.floor(d/nBins); const col = (d) => d%nBins; const scale = d3.scaleLinear() .domain([0, nBins]) .range([0, 100]); const cells = svg.selectAll('rect') .data(idx) .enter() .append('rect') .attr('width', Math.floor(cellSize)+1) .attr('height', Math.floor(cellSize)+1) .attr('x', d => row(d) * cellSize) .attr('y', d => col(d) * cellSize) .attr('stroke-width', 0.01) .attr('stroke', 'white') .attr('fill', d => { // return `hsl(${col(d)/nBins*360}, ${row(d)/nBins*100}, ${50})`; // return d3.hsl(250, 50, 50); const hcl = d3.hcl(row(d)/nBins*360, hcl_luminance, col(d)/nBins*100); if(hcl.displayable()){ return hcl.rgb(); } else { // return d3.color("lightgrey") return hcl.rgb(); } } ); return svg.node(); }36:T50e,md`### Non-linear mapping A common problem you can face when mapping a quantity to color is that the distribution of this quantity may be "skewed", that is most of the data points are concentrated in a small range and a few data points that are either much lower or much higher than the values in this narrow range. In fact, this is exactly what happens with the unemployment values we used above. If you look carefully, you will notice that most of the counties have some pretty small values but a few ones have a very high value (see within Alaska as an example). The major downside when this happens is that we cannot see much variability in the range of values that cover most of the data (most of the counties in the map). In a way you can see this as a sign that we are "wasting" the power of color to convey more differences between most of the counties. To understand this take a look at the bar chart below, which depicts the distribution of the unemplyment value. The x-axis shows the uneplyment values (binned in discrete ranges) and the corresponding number of counties that share that range of values. Below each bar you can also see which color of the color scale corresponds to the unemplyment values and as you can see most of the data uses a very narrow range of colors. `37:T8c9,{ const width = 500; const height = 300; const widthPadding = 10; const heightPadding = 20; const boundedWidth = width - 2*widthPadding; const boundedHeight = height - 2*heightPadding; const svg = d3.create("svg") .attr("width", 500) .attr("height", 300); const canvas = svg.append("g") .attr("transform", `translate(${widthPadding}, ${heightPadding})`); const xScale = d3.scaleLinear() .domain([0, d3.max(unemployment.map(d => d.rate))]).nice() .range([0, boundedWidth]); const yScale = d3.scaleLinear() .domain([0, d3.max(bins.map(d => d.length))]) .range([0, boundedHeight]); const binSize = boundedWidth/bins.length; const scaleColor = d3.scaleSequential(t => d3.hsl(hmap, smap, 1-t)) .domain(d3.extent(unemployment.map(d => d.rate))); canvas.append("g").selectAll("rect") .data(bins) .join("rect") .attr("x", d => xScale(d.x0)) .attr("y", d => boundedHeight-yScale(d.length)-1) .attr("width", binSize-2) .attr("height", d => yScale(d.length)) .attr("fill", "lightgrey") canvas.append("g").selectAll("text") .data(bins) .join("text") .attr("x", d => xScale(d.x0)) .attr("y", d => boundedHeight-yScale(d.length)-5) .text(d => d.length) .attr("font-family", "sans-serif") .attr("font-size", 8) .attr("text-anchor", "middle") .attr("dx", binSize/2-1) .attr("fill", "#404040"); canvas.append("g").selectAll("rect") .data(bins) .join("rect") .attr("x", d => xScale(d.x0)) .attr("y", d => boundedHeight) .attr("width", binSize-2) .attr("height", binSize-2) .attr("stroke", "white") .attr("stroke-width", 0.25) .attr("fill", d => scaleColor(d.x0)); canvas.append("g").append("text") .text("N. of counties") .attr("x", 0) .attr("y", 0) .attr("font-size", 8) .attr("font-family", "sand-serif") // const xAxis = d3.axisBottom(xScale); // canvas.append("g") // .attr("transform", `translate(0, ${boundedHeight})`) // .call(xAxis); // const yAxis = d3.axisLeft(yScale); // canvas.append("g") // .attr("transform", `translate(${widthPadding+5}, 0)`) // .call(yAxis); return svg.node(); }38:T4bb,md`### To bin or not bin? Another important decisions in color mapping is to decide whether the colors should be binner or not. What do we mean by that? In all of the examples above we used a continous mapping between data values and color values. However, nothing prevents us to bin the data values into a set of discrete bins so that all values within the bin get mapped to the same color. The net effect of doing that is that the visualization contains only a descrete set of color shades, reducing the number of individual color values available in the visualization and effectively grouping together similar values. You may think that this is highly undesirable. Effectively, why would we want to reduce the number of possible differences we can see between the data points? Or, in other words, why reduce the color *resolution* of our visualization? Despite being somewhat counterintuitive, there are situations where binning can be useful becasue it can make certain types of patterns easier to observe [TBD: revise this sentence]. Lisa Rost has a great article on when to use classed (binned) versus unclassed (not binned) color maps: https://blog.datawrapper.de/classed-vs-unclassed-color-scales/. `39:T777,md`One thing I'd like you to reflect abut is that color map use and creation are is always about finding a ways to map between two spaces: the data space and the color space. It's useful for you to have this mental model in mind. As you will see later one, we will come back to this idea over and over again. Region | Value Value range: [v_min, v_max] → color In the example above this turns into: [v_min, v_max] → H, S, L(v) That is, hue and saturation are fixed and the luminance channels is used to create the color variation you need to communicate a quantity. *** => Add choropleth using HSL, where H and S can be manipulated and L is used for value mapping. Now, let's explore other options. What happens if we use other channels? We can use the same logic we used above to map quantitative values to other channels of a color space. Let's keep using HSL. This is what happens if we use S, the saturation channel and we keep the rest fixed. [v_min, v_max] → H, S(v), L Maybe we can try something crazy and do the same thing with the Hue channel and see what happens. [v_min, v_max] → H(v), S, L As you can see it does not make much sense. Hue does not work as a channel to communicate quantity. But as we will see later on, it is actually very useful for other puporses. ### Desirable properties of *quantification* Let's make this a bit more technical now. What are the desirable properties of a color scale designed to quantify? * Discriminability (=> Show how different choice lead to more/less discriminability) * Linearity (=> How do we show non-linearity?) * Contextual effects (=> Show color perception of same color with different contexts) * Contrast with background (=> Show same data with different background) => Diverging color scales => Using multiple hues? => Aside: the rainbow color map Effect of: * Effect of size * Contrast * Binning * Nonlinear mapping `3a:T525,{ // Create a sorted list of random numbers with 2 decimals // let randNumbers = Array.from({length:5}, () => Math.random()); // randNumbers.sort((a, b) => {return a-b}); // randNumbers = randNumbers.map(d => d.toFixed(2)); const nNumbers = colorSteps; const numbers = Array.from({length:nNumbers}, (d, i) => i/nNumbers); numbers.push(1.0); const size = 50; const svg = d3.create('svg') .attr('height', 200) .attr('width', 600) const cells = svg.selectAll('g') .data(numbers) .enter() .append('g') .attr('transform', (d, i) => `translate(${i*size}, 40)`); cells.append('rect') .attr('width', size) .attr('height', size) .attr('stroke', 'lightgrey') .attr('fill', 'white'); const colorScale = d3.scaleLinear() .domain(d3.extent(numbers.map(d => +d))) .range(['white', 'blue']); // return colorScale(0.6) cells.append('rect') .attr('width', size) .attr('height', size) .attr('stroke', 'lightgrey') .attr('fill', 'white') .attr('y', size+10) .attr('fill', d => d3.hsl(hue, saturation/100, +d)); // .attr('fill', d => colorScale(+d)); cells.append('text') .attr('x', size/2) .attr('y', size/2) .attr('fill', 'black') .attr('font-size', 12) .attr('text-anchor', 'middle') .attr('alignment-baseline', 'middle') .text(d => d.toFixed(2)) return svg.node() } 3b:T4d2,{ // Create a sorted list of random numbers with 2 decimals // let randNumbers = Array.from({length:5}, () => Math.random()); // randNumbers.sort((a, b) => {return a-b}); // randNumbers = randNumbers.map(d => d.toFixed(2)); const nNumbers = colorSteps; const numbers = Array.from({length:nNumbers}, (d, i) => i/nNumbers); numbers.push(1.0); const size = 50; const svg = d3.create('svg') .attr('height', 200) .attr('width', 600) const cells = svg.selectAll('g') .data(numbers) .enter() .append('g') .attr('transform', (d, i) => `translate(${i*size}, 40)`); cells.append('rect') .attr('width', size) .attr('height', size) .attr('stroke', 'lightgrey') .attr('fill', 'white'); cells.append('rect') .attr('width', size) .attr('height', size) .attr('stroke', 'lightgrey') .attr('fill', 'white') .attr('y', size+10) .attr('fill', d => { const rgb = d3.lab(+d * 150, cie_a2, cie_b2).rgb(); const s = `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`; return s; }) cells.append('text') .attr('x', size/2) .attr('y', size/2) .attr('fill', 'black') .attr('font-size', 12) .attr('text-anchor', 'middle') .attr('alignment-baseline', 'middle') .text(d => d.toFixed(2)) return svg.node() } 3c:[{"id":"50848f0dd4d2d9c84821adba90ca625cb2815694117bbb7b6ae393e788aae9d85f19a6c73d60d642bb04e2f95b87993e8c7312d4d4da6a1431c58460f5ad6c63","href":"https://static.observableusercontent.com/files/50848f0dd4d2d9c84821adba90ca625cb2815694117bbb7b6ae393e788aae9d85f19a6c73d60d642bb04e2f95b87993e8c7312d4d4da6a1431c58460f5ad6c63","name":"counties-albers-10m.json","type":"application/json","lastModified":1618676575039.929,"size":795407}] 30:{"id":"4c5a92ab83e3c8b3","slug":null,"title":"Visualizing Data with Color","thumbnail":"8a8d6414ef6d2256588a4c395f22fdc1e74f2b8b3cf2f0e75d09de861b22a33f","access_level":"public","create_time":"$D2020-11-23T21:42:14.657Z","update_time":"$D2024-03-22T16:44:32.097Z","view_time":null,"first_public_time":"$D2023-08-25T19:11:38.549Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"83fbc17732da82d6","login":"ebertini","name":"Enrico Bertini","avatar_url":"https://avatars-next.observableusercontent.com/fd5f038830ee351badae98830d3123aa543cbd31d5b8cfc8c9d399aff1eb7526","tier":"starter_2024"},"version":2082,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b643a366d8573513","login":"ebertini","name":"Enrico Bertini","avatar_url":"https://avatars-next.observableusercontent.com/fd5f038830ee351badae98830d3123aa543cbd31d5b8cfc8c9d399aff1eb7526","tier":null}],"members":[{"type":"individual","id":"9ac49806fa2378eb","login":"danielkerrigan","name":"Dan Kerrigan","avatar_url":"https://avatars-next.observableusercontent.com/619303911282e36266ffeaecc4d4a7604bda6e267bcd810bda5bc96fc77e39b2","tier":null,"role":"editor"},{"type":"individual","id":"b643a366d8573513","login":"ebertini","name":"Enrico Bertini","avatar_url":"https://avatars-next.observableusercontent.com/fd5f038830ee351badae98830d3123aa543cbd31d5b8cfc8c9d399aff1eb7526","tier":null,"role":"editor"},{"type":"individual","id":"fc026d346efb6aba","login":"racquellevia","name":"Racquel Fygenson","avatar_url":"https://avatars-next.observableusercontent.com/65fc88c7b5b3da59b62a2bb3b7f2f817300afb47c5108bf80b5b0d3ec5e0402f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Visualizing Data with Color","cells":[{"id":0,"value":"md`# Visualizing Data with Color`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1309,"value":"md`The main purpose of this notebook is to explain how color works and how it can be used to visualize data. The notebook assumes you have some familiarity with data visualization but no previous notions of how to be represent data with color. The notebook is organized in a way to explain some basic notions of how color works and then it dives deep into issues of how to best use color for a variety of data visualization tasks. In each section I added a number of interactive explainables that help you understand the concepts more \"visceraly\". My hope is that by explaining color use in visualization this way the journey will be more satisfying and ultimately more impactful from the pedagogical point of view.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1312,"value":"md`## Why a notebook on color?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1315,"value":"md`There are a number of reasons why I wrote this notebook. First, because color is one of the most fascinating aspects of data visualization. A visualization is often attractive and enthralling specifically for the color scheme its designer decided to use. See these examples here. Aren't they amazing?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1324,"value":"// Add examples","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1319,"value":"md`Second, because color is very often misused in visualization and my hope is that a good notebook may help people use color better. Here are examples of data visualizations that use color in a pretty confusing way.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1327,"value":"// Add examples","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1329,"value":"md`Third, because most (all?) existing resources on how to visualize data with color do not take advantage of the amazing power of interactive notebooks. And my hypothesis is that a notebook presenting color visualization ideas with interactive explainables will end up being way more instructive than any other resource. If you are curious, feel free to jump down and start playing with some of the sliders. But make sure to come back your once you are done!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"md`## What are you going to learn?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1338,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"md`## The Color Mapping Problem (TO REVISE)\n\nThe main issues in visualization is to figure out strategies or \"rules\" to decide which color a given obejct should be colored with according to characteristics the object has. This is often called the \"color mapping\" or color encoding problem. As we will see below, this boils down to defininng two main elements:\n\n1. Color space. A color spaces to use to describe colors according to a coordinate systems (more below).\n2. Color mapping. A color mapping function that decides, given the attributes of an object, which color should be used for that object.\n\n=> ADD DIAGRAMS TO EXPLAIN THE CONCEPTS\n\nWe will cover these two main issues, in relation to the color mapping goal, in the rest of this guide. For now what is important for you to remember is the following: a) what are the main uses of color in visualization and b) what the color mapping problems is and what it entails.\n\n`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"md`## Color Specification and Color Spaces\n\nA fundamental issue with color is to figure out how to specifcy colors mathematically and programmatically. If we want to be able to design rules that map data to color, we have to work with mathematical representations that permit us to specifcy colors programmatically.\n\nOver the years, many different color specification systems have been developed. They all have their own reasons to exist and their own idiosyncrasies. We will start with the most basic and common ones and we will slowly introduce color specification systems that are particularly useful for visualization.\n\nIn the following we present some of the most common color spaces. Make sure to play with the sliders to get a sense of how the color space works!\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"md`### RGB (Red, Green, Blue)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":862,"value":"md`RGB is probably to most well known color specification system. Colors are generated by specifying the amount of Red (R), Green (G) and Blue (B) to mix together to generate the final color.\n\nThe problem with RGB is that it's been designed to describe the way displays work (that manipulating the intensity of red, gree and blue lights) but not to be usable by a human observer.\n\nYou can try to specify colors yourself using the RGB color picker below. First, try to get a \"feel\" for how the color specification model works, and then try to generate a color you have in mind. You'll see that it's not at all easy.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1552,"value":"pickerSize = 300","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"viewof red = slider({\n min: 0, \n max: 255,\n step: 1,\n description: \"Red\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"viewof green = slider({\n min: 0, \n max: 255,\n step: 1,\n description: \"Green\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"viewof blue = slider({\n min: 0, \n max: 255,\n step: 1,\n description: \"Blue\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"md`### HSL (Hue, Saturation, Lightness)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":871,"value":"md`A better alternative to **RGB** is the **HSL** color space. **HSL** stands for *Hue*, *Saturation* and *Lightness*, which correspond respectively to the following. *Hue* is the tint of the color, that is, the name we use when we refer to a color (yellow, blue, green, red, purple, etc.). *Saturation* is the vividness or colorfulness of the color. *Ligtness* is how much light the color emits, that is, how bright it looks.\n\nBut the best is really to take a look for yourself and familiarize with these color dimensions by playing with the sliders you find below. You'll see that by playing with them all these concepts become immediately obvious.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":244,"value":"viewof h = slider({\n min: 0, \n max: 360,\n step: 1,\n description: \"Hue\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":245,"value":"viewof s = slider({\n min: 0, \n max: 100,\n step: 1,\n description: \"Saturation\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"viewof l = slider({\n min: 0, \n max: 100,\n step: 1,\n description: \"Lightness\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":880,"value":"md`You may want to try to think about a color again and see if spacifying it with HSL turns out to be earier. The channels in HSL are way more intuitive than RGB, once you get a sense of what hue, saturation and lightness mean.\n\nIt turns out that this is also a big advantage for visualization design because these type of channels are very handy when we need to specify \"rules\" to map data values found in the data to colors that encode that values in a visualization.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"md`### CIE Lab`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":883,"value":"md`After seeing the HSL color space you may think that we have solved all the problems with color and that we do not really need anything else. Far from it! Color specification is endlessly fascinating and there are always more issues to deal with.\n\nOne interesting problem with HSL is that it is not \"perceptually calibrated\". What do we mean by that? It's a bit complicated but basically it means that distances in the color space do not represent the way distances between colors are perceived by a human observer. The animation below gives a better sense of the problem.\n` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":984,"value":"html`\n

Problem with HSL: luminance changes despite keeping S and L constant.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1061,"value":"tick10 = {\n let i;\n yield i = 0;\n while (true) {\n yield Promises.delay(0.05, ++i);\n if(i == 100) yield i = 0;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1066,"value":"md`The animated colors you see are generated by varying the Hue component of HSL while keeping S and L constant. As you can see, despite keeping them constant we perceive the colors as emitting different amounts of light.\n\nTo solve this kind of problems color researchers developed over time a number of color spaces that try to take this problem into account. One of the most important of such spaces is the CIE Lab, which has been developed with the intent to match distances in the color spaces to perceive distances.\n\nBelow you can find another color picker based on the CIE Lab space. This space is defined by three main channels:\n- L: luminance value\n- a: chromatic channel spanning between blue and yellow\n- b: chromatic channel spanning between red and green\n\nSimilarly to what you have done abobe, try to play with this color picker to get a sense of how the color space works and what the meaning of the channels is.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"viewof cie_l = slider({\n min: 0, \n max: 100,\n step: 1,\n description: \"Luminance\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"value":"viewof cie_a = slider({\n min: -100, \n max: 100,\n step: 1,\n description: \"a channel\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"viewof cie_b = slider({\n min: -100, \n max: 100,\n step: 1,\n description: \"b channel\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1077,"value":"md`You may have noticed that the a and b channels are not particularly intuitive. In fact, compared to HSL the Lab space is definitely less usable. So, now we have a perceptually calibrated color space but we are back to something that is not as intuitive as HSL to manipulate!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"md`### CIE Luv (TBD)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"md`### HCL (Hue, Chroma, Luminance)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":795,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":784,"value":"viewof hcl_h = slider({\n min: 0,\n max: 360,\n step: 1,\n description: \"HCL: Hue\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":788,"value":"viewof hcl_c = slider({\n min: 0,\n max: 150,\n step: 1,\n description: \"HCL: Chroma\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":789,"value":"viewof hcl_l = slider({\n min: 0,\n max: 100,\n step: 1,\n description: \"HCL: Lightness\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1101,"value":"md`## Visualizing Color Spaces`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1105,"value":"md`So far, we presented the color spaces through a set of sliders and a colored patch to show you what kind of color the values correspond to. Another way to get a better sense of how these color spaces look like is to actually visualize these color spaces by projecting the colors on a pair of Cartesian axes corresponding to two of the components that constiture the space. In the visualizations below we vary the luminance/lightness channel with a slides and map the other two components to the horizontal and vertical axes.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1115,"value":"md`### HSL`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":635,"value":"viewof hsl_luminance = slider({\n min: 0, \n max: 100,\n step: 0.5,\n description: \"Luminance (HSL)\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":591,"value":"{\n const svg = d3.create('svg')\n .attr(\"width\", pickerSize)\n .attr(\"height\", pickerSize)\n\n const nBins = 50;\n const cellSize = colorPickerSize/nBins;\n\n const idx = Array.from(Array(Math.pow(nBins, 2)).keys());\n\n const row = (d) => Math.floor(d/nBins);\n const col = (d) => d%nBins;\n\n const scale = d3.scaleLinear()\n .domain([0, nBins])\n .range([-100, 100]);\n \n const cells = svg.selectAll('rect')\n .data(idx)\n .enter()\n .append('rect')\n .attr('width', Math.floor(cellSize)+1)\n .attr('height', Math.floor(cellSize)+1)\n .attr('x', d => row(d) * cellSize)\n .attr('y', d => col(d) * cellSize)\n .attr('stroke-width', 0.01)\n .attr('stroke', 'white')\n .attr('fill', d => {\n // return `hsl(${col(d)/nBins*360}, ${row(d)/nBins*100}, ${50})`;\n // return d3.hsl(250, 50, 50); \n return d3.hsl(row(d)/nBins*360, col(d)/nBins, hsl_luminance/100); \n });\n\n return svg.node(); \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1119,"value":"md`### CIE Lab`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":553,"value":"viewof lab_luminance = slider({\n min: 0, \n max: 150,\n step: 0.5,\n description: \"Luminance (Lab)\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":481,"value":"{\n const svg = d3.create('svg')\n .attr(\"width\", pickerSize)\n .attr(\"height\", pickerSize)\n\n const nBins = 50;\n const cellSize = colorPickerSize/nBins;\n const idx = Array.from(Array(Math.pow(nBins, 2)).keys());\n\n const row = (d) => Math.floor(d/nBins);\n const col = (d) => d%nBins;\n \n const scale = d3.scaleLinear()\n .domain([0, nBins])\n .range([-100, 100]);\n \n const cells = svg.selectAll('rect')\n .data(idx)\n .enter()\n .append('rect')\n .attr('width', Math.floor(cellSize)+1)\n .attr('height', Math.floor(cellSize)+1)\n .attr('x', d => row(d) * cellSize)\n .attr('y', d => col(d) * cellSize)\n .attr('stroke-width', 0.01)\n .attr('stroke', 'white')\n .attr('fill', d => {\n const lab = d3.lab(lab_luminance, scale(row(d)), scale(col(d))).rgb();\n return `rgb(${lab.r}, ${lab.g}, ${lab.b})`;\n } \n );\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1122,"value":"md`### HCL`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":845,"value":"viewof hcl_luminance = slider({\n min: 0,\n max: 100,\n step: 1,\n description: \"HCL Luminance\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":827,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1691,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"md`## Color Mapping\n\nNow that you are equipped with some fundamental notions of how color perception works and how you can specify colors in a computer (using three channels), the next step is to understand how the color mapping process works. \n\nThe ultimate goal is to map data values to colors so that the viewer will be able to identify/estimate such values by inspecting the (colored) objects of a data visualization. \n\nIn its most basic form, color mapping is just a function that takes as an input a single data value (in more complex cases more data values, but we will restrict ourselves to one value for now) and returns a specific color as a result.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":711,"value":"tex.block`f(v) \\rightarrow color`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":716,"value":"md`Where the color is typically expressed using the coordinates of a color specification system such as those we presented above. So, for instance, if we use the HSL color space the function would be something like this:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":751,"value":"tex.block`f(v) \\rightarrow (h, s, l)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":748,"value":"md`In summary, your goal as a visualization designer is to choose or design an appropriate function that maps data values to colors. In order to make this even clearer, let's take a look at a specific example. The table below presents data about average unemplyment rate in US states.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1225,"value":"md`Imagine you want to communicate the magitude of unemployment rate with color. How do you actually derive colors from data values? One way is to build a function that sets Hue and Saturation to some desired fixed value and then maps Lightness proportionally to the unemplyment rate values.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1131,"value":"md`#### Unemployment Rates in the US`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1128,"value":"Table(unemploymentByState, {\n style: \"compact\",\n format: {\n rate: x => html`

${x}

`\n },\n width: 400\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1270,"value":"legend({\n color: cellColorScale,\n title: \"Unemployment Rate\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1711,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1273,"value":"md`You see the legend here? This gives you a sense of how colors map to values. Try to scroll the table and observe the colors. It's interesting, right? By observing colors you can quickly spot certain data values. For instance, some cells stand out because they are particularly dark; meaning they represent states with a high value of unemplyment. They really stand out! In fact, color makes it easier to identify this kind of patterns than a table with only number. This is partly why visualization is so powerful! **It turns cognitively effortful tasks into simpler perceptual tasks.** 🙌 Reading numbers is effortful. Spotting colors is much easier (albeit way less precise).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1295,"value":"md`### Color Mapping Tasks`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1299,"value":"md`In the table example, we presented a very specific problem of color mapping (encoding numerical values with color). In the more general case the function or strategy we use to decide how to assign colors to graphical objects depends on the specific task one wants to perform with color and the type of information one wants to communicate. The following sections focus on the main tasks we briefly mentioned at the beginning. Luckily, these tasks also correspond pretty well to the type of information one wants to visualize.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1304,"value":"md`As a quick refresher the main tasks are the following:\n- Quantify\n- Segment\n- Label\n- Highlight\n\nIn the following we are going to cover each of these tasks in sequence.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"md`## Using Color to *Quantify* 🧮\n\nWe already touched upon this task when we introduced colors to visualize unemployment rates in the table above. So, one of the main uses of color in visualization is to \"quantify\". There are many visualization techniques that use color for this purpose. A classic examples is *choropleth maps*, maps that color their regions to communicate the spatial distribution of a given quantity. The one below is an example showing the spatial distribution of unemplyment rate in the US.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":687,"value":"{\n const countyShapes = topojson.feature(us, us.objects.counties);\n const projection = d3.geoAlbersUsa()\n .fitSize([600, 400], countyShapes)\n \n const idToRate = new Map(Array.from(unemployment, d => [d.id, d.rate]));\n \n const svg = d3.create(\"svg\")\n .attr(\"width\", 600)\n .attr(\"height\", 400)\n \n const path = d3.geoPath().projection(projection);\n \n const scaleColor = d3.scaleSequential(t => d3.hsl(hmap, smap, 1-t))\n .domain(d3.extent(unemployment.map(d => d.rate)));\n \n const scale = d3.scaleLinear()\n .domain(d3.extent(unemployment.map(d => d.rate)))\n .range([1, 0]);\n \n const h = 200;\n const s = 0.3;\n const color2 = (value) => {\n const hsl = d3.hsl(hmap, smap, value)\n return hsl.rgb();\n }\n \n svg.selectAll(\"path\")\n .data(countyShapes.features)\n .join(\"path\")\n .attr(\"d\", path)\n .attr(\"stroke\", \"#ccc\")\n .attr(\"stroke-width\", 0.25)\n .attr(\"fill\", d => scaleColor(idToRate.get(d.id)))\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1607,"value":"legend({\n color: d3.scaleSequential(t => d3.hsl(hmap, smap, 1-t))\n .domain(d3.extent(unemployment.map(d => d.rate))),\n title: \"Unemployment Rate\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1378,"value":"md`We can rewrite the general mapping problem when the goal is to use color to quantify as follows:`\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1386,"value":"tex.block`f(v) \\rightarrow (c_1, c_2, c_3), v \\in [0, 1]`\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1399,"value":"md`Where the *v* value is in this case a quantity *normalized* in the range [0, 1] (you typically have a different range in your data but it can always be normalized in this range) and the color is described by 3 coordinates in a preferred color space.\n\nHow do you actually create such mapping?\n\nThe most important constrain to satisfy is that the colors have to be \"perceptually ordered\", that is, when you see a sequence of colors you should be able to sort them in order. See for example the two sequences below, which of the two do you perceive as ordered? Try by yourself: the color patches can be reordered. See if one comes more natural than the other.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1425,"value":"// TODO\n// Substitute this with larger squares and make it interactive so that people can re-arrange it! :)\n// See: https://observablehq.com/@fil/drag-to-re-arrange\n// The one below is a placeholder ...","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1420,"value":"swatches({\n color: d3.scaleOrdinal([\"Color 1\", \"Color 2\", \"Color 3\", \"Color 5\"], d3.schemeBlues[5]),\n columns: \"60px\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1415,"value":"swatches({\n color: d3.scaleOrdinal([\"Color 1\", \"Color 2\", \"Color 3\", \"Color 5\"], d3.schemeTableau10),\n columns: \"60px\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1388,"value":"md`\n\n### Using individual channels\nThe best way to create an ordered set of colors is to use the color's lightness. In fact, lightness is the property of color that allows us to sort colors in order. The color sequence you see above is created by varying the lightness of the *L* channel of the HSL color space. The same method has been used in the choropleth map above where the data values are mapped (proportionally) to the lightness channel. In principle, saturation could be used for the same purpose. This map below shows how it looks like when we use saturation in place of lightness.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1431,"value":"{\n const countyShapes = topojson.feature(us, us.objects.counties);\n const projection = d3.geoAlbersUsa()\n .fitSize([600, 400], countyShapes)\n \n const idToRate = new Map(Array.from(unemployment, d => [d.id, d.rate]));\n \n const svg = d3.create(\"svg\")\n .attr(\"width\", 600)\n .attr(\"height\", 400)\n \n const path = d3.geoPath().projection(projection);\n \n const scaleColor = d3.scaleSequential(t => d3.hsl(hmap, t, 0.5))\n .domain(d3.extent(unemployment.map(d => d.rate)));\n \n const scale = d3.scaleLinear()\n .domain(d3.extent(unemployment.map(d => d.rate)))\n .range([1, 0]);\n \n const h = 200;\n const s = 0.3;\n const color2 = (value) => {\n const hsl = d3.hsl(hmap, smap, value)\n return hsl.rgb();\n }\n \n svg.selectAll(\"path\")\n .data(countyShapes.features)\n .join(\"path\")\n .attr(\"d\", path)\n .attr(\"stroke\", \"#ccc\")\n .attr(\"stroke-width\", 0.25)\n .attr(\"fill\", d => scaleColor(idToRate.get(d.id)))\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1612,"value":"legend({\n color: d3.scaleSequential(t => d3.hsl(hmap, t, 0.5))\n .domain(d3.extent(unemployment.map(d => d.rate))),\n title: \"Unemployment Rate\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1435,"value":"md`As you can see, despite perceving saturation levels as ordered values, it does not have the same visual impact and level of detail as when we use lightness. Furthermore, if we use saturation we are forced to include grey as color at the bottom of the scale becasue every color turns into grey once its saturation is set to zero.\n\nSince we tried to map the unemplyment values to lightness and saturation, for completeness it is interesting to see what happens when we map the values to the other channel we have available from *HSL*; which is the *Hue* value. Here is how the map looks like when we keep saturation and lightness constant and map the values using hue.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1437,"value":"{\n const countyShapes = topojson.feature(us, us.objects.counties);\n const projection = d3.geoAlbersUsa()\n .fitSize([600, 400], countyShapes)\n \n const idToRate = new Map(Array.from(unemployment, d => [d.id, d.rate]));\n \n const svg = d3.create(\"svg\")\n .attr(\"width\", 600)\n .attr(\"height\", 400)\n \n const path = d3.geoPath().projection(projection);\n \n const scaleColor = d3.scaleSequential(t => d3.hsl(t*360, 0.7, 0.6))\n .domain(d3.extent(unemployment.map(d => d.rate)));\n \n const scale = d3.scaleLinear()\n .domain(d3.extent(unemployment.map(d => d.rate)))\n .range([1, 0]);\n \n const h = 200;\n const s = 0.3;\n const color2 = (value) => {\n const hsl = d3.hsl(hmap, smap, value)\n return hsl.rgb();\n }\n \n svg.selectAll(\"path\")\n .data(countyShapes.features)\n .join(\"path\")\n .attr(\"d\", path)\n .attr(\"stroke\", \"#ccc\")\n .attr(\"stroke-width\", 0.25)\n .attr(\"fill\", d => scaleColor(idToRate.get(d.id)))\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1619,"value":"legend({\n color: d3.scaleSequential(t => d3.hsl(t*360, 0.7, 0.6))\n .domain(d3.extent(unemployment.map(d => d.rate))),\n title: \"Unemployment Rate\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1459,"value":"md`Now this is interesting! When we use color hue we (almost) completely lose the ability to discern the order or magnitude of the values (Is red high or low? Is red higher or lower than yellow? How about the blue values? How much lower or higher are thay compared to the red ones?). However, what is actually remarkable about this map is that the segmentation effect is much stronger. What I mean by that is that it's way easier to segment the colored areas apart and, even more interesting, it is way easier to \"talk\" about these areas. If I tell you to look at the red areas, you know immediately what I am talking about. And the same is true for the yellow, green and blue areas. As we will see later on this can actually be an advantage in certain situations.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1428,"value":"md`\n### Using Interpolation\nSo far we used individual channels to create a mapping between data values and color but this is not the only possible way to build quantitative color scales. Another way is to create an interpolation function within the color space that connects points in the color space that have different levels of lightness. In the most basic case using just a line (linear interpolation), in more complex cases using more sophisticated interpolations (e.g., the [cube helix](https://arxiv.org/abs/1108.5083)).\n\nIf this is somewhat confusing take a look at the color picker below. In this color picker you can select two colors, which represent the extremities of your color scale. An interpolating line is generated to create a scale that smoothly shifts from one location of the color space to another. You will see that ss long as the two points are at opposite ends of the luminance channels you create a color scale with perceptually ordered values.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2010,"value":"// Color picker to be completed","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1628,"value":"{\n const svg = d3.create(\"svg\")\n .attr(\"width\", pickerSize)\n .attr(\"height\", pickerSize);\n\n const probeSize = 10;\n\n const data = [{x:20, y:20}, {x:200, y:200}]\n \n svg.append(\"rect\")\n .attr(\"width\", pickerSize)\n .attr(\"height\", pickerSize)\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"black\")\n .attr(\"stroke-width\", 1)\n\n svg.append(\"line\")\n .attr(\"id\", \"pickline\")\n .attr(\"x1\", 20)\n .attr(\"y1\", 20)\n .attr(\"x2\", 200)\n .attr(\"y2\", 200)\n .attr(\"stroke-width\", 0.5)\n .attr(\"stroke\", \"grey\");\n \n svg.selectAll(\"circle\")\n .data(data)\n .enter()\n .append(\"circle\")\n .attr(\"id\", (d, i) => `circle${i+1}`)\n .attr(\"cx\", d => d.x)\n .attr(\"cy\", d => d.y)\n .attr(\"r\", probeSize)\n .attr(\"stroke\", \"black\")\n .attr(\"stroke-width\", 1)\n .attr(\"fill\", \"lightgrey\")\n .call(drag);\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1657,"value":"drag = {\n\n const dragstarted = function(event, d){\n d3.select(this).attr(\"stroke-width\", 1);\n }\n \n const dragged = function(event, d){\n d3.select(this).attr(\"cx\", d.x = event.x).attr(\"cy\", d.y = event.y);\n if(d3.select(this).attr(\"id\") == \"circle1\"){\n d3.select(\"#pickline\").raise().attr(\"x1\", d.x).attr(\"y1\", d.y);\n } else if(d3.select(this).attr(\"id\") == \"circle2\") {\n d3.select(\"#pickline\").raise().attr(\"x2\", event.x).attr(\"y2\", event.y);\n }\n }\n\n const dragended = function(event, d){\n d3.select(this).attr(\"stroke-width\", 0.5);\n }\n\n return d3.drag()\n .on(\"start\", dragstarted)\n .on(\"drag\", dragged)\n .on(\"end\", dragended);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1467,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1767,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1898,"value":"md`How do we avoid \"wasting\" all of these colors? One way to deal with this problem is to apply a nonlinear mapping between the range of unemplyment values to the color values of the scale. That is, we can \"force\" the dense region of values around the peak to use many more colors and the rest of the scale to sort of stretch to use fewer colors.\n\nBut how do we make this happen?\n\nThere are several approaches. One possibility is to use a nonlinear function to map the data values to the range of colors. Common solutions are the logarithmic and square root scalem, which tend to \"stretch\" the data. These functions however are quite brittle and do not provide easy ways to adapt to the specific distribution you have.\n\nAnother solution, which gives you more parameters to work with, is \"quantile scaling\". This type of scaling works as follows: the size (width) of the bins of the histogram is calculated in a way to make the number of data points falling into each bin as much as possible equal.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1825,"value":"bins.map(d => d.length)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1772,"value":"bins = d3.bin().thresholds(35)(unemployment.map(d => d.rate))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1785,"value":"scaleX = d3.scaleLinear().domain([0, d3.max(unemployment.map(d => d.rate))]).nice().range([0, 100])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1796,"value":"scaleX(0)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1464,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1469,"value":"md`### Background and contrast effects`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1445,"value":"md`\n--\n\nTo add:\n- Discriminability / ends of the scale\n- Non-linear mapping\n- Binning\n- Effect of background\n- Effect of surrounding colors\n- The \"dreaded\" Rainbow and alternatives\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1412,"value":"$39","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":736,"value":"md`For example, one can use the HSL color space to design a color palette that maps a quantity to a color by keeping the hue and saturation value constant. Try to play with the parameters below and see how you can build a color palette that maps a set of quantities in teh range [0, 1] to a color in a programmatica way.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":398,"value":"viewof hue = slider({\n min: 0, \n max: 360,\n step: 1,\n description: \"Hue\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":421,"value":"viewof saturation = slider({\n min: 0, \n max: 100,\n step: 1,\n description: \"Saturation\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":441,"value":"viewof colorSteps = slider({\n min: 2, \n max: 10,\n step: 1,\n description: \"Color Steps\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":300,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":463,"value":"viewof cie_a2 = slider({\n min: -100, \n max: 100,\n step: 1,\n description: \"a channel\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":466,"value":"viewof cie_b2 = slider({\n min: -100, \n max: 100,\n step: 1,\n description: \"b channel\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":448,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":494,"value":"{\nconst i = 47;\nconst nBins = 10;\nconst size = 200;\nconst cellSize = size/nBins;\n\nconst row = (d) => Math.floor(d/nBins);\nconst col = (d) => d%nBins;\n\nreturn [row(i), col(i)];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":769,"value":"viewof hmap = slider({\n min: 0,\n max: 360,\n step: 1,\n description: \"Hue\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":778,"value":"viewof smap = slider({\n min: 0,\n max: 1,\n step: 0.01,\n description: \"Saturation\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":889,"value":"{\nconst counties = topojson.feature(usmap, usmap.objects.counties).features;\nconst idToRate = new Map(Array.from(unemployment, d => [d.id, d.rate]));\n \nconst svg = d3.create(\"svg\")\n .attr(\"width\", 960)\n .attr(\"height\", 620)\n .attr(\"transform\", \"scale(0.9, 0.9)\")\n\nconst scale = d3.scaleSequentialQuantile(t => d3.hsl(hmap, smap, 0.1 + 0.9 * (1-t) ))\n .domain([...unemployment.map(d => d.rate)])\n\nsvg.selectAll(\"path\")\n .data(counties)\n .enter()\n .append(\"path\")\n .attr(\"d\", d3.geoPath())\n .attr(\"stroke\", \"lightgrey\")\n .attr(\"stroke-size\", 0.5)\n .attr(\"fill\", d => scale(idToRate.get(d.id)))\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":940,"value":"rates = unemployment.map(d => d.rate)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2021,"value":"d3.extent(rates)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":942,"value":"scale = d3.scaleSequentialQuantile()\n .domain([...unemployment.map(d => d.rate)])\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2025,"value":"scale2 = d3.scaleSequentialQuantile(t => t*100)\n .domain([1, 2, 3, 4, 5, 15, 27])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2028,"value":"sortedRates.map(d => scale2(d))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2031,"value":"sortedRates = rates.sort((a, b) => a-b)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":954,"value":"scaleSeq2 = d3.scaleSequentialQuantile(t => `hsl(360, 0.1, ${t})`)\n .domain([...unemployment.map(d => d.rate)])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":957,"value":"scaleSeq2(5.1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":944,"value":"scale(10)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":948,"value":"scaleSeq = d3.scaleSequential(t => `hsl(360, 0.1, ${t})`).domain([0, 1])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":950,"value":"scaleSeq(0.4)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2037,"value":"quantileScale = d3.scaleQuantile().domain(rates).range([\"q1\", \"q2\", \"q3\", \"q4\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2040,"value":"quants = sortedRates.map(d => quantileScale(d))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2043,"value":"d3.group(quants, d => d)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":921,"value":"viewof nQuantiles = slider({\n min: 2,\n max: 20,\n step: 1,\n description: \"Quantiles\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"md`## INTERACTIVES\n\n* Using different color channels\n* Different vis types (different mark types)\n* Single hue vs. multiple hues\n* Clamping min/max\n* Changing background\n* Changing size\n* Effect of binning\n* Non-linear mapping\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"md ` ### Nonuniform scaling\n\n- e.g., with choropleth maps ...\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"md`## Using Color to *Label* 🏷️\n\nVery often in visualization we want to be able to answer questions about what object a given object is and what kind of object a given object is. For this type of questions color is just perfect!\n\n\n### Desirable properties of *labeling*\n\n* Discriminability\n* Uniformity\n* Different hues\n* Contrast\n* Saturation\n\n### How Many Different Colors?\n\n### Effect of Size\n\n### Effect of Spatial Arrangement\n\n### Effect of Color Meaning (\"Semantically Resonant\")\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"md`## Using Color to Segment\n\nAnother interesting (and somewhat subtle) use of color is segmentation? What do we mean by segmentation? Imagine a map like the one below. Color is used not only to present what is the distribution of a quantity over the geographical space but also to segment the areas into consistent segments.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"md`## Using Color to Emphasize\n\n`\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"md`## Color Blindness\n\n`\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"md`## Combining Color with Other Channels\n\n* Color and position\n* Color and length, area\n* Color and orientation\n* Color and color (multivariate color mapping)\n\n`\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":259,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":655,"value":"labColor = d3.lab(cie_l, cie_a, cie_b).rgb()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1125,"value":"import {Table} from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1218,"value":"import {table} from \"@tmcw/tables@513\"\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1265,"value":"import {legend, swatches} from \"@d3/color-legend\"\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1279,"value":"md`Function to generate colors in the table of unemplyment rates by state`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1238,"value":"cellColorScale = d3.scaleSequential(t => d3.hsl(200, 0.6, 1-t)).domain(d3.extent(unemploymentByState.map(d => +d.rate)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1544,"value":"colorPickerSize = 300;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1560,"value":"hclColor = d3.hcl(hcl_h, hcl_c, hcl_l)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":697,"value":"md`### Map Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":646,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":688,"value":"usmap = FileAttachment(\"counties-albers-10m.json\").json();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1516,"value":"us = d3.json(\"https://unpkg.com/us-atlas@3/counties-10m.json\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":643,"value":"unemployment = require(\"@observablehq/unemployment\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1141,"value":"unemploymentByState = {\n const u = d3.rollup(unemployment, v => d3.mean(v, d => d.rate), d => d.state);\n u.delete(\"Puerto Rico\");\n return Array.from(u).map(d => ({state: d[0], rate: d[1].toFixed(2)}));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":659,"value":"md`## Playground`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":662,"value":"{\nconst c1 = d3.hsl(200, 0.5, 0.1).formatHex()\nconst c2 = d3.hsl(200, 0.5, 0.9).formatHex()\n const scale = d3.scaleLinear()\n .domain([0, 100])\n .range([c1, c2])\n\nreturn d3.color(scale(10)).formatHsl();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2052,"value":"piecewiseColor = d3.piecewise(d3.interpolateHsl, [\"#A00000\", \"#49FF33\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2054,"value":"ramp(piecewiseColor)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2056,"value":"import {ramp} from \"@mbostock/color-ramp\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3c","stdlib":"1","titling":"auto"}} 31:"$30:body"