30:T562,function chartRgb(interpolate) { const height = 240; const margin = ({top: 20, right: 30, bottom: 30, left: 40}); const x = d3.scaleLinear() .range([margin.left, width - margin.right]); const y = d3.scaleLinear() .domain([0, 255]) .range([height - margin.bottom, margin.top]); const xAxis = g => g .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0)); const yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).ticks(8)) .call(g => g.select(".domain").remove()); const svg = d3.select(DOM.svg(width, height)); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); const g = svg.append("g") .datum(Array.from({length: width}, (_, i) => i / (width - 1))) .attr("fill", "none") .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round"); g.append("path") .attr("stroke", "#f00") .attr("d", d3.line().x(x).y(t => y(d3.rgb(interpolate(t)).r))); g.append("path") .attr("stroke", "#0f0") .attr("d", d3.line().x(x).y(t => y(d3.rgb(interpolate(t)).g))); g.append("path") .attr("stroke", "#00f") .attr("d", d3.line().x(x).y(t => y(d3.rgb(interpolate(t)).b))); return svg.node(); }31:T585,function chartL(interpolate) { const height = 240; const margin = ({top: 20, right: 30, bottom: 30, left: 40}); const x = d3.scaleLinear() .range([margin.left, width - margin.right]); const y = d3.scaleLinear() .domain([0, 100]) .range([height - margin.bottom, margin.top]); const xAxis = g => g .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0)); const yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).ticks(8)) .call(g => g.select(".domain").remove()); const svg = d3.select(DOM.svg(width, height)); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); svg.append("line") .datum(d3.mean(d3.range(width), i => d3.lab(interpolate(i / (width - 1))).l)) .attr("fill", "none") .attr("stroke", "#aaa") .attr("stroke-dasharray", "2,2") .attr("x1", margin.left) .attr("x2", width - margin.right) .attr("y1", y) .attr("y2", y); svg.append("path") .datum(d3.range(width).map(i => i / (width - 1))) .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", d3.line().x(x).y(t => y(d3.lab(interpolate(t)).l))); return svg.node(); }32:T479,function chartDifference(interpolate) { const height = 240; const margin = ({top: 20, right: 30, bottom: 30, left: 40}); const x = d3.scaleLinear() .range([margin.left, width - margin.right]); const y = d3.scaleLinear() .domain([0, 70]) .range([height - margin.bottom, margin.top]); const xAxis = g => g .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0)); const yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).ticks(8)) .call(g => g.select(".domain").remove()); const svg = d3.select(DOM.svg(width, height)); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); svg.append("path") .datum(d3.range(width).map(i => i / (width - 1))) .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", d3.line().x(x).y(t => y(d3.differenceDin99o(interpolate(t + 0.05), interpolate(t - 0.05))))); return svg.node(); }33:[] 2e:{"title":"Linear Sinebow","cells":[{"id":831,"value":"md`# Linear Sinebow`","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"html`\n${rampNamed(interpolateSinebow)}\n${rampNamed(interpolateLinearSinebow)}\n${rampNamed(interpolateLinearSinebow2)}\n${rampNamed(interpolateRainbow)}\n${rampNamed(interpolateAngry)}\n${rampNamed(interpolateLinearAngry)}\n${rampNamed(interpolateAngrySinebow)}\n${rampNamed(interpolateLinearAngrySinebow)}\n${rampNamed(flooredSinebow)}\n${rampNamed(flooredLinearSinebow)}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"md`This notebook takes [Mike Bostock's original on the sinebow](https://observablehq.com/@mbostock/sinebow) and adds various experiments in linear and non-linear RGB space.\n\nThe [sinebow](http://basecase.org/env/on-rainbows) is typically generated in an RGB color space:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"ramp(interpolateSinebow)","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"function interpolateSinebow(t) {\n return t = 0.5 - t, d3.rgb(\n 255 * sin2(t + 0 / 3),\n 255 * sin2(t + 1 / 3),\n 255 * sin2(t + 2 / 3)\n );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":485,"value":"function sin2(t) {\n return Math.sin(Math.PI * t) ** 2;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":364,"value":"md`What if we instead generate it in _linear_ RGB color space and convert it back to the RGB color space from that?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":373,"value":"ramp(interpolateLinearSinebow)","pinned":false,"hidden":false,"mode":"ojs"},{"id":366,"value":"function interpolateLinearSinebow(t) {\n t = 0.5 - t;\n return d3.rgb(\n 255 * lrgb_rgb(sin2(t + 0 / 3)),\n 255 * lrgb_rgb(sin2(t + 1 / 3)),\n 255 * lrgb_rgb(sin2(t + 2 / 3))\n );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":368,"value":"function lrgb_rgb(v) {\n // convert linear rgb space in range [0.0, 1.0] to rgb space in range [0, 255]\n return v <= 0.0031308 ? 12.92 * v : 1.055 * (v ** (1 / 2.4)) - 0.055;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":448,"value":"md`This is a lot brighter than the other rainbow ramps, but we can easily fix that by lowering the lightness in the linear color space:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":446,"value":"ramp(interpolateLinearSinebow2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":842,"value":"lightness","pinned":false,"hidden":false,"mode":"ojs"},{"id":524,"value":"viewof lightness = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":443,"value":"function interpolateLinearSinebow2(t) {\n return t = 0.5 - t, d3.rgb(\n 255 * lrgb_rgb(lightness * sin2(t + 0 / 3)),\n 255 * lrgb_rgb(lightness * sin2(t + 1 / 3)),\n 255 * lrgb_rgb(lightness * sin2(t + 2 / 3))\n );\n\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":270,"value":"md`Here is the [“less-angry” rainbow](https://github.com/d3/d3-scale-chromatic/blob/master/README.md#interpolateRainbow) from d3 and the HSL-based “angry” rainbow for comparison:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":240,"value":"ramp(interpolateRainbow)","pinned":false,"hidden":false,"mode":"ojs"},{"id":168,"value":"ramp(interpolateAngry)","pinned":false,"hidden":false,"mode":"ojs"},{"id":566,"value":"md`Let's try generating the angry rainbow in a linear RGB space too:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":574,"value":"ramp(interpolateLinearAngry)","pinned":false,"hidden":false,"mode":"ojs"},{"id":572,"value":"function interpolateLinearAngry(t) {\n return d3.rgb(\n 255 * lrgb_rgb(lightness * angry(t)),\n 255 * lrgb_rgb(lightness * angry(t + 2/3)),\n 255 * lrgb_rgb(lightness * angry(t + 1/3))\n );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":569,"value":"function angry(t) {\n t = ((t % 1) + 1) % 1; // convert to range [0,1)\n if (t < 1/6 || t > 5/6) return 1;\n else if (t > 1/3 && t < 2/3) return 0;\n else if (t < 1/3) return 1 - (t - 1 / 6) * 6;\n else return t*6 - 4;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":897,"value":"md`And finally, how about dividing up the sinebow like the original angry rainbow, and then doing so in a linear RGB space too:`","pinned":true,"hidden":false,"mode":"ojs"},{"id":905,"value":"ramp(interpolateAngrySinebow)","pinned":false,"hidden":false,"mode":"ojs"},{"id":899,"value":"function interpolateAngrySinebow(t) {\n return d3.rgb(\n 255 * lrgb_rgb(lightness) * angrySinebow(t),\n 255 * lrgb_rgb(lightness) * angrySinebow(t + 2/3),\n 255 * lrgb_rgb(lightness) * angrySinebow(t + 1/3)\n );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":856,"value":"ramp(interpolateLinearAngrySinebow)","pinned":false,"hidden":false,"mode":"ojs"},{"id":848,"value":"function interpolateLinearAngrySinebow(t) {\n return d3.rgb(\n 255 * lrgb_rgb(lightness * angrySinebow(t)),\n 255 * lrgb_rgb(lightness * angrySinebow(t + 2/3)),\n 255 * lrgb_rgb(lightness * angrySinebow(t + 1/3))\n );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":851,"value":"function angrySinebow(t) {\n t = ((t % 1) + 1) % 1; // convert to range [0,1)\n if (t < 1/6 || t > 5/6) return 1;\n else if (t > 1/3 && t < 2/3) return 0;\n else if (t < 1/3) return (1 - Math.cos(Math.PI * 6 * t))*0.5;\n else return (1 - Math.cos(Math.PI * 6 * t))*0.5;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":947,"value":"ramp(flooredSinebow)","pinned":true,"hidden":false,"mode":"ojs"},{"id":944,"value":"function flooredSinebow(t) {\n t = 0.5 - t;\n const offset = 0.25 //sin2(0.5 - 1/3);\n return d3.rgb(\n 255 / (1 - offset) * Math.max(0, sin2(t + 0 / 3) - offset),\n 255 / (1 - offset) * Math.max(0, sin2(t + 1 / 3) - offset),\n 255 / (1 - offset) * Math.max(0, sin2(t + 2 / 3) - offset),\n );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":960,"value":"ramp(flooredLinearSinebow)","pinned":true,"hidden":false,"mode":"ojs"},{"id":940,"value":"function flooredLinearSinebow(t) {\n t = 0.5 - t;\n const offset = lrgb_rgb(sin2(0.5 - 1/3));\n return d3.rgb(\n 255 / (1 - offset) * Math.max(0, lrgb_rgb(sin2(t + 0 / 3)) - offset),\n 255 / (1 - offset) * Math.max(0, lrgb_rgb(sin2(t + 1 / 3)) - offset),\n 255 / (1 - offset) * Math.max(0, lrgb_rgb(sin2(t + 2 / 3)) - offset),\n );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":249,"value":"md`Here are the RGB channel values for each of the experiments here:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"chartRgb(interpolateSinebow)","pinned":true,"hidden":false,"mode":"ojs"},{"id":428,"value":"chartRgb(interpolateLinearSinebow)","pinned":true,"hidden":false,"mode":"ojs"},{"id":472,"value":"chartRgb(interpolateLinearSinebow2)","pinned":true,"hidden":false,"mode":"ojs"},{"id":215,"value":"chartRgb(interpolateRainbow)","pinned":true,"hidden":false,"mode":"ojs"},{"id":171,"value":"chartRgb(interpolateAngry)","pinned":true,"hidden":false,"mode":"ojs"},{"id":588,"value":"chartRgb(interpolateLinearAngry)","pinned":true,"hidden":false,"mode":"ojs"},{"id":908,"value":"chartRgb(interpolateAngrySinebow)","pinned":true,"hidden":false,"mode":"ojs"},{"id":858,"value":"chartRgb(interpolateLinearAngrySinebow)","pinned":true,"hidden":false,"mode":"ojs"},{"id":952,"value":"chartRgb(flooredSinebow)","pinned":true,"hidden":false,"mode":"ojs"},{"id":954,"value":"chartRgb(flooredLinearSinebow)","pinned":true,"hidden":false,"mode":"ojs"},{"id":253,"value":"md`Here are the lightness values (*L* in Lab color space) for each, with the average lightness shown as a dashed gray line:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"chartL(interpolateSinebow)","pinned":true,"hidden":false,"mode":"ojs"},{"id":430,"value":"chartL(interpolateLinearSinebow)","pinned":true,"hidden":false,"mode":"ojs"},{"id":452,"value":"chartL(interpolateLinearSinebow2)","pinned":true,"hidden":false,"mode":"ojs"},{"id":146,"value":"chartL(interpolateRainbow)","pinned":true,"hidden":false,"mode":"ojs"},{"id":174,"value":"chartL(interpolateAngry)","pinned":true,"hidden":false,"mode":"ojs"},{"id":590,"value":"chartL(interpolateLinearAngry)","pinned":true,"hidden":false,"mode":"ojs"},{"id":911,"value":"chartL(interpolateAngrySinebow)","pinned":true,"hidden":false,"mode":"ojs"},{"id":913,"value":"chartL(interpolateLinearAngrySinebow)","pinned":true,"hidden":false,"mode":"ojs"},{"id":971,"value":"chartL(flooredSinebow)","pinned":true,"hidden":false,"mode":"ojs"},{"id":973,"value":"chartL(flooredLinearSinebow)","pinned":true,"hidden":false,"mode":"ojs"},{"id":310,"value":"md`Another way to compare these color schemes it to evaluate their perceptual uniformity: how rapidly do we perceive the colors to be changing? The angry rainbow is noted for distorting the data due to lack of uniformity. The charts below compute the ${tex`\\Delta E^*_{99o}`} color difference in the DIN99o color space between ${tex`t + 0.05`} and ${tex`t - 0.05`}.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":306,"value":"chartDifference(interpolateSinebow)","pinned":true,"hidden":false,"mode":"ojs"},{"id":432,"value":"chartDifference(interpolateLinearSinebow)","pinned":true,"hidden":false,"mode":"ojs"},{"id":454,"value":"chartDifference(interpolateLinearSinebow2)","pinned":true,"hidden":false,"mode":"ojs"},{"id":313,"value":"chartDifference(interpolateRainbow)","pinned":true,"hidden":false,"mode":"ojs"},{"id":318,"value":"chartDifference(interpolateAngry)","pinned":true,"hidden":false,"mode":"ojs"},{"id":478,"value":"chartDifference(interpolateLinearAngry)","pinned":true,"hidden":false,"mode":"ojs"},{"id":917,"value":"chartDifference(interpolateAngrySinebow)","pinned":true,"hidden":false,"mode":"ojs"},{"id":915,"value":"chartDifference(interpolateLinearAngrySinebow)","pinned":true,"hidden":false,"mode":"ojs"},{"id":975,"value":"chartDifference(flooredSinebow)","pinned":true,"hidden":false,"mode":"ojs"},{"id":977,"value":"chartDifference(flooredLinearSinebow)","pinned":true,"hidden":false,"mode":"ojs"},{"id":258,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":141,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":303,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":224,"value":"function rampNamed(interpolate) {\n return html`

\n${ramp(interpolate)}\n

${interpolate.name}

`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"import {ramp} from \"@mbostock/color-ramp\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"d3 = require(\"d3@5\", \"d3-color-difference@0.1\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":165,"value":"function interpolateAngry(t) {\n return d3.hsl(\n t * 360,\n 1,\n 0.5\n );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":131,"value":"function interpolateRainbow(t) {\n return t = (t + 0.2) % 1, d3.cubehelix(\n 360 * t - 100,\n 1.5 - 1.5 * Math.abs(t - 0.5),\n 0.8 - 0.9 * Math.abs(t - 0.5)\n );\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}