2b:null 2c:["$","title",null,{"children":"R colour tools FAQs and demos | cdt2025 | Observable"}] 31:T483,htl.html`

RGB: Red vs. Green

${Plot.plot({ width: 400, height: 400, x: { domain: [0, 255], label: "Red →" }, y: { domain: [0, 255], label: "↑ Green" }, marks: [ Plot.dot(colorSample, { x: "r", y: "g", fill: "hex", r: 5, stroke: "black", strokeWidth: 0.5 }) ] })}

HCL: Top-Down Cylinder

${Plot.plot({ width: 400, height: 400, x: { domain: [-150, 150], label: "← Hue Angle / Chroma Radius →" }, y: { domain: [-150, 150], label: "↑" }, marks: [ // Draw a background circle to show the theoretical cylinder boundary Plot.dot([{ x: 0, y: 0 }], { r: 150, fill: "none", stroke: "lightgray" }), // Plot our colors Plot.dot(colorSample, { x: "hcl_x", y: "hcl_y", fill: "hex", r: 5, stroke: "black", strokeWidth: 0.5 }) ] })}

`32:[] 2f:{"id":"810c471a72a22901","slug":null,"title":"R colour tools FAQs and demos","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2026-02-21T08:21:37.710Z","update_time":"$D2026-02-21T08:43:14.076Z","view_time":null,"first_public_time":"$D2026-02-23T12:30:55.140Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"2ea51ae9f4ab4210","login":"cdt2025","name":"cdt2025","avatar_url":"https://avatars-next.observableusercontent.com/475868952785337836223b6e7eb448d9295cbc5a0f11bbddc473666834ca62bf","tier":"education_2026","bio":""},"version":71,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"623e3d07e6ef1476","login":"ekuma-chidi","name":"Ekuma Chidi","avatar_url":"https://avatars-next.observableusercontent.com/31d874dbfecd2e73b0444891998daab7dd3fcac36d6257b5e403eae147a02c6c","tier":null,"bio":""}],"members":[{"type":"individual","id":"623e3d07e6ef1476","login":"ekuma-chidi","name":"Ekuma Chidi","avatar_url":"https://avatars-next.observableusercontent.com/31d874dbfecd2e73b0444891998daab7dd3fcac36d6257b5e403eae147a02c6c","tier":null,"role":"editor"},{"type":"team","id":"2ea51ae9f4ab4210","login":"cdt2025","name":"cdt2025","avatar_url":"https://avatars-next.observableusercontent.com/475868952785337836223b6e7eb448d9295cbc5a0f11bbddc473666834ca62bf","tier":"education_2026","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"R colour tools FAQs and demos","cells":[{"id":0,"value":"# R colour tools FAQs and demos","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"## Exploring Color Spaces and Accessibility\nIn R, we needed to install several packages to access advanced color palettes and simulate color blindness. In Observable, **D3.js** provides a massive suite of color tools by default. Let's explore how to generate palettes, view their properties, and test them for accessibility.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"### Setting up Base Palettes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"// 1. Housekeeping: Set our number of colors\nn_colours = 12\n\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"// 2. Create our base palettes using D3 interpolators\npalettes = {\n // d3.quantize pulls a specific number of colors evenly from a continuous scale\n const rainy = d3.quantize(d3.interpolateRainbow, n_colours);\n \n // For greyscale, we interpolate from black (0) to white (255)\n const b_and_w = d3.quantize(t => `rgb(${t*255}, ${t*255}, ${t*255})`, n_colours);\n\n return { rainy, b_and_w };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"### Viewing Palettes - A Reusable Helper","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":15,"value":"viewPalette = (colorArray) => {\n return htl.html`

\n ${colorArray.map(c => htl.html`

`)}\n

`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"### Viewing the Base Palettes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":19,"value":"htl.html`

\n Rainbow Palette:\n ${viewPalette(palettes.rainy)}\n Greyscale Palette:\n ${viewPalette(palettes.b_and_w)}\n

\n Original Rainbow:\n ${viewPalette(palettes.rainy)}\n \n Simulated Deuteranopia (Red-Green Blindness):\n ${viewPalette(palettes.rainy.map(color => blinder.deuteranopia(color)))}\n

\n ${\n Array.from({length: 10}).reduce((acc, _, i) => {\n // 1. For the first row, use the base rainy palette\n if (i === 0) return [palettes.rainy];\n \n // 2. For subsequent rows, apply the simulation to the PREVIOUS row\n const previousRow = acc[i - 1];\n const nextRow = previousRow.map(color => blinder.deuteranopia(color));\n \n acc.push(nextRow);\n return acc;\n }, []).map(row => viewPalette(row)) \n }\n

\n 1. Viridis (Continuous, perceptually uniform):\n ${viewPalette(d3.quantize(d3.interpolateViridis, n_colours))}\n \n 2. Magma (Another Viridis alternative):\n ${viewPalette(d3.quantize(d3.interpolateMagma, n_colours))}\n\n 3. Paired (Categorical, from RColorBrewer):\n ${viewPalette(d3.schemePaired.slice(0, n_colours))}\n

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"## Investigating Color Space Values\nTo get the raw mathematical values of a color (RGB, HSV/HSL, or HCL), D3 provides extremely easy converter functions: \\`d3.rgb()\\`, \\`d3.hsl()\\`, and \\`d3.hcl()\\`.\n\nObservable will automatically display arrays of objects as highly readable data tables!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":33,"value":"colorData = palettes.rainy.map((hex, i) => {\n const rgb = d3.rgb(hex);\n const hsl = d3.hsl(hex);\n const hcl = d3.hcl(hex);\n \n return {\n Color: hex,\n R: Math.round(rgb.r), G: Math.round(rgb.g), B: Math.round(rgb.b),\n Hue: Math.round(hcl.h), Chroma: Math.round(hcl.c), Luminance: Math.round(hcl.l)\n };\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"## The Degradation Loop\nWhat happens if we simulate color blindness on a color that has *already* been simulated? In R, you used a \\`for\\` loop and \\`par(mfcol)\\`. Here, we'll map an array iteratively and stack the generated HTML elements.`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":37,"value":"htl.html`

\n ${(() => {\n // 1. Start a list of rows with our original palette at the top\n let rows = [palettes.rainy];\n\n // 2. Loop 9 times to generate the simulated rows (making 10 rows total)\n for (let i = 1; i < 10; i++) {\n // Grab the row we just made\n let previousRow = rows[i - 1];\n\n // Apply the blinder simulation to that previous row\n let nextRow = previousRow.map((color) => blinder.deuteranopia(color));\n\n // Add the newly simulated row to our list\n rows.push(nextRow);\n }\n\n // 3. Finally, render every row using our viewPalette helper!\n return rows.map((row) => viewPalette(row));\n })()}\n

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"#### Interactive Dropdown to Simulate different conditions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":64,"value":"viewof simulationType = Inputs.select(\n new Map([\n [\"Deuteranopia (Red-Green Blind)\", \"deuteranopia\"],\n [\"Protanopia (Red-Blind)\", \"protanopia\"],\n [\"Tritanopia (Blue-Blind)\", \"tritanopia\"],\n [\"Achromatopsia (Total Color Blindness)\", \"achromatopsia\"]\n ]),\n { \n value: \"deuteranopia\", \n label: \"Choose a condition:\" \n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"htl.html`

\n ${(() => {\n let rows = [palettes.rainy];\n\n for (let i = 1; i < 10; i++) {\n let previousRow = rows[i - 1];\n\n // We dynamically call the blinder function based on the dropdown choice!\n let nextRow = previousRow.map((color) => blinder[simulationType](color));\n\n rows.push(nextRow);\n }\n\n return rows.map((row) => viewPalette(row));\n })()}\n

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"## Visualizing the RGB Cube vs. the HCL Cylinder\nTo see the difference in these spaces, let's generate 1,000 random colors. \n\n1. **Top-down on the RGB Cube:** We will plot Green vs. Red. We expect to see a square shape because RGB is bounded by a rigid box (0 to 255 on all sides).\n2. **Top-down on the HCL Cylinder:** We will use a bit of trigonometry to convert Hue (angle) and Chroma (radius) into X and Y coordinates. We expect to see a circular shape because HCL is cylindrical!`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":41,"value":"colorSample = Array.from({ length: 1000 }, () => {\n // 1. Generate a random RGB color\n const r = Math.random() * 255;\n const g = Math.random() * 255;\n const b = Math.random() * 255;\n const hex = d3.rgb(r, g, b).formatHex();\n\n // 2. Convert it to HCL\n const hcl = d3.hcl(hex);\n\n // 3. Convert HCL to X/Y coordinates using trigonometry\n // (Hue is the angle in degrees, Chroma is the distance from center)\n const radians = (hcl.h || 0) * (Math.PI / 180);\n const hcl_x = (hcl.c || 0) * Math.cos(radians);\n const hcl_y = (hcl.c || 0) * Math.sin(radians);\n\n return { hex, r, g, b, hcl_x, hcl_y };\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 30:"$2f:body"