31:T405,D3, and therefore Observable, has some built-in [colour interpolators](https://github.com/d3/d3-interpolate/blob/main/README.md#color-spaces) that can create the intermediate colours that blend between a start and end colour. Given a start and end colour, `d3.interpolateRgb(start,end)` will provide a function that accepts a value `t` in the range [0,1] to generate a new colour that blends them, weighted by how close `t` is to 0 (the start colour) or 1 (the end colour). Those intermediate colours are created by a linear interpolation of the red, green and blue components of both colour endpoints. For example we could draw vertical lines in sequence gradually changing `t` from 0 to 1 to generate the following continuously varying colour ramp from start to end colour along that red-green-blue interpolated colour trajectory (see `swatch` in the appendix for the code that does this using this [renderer](https://observablehq.com/@jwolondon/renderer), but any graphics output that uses SVG, Canvas or WebGL should work).32:T45e,This can be useful for mapping as long as the reader has some sense of how the mixed colours reflect the three values being encoded. For example, suppose we wished to map the [types of housing tenure](https://observablehq.com/@jwolondon/census-2021-explorer) in London (by electoral Ward). If we calculate the proportion of tenancies that are owner-occupied, social housing and private rented, a ternary colour mixing can show how the tenure mix varies geographically. Endpoint colours act as useful reference points and with most interpolators, low-saturation 'middle' colours help to show a more mixed set of tenancies. Where it is important to see areas dominated by a single tenancy type, multiplicative blending (see 2.3 and `blendWMult` above) can be useful as more mixed regions quickly merge into darker colours. Where two-way combinations are important to recognise (e.g. social housing and private renting, but little owner occupation), a pigment mixer usch as `interpolateSpectral` in combination with RYB or CMY endpoints is more useful as each of the three pairwise mixes has its own identifiable hue.33:T485,{ const wards = await d3 .json("https://gicentre.github.io/data/london/wards.json") .then((feats) => topojson.feature(feats, feats.objects.wards)); const atts = await d3 .csv("https://gicentre.github.io/data/datavis/tenureWard.csv", d3.autoType) .then((obj) => obj.filter((ward) => ward.region == "E12000007")); const lookup = new Map(); atts.forEach((ward) => lookup.set(ward.code, [ward.pOwn, ward.pSocRent, ward.pPriRent]) ); // Ternary colour function: Find the tenure triplet for a given region and generate mixed colour. const clr = (att) => ternary(clrSelect[0], lookup.get(att), clrSelect[1]); // Draw map polygons const r = new Renderer(740, 470, "svg") .translate(-70, 0) .setProjection(d3.geoTransverseMercator().rotate([2, 0])) .stroke("white") .strokeWidth(0.1) .geoShape(wards, "properties.code", clr); // Draw ternary legend r.translate(550, 320).scale(0.3); ternaryLegend({ r: r, gridLines: true, axisLabels: false, labelSize: 30, labels: ["Owner", "Social", "Private rent"], clrs: clrSelect[0], interp: clrSelect[1] }); return r.render(); }34:T9b4,tiling = { const [w, h] = [640, 400]; const r = new Renderer(640, 400, "svg").strokeWidth(0.3); const clrs = sequence(clrScheme, d3.interpolateLab); const cube = (x, y, s) => { const [c1, c2, c3] = [ clrs((x * (2 * h - y)) / (5 * h * w)), clrs(0.5 + (x * y) / (7 * w * h)), clrs(0.95 - x / (8 * w)) ]; const pc = 0.25 + Math.random() / 10; r.fill(c1) .polygon([ [x, y], [x + s * root3over2, y - 0.5 * s], [x, y - s], [x - s * root3over2, y - 0.5 * s], [x, y] ]) .fill(c2) .polygon([ [x, y], [x + s * root3over2, y - 0.5 * s], [x + s * root3over2, y + 0.5 * s], [x, y + s], [x, y] ]) .fill(c3) .polygon([ [x, y], [x, y + s], [x - s * root3over2, y + 0.5 * s], [x - s * root3over2, y - 0.5 * s], [x, y] ]) .fill(c3) .polygon([ [x + s * root3over2 * pc, y + s * 0.5 * pc], //tl [x + s * root3over2 * (1 - pc), y - s * (0.5 - 1.5 * pc)], // tr [x + s * root3over2 * (1 - pc), y - s * (0.5 * pc - 0.5)] // br ]) .fill(c1) .polygon([ [x + s * root3over2 * (1 - pc), y - s * (0.5 * pc - 0.5)], // br [x + s * root3over2 * pc, y + s * (1 - 1.5 * pc)], // bl, [x + s * root3over2 * pc, y + s * 0.5 * pc] // tl ]) .fill(c2) .polygon([ [x - s * root3over2 * pc, y + s * 0.5 * pc], // tl [x - s * root3over2 * (1 - pc), y - s * (0.5 - 1.5 * pc)], // tr [x - s * root3over2 * (1 - pc), y - s * (0.5 * pc - 0.5)] // br ]) .fill(c1) .polygon([ [x - s * root3over2 * (1 - pc), y - s * (0.5 * pc - 0.5)], // br [x - s * root3over2 * pc, y + s * (1 - 1.5 * pc)], // bl, [x - s * root3over2 * pc, y + s * 0.5 * pc] // tl ]) .fill(c2) .polygon([ [x - s * root3over2 * (1 - 2 * pc), y - 0.5 * s], // l [x, y - s * (1 - pc)], // t, [x, y - s * pc] // b ]) .fill(c3) .polygon([ [x, y - s * (1 - pc)], // t, [x, y - s * pc], //b [x + s * root3over2 * (1 - 2 * pc), y - 0.5 * s] // r ]); }; const s = 20; let offset = false; for (let y = 0; y < h + s; y += 1.5 * s) { for (let x = 0; x < w + s; x += 2 * s * root3over2) { cube(x + (offset ? s * root3over2 : 0), y, s); } offset = !offset; } return r.render(); }35:T484,function sqVenn( clr1, clr2, clr3, interp = d3.interpolateRgb, r = new Renderer(150, 150, "svg") ) { const extent = [ [0, 0], [5, 5] ]; // Set intersection boundaries const s1 = [ [0, 0], [3, 0], [3, 1], [2, 1], [2, 2], [1, 2], [1, 3], [0, 3] ]; const s2 = [ [3, 1], [5, 1], [5, 4], [4, 4], [4, 2], [3, 2] ]; const s3 = [ [1, 3], [2, 3], [2, 4], [4, 4], [4, 5], [1, 5] ]; const s12 = [ [2, 1], [3, 1], [3, 2], [2, 2] ]; const s13 = [ [1, 2], [1, 3], [2, 3], [2, 2] ]; const s23 = [ [3, 2], [4, 2], [4, 4], [2, 4], [2, 3], [3, 3] ]; const s123 = [ [2, 2], [3, 2], [3, 3], [2, 3] ]; return r .fit(extent) .stroke() .fill(clr1) .polygon(s1) .fill(clr2) .polygon(s2) .fill(clr3) .polygon(s3) .fill(mix([clr1, clr2], interp)) .polygon(s12) .fill(mix([clr1, clr3], interp)) .polygon(s13) .fill(mix([clr2, clr3], interp)) .polygon(s23) .fill(mix([clr1, clr2, clr3], interp)) .polygon(s123); }36:Tb5c,function ternaryLegend(options) { const defaults = { r: new Renderer(460, 460 * root3over2, "svg"), padding: 32, labelSize: 12, gridLines: true, axisLabels: true, labels: ["A", "B", "C"], interp: d3.interpolateRgb, clrs: ["#fc333e", "#2f910e", "#4864f4"] }; options = Object.assign({}, defaults, options); const r = options.r; r.fit( [ [0, 0], [1, root3over2] ], options.padding ).stroke(); const inc = 0.05; const [c1, c2, c3] = options.clrs; const clr = ([a, b, c]) => options.interp(options.interp(c1, c2)(a + b == 0 ? 0 : b / (a + b)), c3)(c); // Fill in colours of the ternary plot space const sq = ([x, y], s) => [ [x + s, y - s * root3over2], [x + s, y + s * root3over2], [x - s, y + s * root3over2], [x - s, y - s * root3over2] ]; const pointAt = (pos) => r.fill(clr(pos)).polygon(sq(triToCartesian(pos), inc / 1.9)); r.push().clip([ triToCartesian([1, 0, 0]), triToCartesian([0, 1, 0]), triToCartesian([0, 0, 1]) ]); for (let a = 0; a <= 1.0001; a += inc) { for (let b = 0; b <= 1.0001 - a; b += inc) { pointAt([a, b, 1 - (a + b)]); } } r.pop(); // Show gridlines if specified in options if (options.gridLines) { r.strokeWidth(0.5).stroke("black"); for (let i = 0; i <= 1; i += 0.1) { r.line([triToCartesian([i, 0, 1 - i]), triToCartesian([i, 1 - i, 0])]); r.line([triToCartesian([1 - i, i, 0]), triToCartesian([0, i, 1 - i])]); r.line([triToCartesian([0, 1 - i, i]), triToCartesian([1 - i, 0, i])]); } } // Show axis labels if specified in options if (options.axisLabels) { r.stroke("black").strokeWidth(0.05).textSize(6); for (let i = 0.1; i <= 0.9; i += 0.1) { r.textAlign("right") .textBaseline("middle") .fill(clr([1, 0, 0])) .text(Math.round(i * 100) + "% ", ...triToCartesian([i, -0.01, 1 - i])); r.textAlign("middle") .textBaseline("top") .fill(clr([0, 1, 0])) .text(Math.round(i * 100) + "%", ...triToCartesian([1 - i, i, -0.01])); r.textAlign("left") .textBaseline("middle") .fill(clr([0, 0, 1])) .text(Math.round(i * 100) + "%", ...triToCartesian([-0.01, 1 - i, i])); } } // Show the three labels if specified in options if (options.labels != null && options.labels.length >= 3) { r.stroke("black") .strokeWidth(0.05) .textSize(options.labelSize) .textAlign("right") .textBaseline("top") .fill(clr([1, 0, 0])) .text(options.labels[0], ...triToCartesian([1, 0, 0])) .textAlign("left") .fill(clr([0, 1, 0])) .text(options.labels[1], ...triToCartesian([0, 1, 0])) .textAlign("middle") .textBaseline("bottom") .fill(clr([0, 0, 1])) .text(options.labels[2], ...triToCartesian([0, 0, 1])); } return r.render(); }37:[] 2f:{"title":"Hello Colour Mixing","cells":[{"id":0,"value":"# Hello Colour Mixing\n\n_Blending colours with d3's [colour interpolators](https://github.com/d3/d3-interpolate/blob/main/README.md#color-spaces), [spectral.js](https://github.com/rvanwijnen/spectral.js) and [mixbox pigment simulator](https://github.com/scrtwpns/mixbox)_.","pinned":false,"hidden":false,"mode":"md"},{"id":216,"value":"For data visualization and generative art, it can sometimes be useful to generate colours programmatically that combine a range of specified colours. One way of achieving this is to mix colours that blend from one colour to the next.","pinned":false,"hidden":false,"mode":"md"},{"id":224,"value":"md`Suppose we have two colours ⬤ ⬤ and we would like to create a palette that blends seamlessly between them with a _colour interpolator_.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":289,"value":"## 1. Built-in colour interpolators","pinned":false,"hidden":false,"mode":"md"},{"id":1325,"value":"### 1.1 RGB colour mixing","pinned":false,"hidden":false,"mode":"md"},{"id":248,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":79,"value":"swatch(d3.interpolateRgb(...blueGold))","pinned":false,"hidden":false,"mode":"ojs"},{"id":270,"value":"d3.interpolateRgb(...blueGold)(0.5)","pinned":true,"hidden":false,"mode":"ojs"},{"id":606,"value":"We are not limited to mixing just two colours. We can break down any mix of colours into a sequence of pairwise mixings. For example to blend red, yellow and blue we can first blend red and yellow with an equal weighting (`t=0.5`), then blend that new colour with blue, weighting towards the first mixed colour (`t=0.333`). And more generally, to mix the _n_th colour with the preceding mixed _n-1_th colour, the two colours are interpolated with `t=1/n`. This is not a perfect solution for interpolators that proceed in non-linear increments across a colour space, but it sufficiently accurate for most purposes.","pinned":false,"hidden":false,"mode":"md"},{"id":617,"value":"function mix(clrs, interp = d3.interpolateRgb) {\n return clrs\n .slice(1)\n .reduce((mixedClr, clr, i) => interp(mixedClr, clr)(1 / (i + 2)), clrs[0]);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":589,"value":"sqVenn(...ryb).render()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1322,"value":"### 1.2 HSL colour mixing","pinned":false,"hidden":false,"mode":"md"},{"id":253,"value":"Interpolating in 'rgb-space' is not the only way we can mix colours. The examples above contain a large middle area of muddy browns and greys that may not be desirable, for example when performing data visualization.\n\nInstead we can use one of the other d3 interpolators such as `d3.interpolateHsl(start,end)` that moves through 'hue-saturation-lightness space' instead of RGB space:","pinned":false,"hidden":false,"mode":"md"},{"id":789,"value":"markers(blueGold)","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"value":"swatch(d3.interpolateHsl(...blueGold))","pinned":false,"hidden":false,"mode":"ojs"},{"id":280,"value":"d3.interpolateHsl(...blueGold)(0.5)","pinned":true,"hidden":false,"mode":"ojs"},{"id":739,"value":"Here we have lost that muddy space in the middle, but have produced an entirely different sequence of brighter intermediate colours. This is because colour hue in HSL space is 'circular' giving a choice of trajectories through the colour space. \n\nSuppose we wished to interpolate between the two colours indicated below. The path of intermediate colours could be the 'short' route via red, or the 'long' route via green. Whether the interpolation takes the short or long route can be controlled by selecting either `d3.interpolateHsl` or `d3.interpolateHslLong`:","pinned":false,"hidden":false,"mode":"md"},{"id":741,"value":"{\n const r = new Renderer(640, 250, \"svg\")\n .fit([\n [-1, -1],\n [1, 1]\n ])\n .translate(180, 0)\n .stroke();\n\n for (let hue = 0; hue < 360; hue += 1) {\n r.fill(`hsl(${hue},100%,35%)`).ellipse(...clrToScreen(hue), 0.1);\n }\n r.fill(\"hsl(240,100%,35%)\")\n .ellipse(...clrToScreen(240, 0.95), 0.1)\n .fill(\"hsl(30,100%,35%)\")\n .ellipse(...clrToScreen(30, 0.95), 0.1)\n .stroke(\"white\")\n .fill(\"black\")\n .ellipse(...clrToScreen(240), 0.03)\n .ellipse(...clrToScreen(30), 0.03)\n .stroke(\"black\")\n .strokeWidth(0.5)\n .line([clrToScreen(240), clrToScreen(30)]);\n\n return r.render();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":819,"value":"markers([\"hsl(240,100%,35%)\", \"hsl(30,100%,35%)\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":804,"value":"swatches(\"hsl(240,100%,35%)\", \"hsl(30,100%,35%)\", [\n [d3.interpolateHsl, \"d3.interplateHsl()\"],\n [d3.interpolateHslLong, \"d3.interolateHslLong()\"]\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":875,"value":"Care should be taken when mixing multiple colours in HSL space because of these alternative long and short routes. This can in some circumstances be affected by the order in which interpolation happens. ","pinned":false,"hidden":false,"mode":"md"},{"id":1766,"value":"sqVenns(ryb, d3.interpolateHsl)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1357,"value":"Note how the central colour based on mixing all three colours varies between a pink colour when mixed in red-yellow-blue or blue-red-yellow order, but a green colour when mixed in a yellow-blue-red order as the interpolator traverses the circular colour space in different directions.","pinned":false,"hidden":false,"mode":"md"},{"id":1446,"value":"And there is further, more subtle issue illustrated by the long trajectory:","pinned":false,"hidden":false,"mode":"md"},{"id":1442,"value":"markers(blueGold)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1440,"value":"swatch(d3.interpolateHslLong(...blueGold))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1452,"value":"Although interpolation between the two end points is linear, the sequence of colours does not appear to change uniformly. The palette is dominated by a large green space and there appear two narrow bands in the cyan and yellow regions. This is due to our uneven sensitivity to different parts of the visible light spectrum.","pinned":false,"hidden":false,"mode":"md"},{"id":1353,"value":"### 1.3 Perceptually uniform colour mixing","pinned":false,"hidden":false,"mode":"md"},{"id":263,"value":"One approach to dealing with our uneven sensitivity to different colours is to use a so-called [perceptually uniform colour space](https://programmingdesignsystems.com/color/perceptually-uniform-color-spaces/). That way, as colours are linearly interpolated between endpoints, they progress in approximately consistent steps as we see them. D3 provides `d3.interpolateLab(start,end)` to do this in perceptually uniform [CIE Lab space](https://en.wikipedia.org/wiki/CIELAB_color_space):","pinned":false,"hidden":false,"mode":"md"},{"id":1377,"value":"markers(blueGold)","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"swatch(d3.interpolateLab(...blueGold))","pinned":false,"hidden":false,"mode":"ojs"},{"id":284,"value":"d3.interpolateLab(...blueGold)(0.5)","pinned":true,"hidden":false,"mode":"ojs"},{"id":268,"value":"Notice here that is no narrow bands of rapidly changing colour. This can be useful in data visualizations where we need to estimate some magnitude using colour.","pinned":false,"hidden":false,"mode":"md"},{"id":1420,"value":"For comparison, here are the standard D3 colour interpolators side by side:","pinned":false,"hidden":false,"mode":"md"},{"id":1422,"value":"markers(blueGold)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1416,"value":"swatches(...blueGold)","pinned":false,"hidden":false,"mode":"ojs"},{"id":287,"value":"## 2. Pigment Mixing","pinned":false,"hidden":false,"mode":"md"},{"id":403,"value":"An alternative to the navigations of colour spaces above is to model the physics of light interacting with pigments. In other words to simulate the blending of paints as if they were physical materials. This has an obvous advantage when wishing to create 'realistic' paint mixing, and can produce more pleasing and predictable interpolated colours.\n\nPigment mixing requires the use of (small) external libraries to do the modelling for us. Below are three example libraries.","pinned":false,"hidden":false,"mode":"md"},{"id":405,"value":"### 2.1 Spectral.js","pinned":false,"hidden":false,"mode":"md"},{"id":415,"value":"[Spectral.js](https://github.com/rvanwijnen/spectral.js) provides a fast pigment mixing interpolator based on [Kubelka-Munk theory](https://en.wikipedia.org/wiki/Kubelka–Munk_theory). The physics is complicated, but the use of the interpolator in Observable pages is simple. First import the `spectral.js` library:","pinned":false,"hidden":false,"mode":"md"},{"id":6,"value":"spectral = require(\"spectral.js@2/spectral.js\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":421,"value":"The standard continuous interpolator is called with the `mix` function that takes three parameters – the start and end colour and the wighting `t` in the range [0,1] to determine where between the two end points the interpolated colour is to be generated. The result is a hex string representing the interpolated colour.","pinned":false,"hidden":false,"mode":"md"},{"id":423,"value":"spectral.mix(...blueGold, 0.5)","pinned":true,"hidden":false,"mode":"ojs"},{"id":426,"value":"For consistency with the standard D3 colour interpolators it is convenient to create an equivalent function that given two colours, will return an interpolator function taking a single `t` parameter.","pinned":false,"hidden":false,"mode":"md"},{"id":70,"value":"function interpolateSpectral(clr1, clr2) {\n return (t = 0.5) =>\n spectral.mix(d3.color(clr1).formatHex(), d3.color(clr2).formatHex(), t);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":435,"value":"That way you can use it as a plug-in replacement for any standard d3 colour interpolator:","pinned":false,"hidden":false,"mode":"md"},{"id":438,"value":"markers(blueGold)","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"swatch(interpolateSpectral(...blueGold))","pinned":false,"hidden":false,"mode":"ojs"},{"id":546,"value":"Notice the transition through green, which is what you would get when mixing blue and yellow paints, but unlike `d3.interpolateRgb()` or `d3.interpolateHsl()` there is no muddy brown nor any over-saturated colours in that transition.","pinned":false,"hidden":false,"mode":"md"},{"id":1384,"value":"As with the standard d3 interpolators, we can provide this pigment interpolator when mixing multiple colours. There is a small effect due to the mixing order, but this is relatively mild (compare the colours of the central 3-pigment mix below).","pinned":false,"hidden":false,"mode":"md"},{"id":1770,"value":"sqVenns(ryb, interpolateSpectral)","pinned":false,"hidden":false,"mode":"ojs"},{"id":407,"value":"### 2.2 Mixbox","pinned":false,"hidden":false,"mode":"md"},{"id":505,"value":"For a more thorough modelling of pigment mixing, [mixbox](https://github.com/scrtwpns/mixbox) provides a suitable interpolator (but note the [licence](https://github.com/scrtwpns/mixbox/blob/master/LICENSE) is for non-commercial use only). It can be imported into Observable pages as follows:","pinned":false,"hidden":false,"mode":"md"},{"id":166,"value":"mixbox = require(\"mixbox@2/mixbox.js\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":510,"value":"The interpolator is called via the `lerp` function, which returns the red-green-blue values for the interpolated colour along with a function for converting it to a string. For example:","pinned":false,"hidden":false,"mode":"md"},{"id":512,"value":"mixbox.lerp(...blueGold, 0.5).toString()","pinned":true,"hidden":false,"mode":"ojs"},{"id":519,"value":"For consistency with the other colour interpolation functions we again create a function that will provide an interpolator requiring a single `t` parameter and whose interpolated result is a hex string:","pinned":false,"hidden":false,"mode":"md"},{"id":175,"value":"function interpolateMixbox(clr1, clr2) {\n const rgbToHex = (r, g, b) =>\n \"#\" + ((1 << 24) | (r << 16) | (g << 8) | b).toString(16).slice(1);\n return (t = 0.5) => rgbToHex(...mixbox.lerp(clr1, clr2, t));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":529,"value":"markers(blueGold)","pinned":false,"hidden":false,"mode":"ojs"},{"id":177,"value":"swatch(interpolateMixbox(...blueGold))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1401,"value":"Again, we can use this interpolator to mix arbitrary combinations of other colours, and here the order of mixing has little effect:","pinned":false,"hidden":false,"mode":"md"},{"id":1761,"value":"sqVenns(ryb, interpolateMixbox)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1177,"value":"### 2.3 Subtractive CMYK mixing","pinned":false,"hidden":false,"mode":"md"},{"id":1229,"value":"To simulate mixing of printed colours using cyan-magenta-yellow-key (CMYK) we can blend colours by multiplying their colour component values. This simulates a 'subtractive' model of colour mixing where the more colours that are mixed, the darker the resulting colour. It can be useful for simulating halftone, colour offset printing and silk screen printing.\n\nThe [chroma.js library](https://gka.github.io/chroma.js/) contains a range of lower level colour functions that allow us to combine colours in this way. To import the library:","pinned":false,"hidden":false,"mode":"md"},{"id":1180,"value":"chroma = import(\"https://unpkg.com/chroma-js@3.0.0/index.js?module\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1231,"value":"Using [chroma.blend()](https://gka.github.io/chroma.js/#chroma-blend) with the `multiply` option we can create a blend function in a similar format to the other colour interpolators:","pinned":false,"hidden":false,"mode":"md"},{"id":1206,"value":"function blendMult(clr1, clr2) {\n return (t) => chroma.blend(clr1, clr2, \"multiply\").hex();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1775,"value":"sqVenns(cmy, blendMult)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1238,"value":"Note that this custom `blendMult()` function doesn't make use of the `t` parameter, as overlaying CMYK inks with multiplicaton doesn't require any weighting towards one ink or the other (we get the same blended red colour regardless of the weighting towards the yellow or magenta end points). ","pinned":false,"hidden":false,"mode":"md"},{"id":1244,"value":"markers([cmy[2], cmy[1]])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1241,"value":"swatch(blendMult(cmy[2], cmy[1]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1249,"value":"To create a continuous interpolation between the two that is inspired by the CMYK mixing process we could create a custom function to weight the interpolated colour between the endpoints and their multiplied colour:","pinned":false,"hidden":false,"mode":"md"},{"id":1275,"value":"function blendWMult(clr1, clr2) {\n const midClr = chroma.blend(clr1, clr2, \"multiply\").hex();\n return (t = 0.5) =>\n t < 0.5\n ? d3.interpolateRgb(clr1, midClr)(t * 2)\n : d3.interpolateRgb(midClr, clr2)(t * 2 - 1);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1289,"value":"markers([cmy[2], cmy[1]])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1286,"value":"swatch(blendWMult(cmy[2], cmy[1]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":534,"value":"The various pigment interpolators can be compared side by side with D3's RGB interpolator for reference:","pinned":false,"hidden":false,"mode":"md"},{"id":1396,"value":"markers(blueGold)","pinned":false,"hidden":false,"mode":"ojs"},{"id":536,"value":"swatches(...blueGold, [\n [d3.interpolateRgb, \"interpolateRgb()\"],\n [interpolateSpectral, \"interpolateSpectral()\"],\n [interpolateMixbox, \"interpolateMixbox()\"],\n [blendWMult, \"blendWMult()\"]\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1409,"value":"## 3. Applications","pinned":false,"hidden":false,"mode":"md"},{"id":1411,"value":"### 3.1 Sequential Colour Schemes\n\nWe can easily create new colour schemes for data visualization by chaining together pairwise colour interpolations. We can create a general purpose function that will return a function to interpolate between any number of input colours when given a _t_ value in the range [0,1]:","pinned":false,"hidden":false,"mode":"md"},{"id":1499,"value":"function sequence(clrs, interp = d3.interpolateRgb) {\n const interps = [];\n for (let i = 0; i < clrs.length - 1; i++) {\n interps.push(interp(clrs[i], clrs[i + 1]));\n }\n\n return (t) => {\n const scaledT = d3.scaleLinear().range([0, clrs.length - 1])(t);\n const intT = Math.min(clrs.length - 2, Math.floor(scaledT));\n return interps[intT](scaledT - intT);\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":3154,"value":"markers(oranges, 10)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3158,"value":"swatch(sequence(oranges))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2578,"value":"Here are a few examples inspired by palettes used in works of art. \n\nBonnard's [The Green Blouse](https://www.metmuseum.org/art/collection/search/489304) is dominated by the low saturation greens, lilacs and yellows of the rural southern France:","pinned":false,"hidden":false,"mode":"md"},{"id":1504,"value":"markers(bonnard, 10)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1555,"value":"swatch(sequence(bonnard))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2571,"value":"Inspired by Matisse's [The Dessert: Harmony in Red (The Red Room)](https://en.wikipedia.org/wiki/The_Dessert:_Harmony_in_Red_(The_Red_Room%29), a sequence of bolder colours:","pinned":false,"hidden":false,"mode":"md"},{"id":2558,"value":"markers(matisse, 10)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2568,"value":"swatch(sequence(matisse))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2588,"value":"The Danish painter Vilhelm Hammershøi was known for his muted colour palettes and precise style. Inspired by [Interior Strandgade 30](https://sammlung.staedelmuseum.de/en/work/interior-strandgade-30), this muted palette provides a richer alternative to a sequential grey scale:","pinned":false,"hidden":false,"mode":"md"},{"id":2595,"value":"markers(hammershøi, 10)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2597,"value":"swatch(sequence(hammershøi))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2602,"value":"Turner's [The Burning of the Houses of Lords and Commons, 16th October, 1834](https://en.wikipedia.org/wiki/The_Burning_of_the_Houses_of_Lords_and_Commons) provides a vibrant and contrasting hot and cold colour palette:","pinned":false,"hidden":false,"mode":"md"},{"id":1890,"value":"markers(turner, 10)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1618,"value":"swatch(sequence(turner, d3.interpolateLab))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1903,"value":"### 3.2 Ternary plot colour encoding for datavis\n\nRather than mix colours by interpolating by pairs of endpoint colours we can interpolate triplets of colours to create arbitrary colour spaces. These spaces can be used to create coloured [ternary plots](https://en.wikipedia.org/wiki/Ternary_plot) where three values that sum to some constant are represented along 3 axes at 60 degrees to one another.\n\nAssuming the three values are scaled to sum to 1, a simple function can weight a given triplet of colours and interpolator to produce a 3-way mix:","pinned":false,"hidden":false,"mode":"md"},{"id":2631,"value":"function ternary([clr1, clr2, clr3], [a, b, c], interp = d3.interpolateRgb) {\n return interp(interp(clr1, clr2)(a + b == 0 ? 0 : b / (a + b)), clr3)(c);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2291,"value":"ternaryLegend({ interp: d3.interpolateLab, labelSize: 24 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":2627,"value":"$32","pinned":false,"hidden":false,"mode":"md"},{"id":2205,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":2487,"value":"viewof clrSelect = Inputs.form([\n Inputs.radio(\n new Map([\n [\"Red-green-blue\", rgb],\n [\"Red-yellow-blue\", ryb],\n [\"Cyan-magenta-yellow\", cmy]\n ]),\n {\n label: \"Colour triplet\",\n value: ryb,\n format: ([label, val]) => label\n }\n ),\n Inputs.select(\n new Map([\n [\"d3.interpolateRgb\", d3.interpolateRgb],\n [\"d3.interpolateLab\", d3.interpolateLab],\n [\"d3.interpolateHslLong\", d3.interpolateHslLong],\n [\"d3.interpolateHclLong\", d3.interpolateHclLong],\n [\"interpolateSpectral\", interpolateSpectral],\n [\"interpolateMixbox\", interpolateMixbox],\n [\"blendWMult\", blendWMult]\n ]),\n { value: d3.interpolateLab, label: \"Interpolator\" }\n )\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1905,"value":"### 3.3 Generative Art","pinned":false,"hidden":false,"mode":"md"},{"id":3172,"value":"With programmable choices from various palettes we can colour generative designs, sometimes varying colour with subtlety, sometimes less so.","pinned":false,"hidden":false,"mode":"md"},{"id":2687,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":3123,"value":"viewof clrScheme = Inputs.select(\n new Map([\n [\"blueGold\", blueGold],\n [\"rgb\", rgb],\n [\"ryb\", ryb],\n [\"cmy\", cmy],\n [\"oranges\", oranges],\n [\"metalic\", metalic],\n [\"Bonnard\", bonnard],\n [\"Matisse\", matisse],\n [\"Hammershøi\", hammershøi],\n [\"Turner\", turner]\n ]),\n {\n value: hammershøi,\n label: \"Colour scheme\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1632,"value":"## 4. Imperfect Colour Perception","pinned":false,"hidden":false,"mode":"md"},{"id":1634,"value":"The discussion above assumes that we all possess the same ability to perceive colours. And of course this isn't necessarily true. There are a multitude of 'colour blindnesses' and we may have them to a varying degree. \n\nYou can simulate the three most common forms of colour vision deficiency with this [widget from Ian Lyttle](https://observablehq.com/@ijlyttle/cvd-widget). To use it, import the following:","pinned":false,"hidden":false,"mode":"md"},{"id":1636,"value":"import { inputCvd, filterCvd } from \"@ijlyttle/cvd-widget\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1655,"value":"And the following input widgets become available for setting the type and severity:","pinned":false,"hidden":false,"mode":"md"},{"id":1643,"value":"viewof cvd = inputCvd({ condition: \"none\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":1657,"value":"To apply the filtering to all the colour on an Observable page, call `filterCvd` with that widget as a parameter. Note though that this will only be applied to SVG output on a page, not Canvas.","pinned":false,"hidden":false,"mode":"md"},{"id":1645,"value":"filterCvd(cvd)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1659,"value":"You can explore the effects different colour vision deficiencies on the colour mixing by changing the settings in the widget and reviewing this page.","pinned":false,"hidden":false,"mode":"md"},{"id":53,"value":"---\n\n## Appendices","pinned":false,"hidden":false,"mode":"md"},{"id":673,"value":"_Example endpoint colours:_","pinned":false,"hidden":false,"mode":"md"},{"id":228,"value":"blueGold = [\"#22358B\", \"#D79900\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":676,"value":"ryb = [\"#bb4641\", \"#e0e44a\", \"#214cbf\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":2394,"value":"rgb = [\"#fc333e\", \"#2f910e\", \"#4864f4\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1217,"value":"cmy = [\n chroma.cmyk(0.8, 0, 0, 0).hex(),\n chroma.cmyk(0, 0.8, 0, 0).hex(),\n chroma.cmyk(0, 0, 0.8, 0).hex()\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":3144,"value":"oranges = [\"#f2dfb3\", \"#f6c13e\", \"#e3563f\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1607,"value":"bonnard = [\"#6b824d\", \"#d17f2c\", \"#b591a2\", \"#bac7e5\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":2564,"value":"matisse = [\"#aa003e\", \"#374d91\", \"#2b7a6d\", \"#df9700\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":2584,"value":"hammershøi = [\"#28332f\", \"#3e4745\", \"#57513d\", \"#8b8f8d\", \"#d0c598\", \"#f2efe5\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":2606,"value":"turner = [\"#5f689e\", \"#4070af\", \"#bb3d10\", \"#e6bf2e\", \"#eff2f3\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1616,"value":"metalic = [\"#000000\", \"#eff2f3\", \"#aa863c\", \"#983615\", \"#5a736c\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1462,"value":"_For rendering:_","pinned":false,"hidden":false,"mode":"md"},{"id":12,"value":"import { Renderer } from \"@jwolondon/renderer\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1779,"value":"function markers(clrs, radius = 20) {\n const w = 640;\n const r = new Renderer(w, 2 * radius + 1, \"svg\").stroke();\n clrs.forEach((clr) =>\n r\n .fill(clr)\n .ellipse(0, radius, radius)\n .translate(w / (clrs.length - 1), 0)\n );\n return r.render();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"function swatch(interp, h = 40, r = new Renderer(640, h, \"svg\")) {\n r.strokeWidth(1.5);\n for (let x = 0; x < 640; x++) {\n r.stroke(interp(x / 640)).line([\n [x, 0],\n [x, h]\n ]);\n }\n return r.render();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":307,"value":"function swatches(\n clr1,\n clr2,\n interps = [\n [d3.interpolateRgb, \"d3.interpolateRgb()\"],\n [d3.interpolateLab, \"d3.interpolateLab()\"],\n [d3.interpolateHcl, \"d3.interpolateHcl()\"],\n [d3.interpolateHclLong, \"d3.interpolateHclLong()\"],\n [d3.interpolateHsl, \"d3.interpolateHsl()\"],\n [d3.interpolateHslLong, \"d3.interpolateHslLong()\"],\n [d3.interpolateCubehelix, \"d3.interpolateCubeHelix()\"],\n [d3.interpolateCubehelixLong, \"d3.interpolateCubehelixLong()\"]\n ]\n) {\n const w = 640;\n const r = new Renderer(w + 1020, 30 * interps.length, \"svg\");\n interps.forEach(([interp, label]) => {\n swatch(interp(clr1, clr2), 30, r);\n r.stroke(\"white\").line([\n [0, 0],\n [w, 0]\n ]);\n r.fill(\"#333\")\n .textBaseline(\"middle\")\n .textSize(9)\n .stroke()\n .text(label, w + 5, 15)\n .stroke(\"black\")\n .translate(0, 30);\n });\n return r.render();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":444,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1758,"value":"function sqVenns([c1, c2, c3], interp) {\n const r = new Renderer(640, 150, \"svg\");\n sqVenn(c1, c2, c3, interp, r);\n r.translate(245, 0);\n sqVenn(c3, c1, c2, interp, r);\n r.translate(245, 0);\n sqVenn(c2, c3, c1, interp, r);\n return r.render();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1907,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":1470,"value":"_For transformation between circular, hexagonal and Cartesian spaces:_","pinned":false,"hidden":false,"mode":"md"},{"id":986,"value":"function degrees(rad) {\n return (rad * 180) / Math.PI;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":991,"value":"function radians(deg) {\n return (deg * Math.PI) / 180;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2006,"value":"root3over2 = Math.sqrt(3) / 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":2009,"value":"function triToCartesian([a, b, c]) {\n return [\n (2 * b + c) / (2 * (a + b + c)),\n root3over2 - (c * root3over2) / (a + b + c)\n ];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":908,"value":"function clrToScreen(hue, radius = 0.7) {\n return [\n radius * Math.cos(radians(hue - 90)),\n radius * Math.sin(radians(hue - 90))\n ];\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}