31:T824,function colorWheel(colors) { const hslColors = colors .map((color) => { const { h, s, l } = d3.hsl(color); return { h, s, l, color }; }) .slice(0, range); const size = 50; const satScale = d3 .scaleLinear() .domain([0, 1]) .range([size * 0.5, size]); const svgArrow = ` `; return Plot.plot({ x: { domain: [-size, size], ticks: [] }, y: { domain: [-size, size], ticks: [] }, r: { domain: [0, size], range: [0, size * 4] }, inset: 40, width: 500, height: 500, marks: [ // () => svgArrow, Plot.dot([1], { x: 0, y: 0, r: (d) => size, fill: "#aaa1" }), Plot.dot([1], { x: 0, y: 0, r: (d) => 10, fill: "#fffa" }), Plot.arrow(hslColors, { x: (d) => satScale(d.s) * Math.cos((d.h * Math.PI) / 180), y: (d) => satScale(d.s) * Math.sin((d.h * Math.PI) / 180), x2: (d, i) => satScale(hslColors[i + 1]?.s) * Math.cos((hslColors[i + 1]?.h * Math.PI) / 180), y2: (d, i) => satScale(hslColors[i + 1]?.s) * Math.sin((hslColors[i + 1]?.h * Math.PI) / 180), bend: true, markerEnd: "url(#largeArrow)", stroke: (d) => d.color, strokeOpacity: 0.3 }), Plot.dot(hslColors, { x: (d) => satScale(d.s) * Math.cos((d.h * Math.PI) / 180), y: (d) => satScale(d.s) * Math.sin((d.h * Math.PI) / 180), fill: (d) => d.color, // fillOpacity: 0.1, r: 10 }), Plot.text(hslColors, { x: (d) => satScale(d.s) * Math.cos((d.h * Math.PI) / 180), y: (d) => satScale(d.s) * Math.sin((d.h * Math.PI) / 180), fill: "white", text: (d, i) => i + 1, fontSize: 15, // fillOpacity: 0.1, r: 10 }) ] }); }32:T664,function colorWheelLAB(colors) { const labColors = colors .map((color) => { const { l, a, b } = d3.lab(color); return { l, a, b, color }; }) .slice(0, range); // return labColors; const size = 50; const abScale = d3.scaleLinear().domain([-80, 80]).range([-size, size]); const svgArrow = ` `; return Plot.plot({ x: { domain: [-size, size], ticks: [] }, y: { domain: [-size, size], ticks: [] }, r: { domain: [0, size], range: [0, size * 4] }, inset: 40, width: 500, height: 500, marks: [ // () => svgArrow, Plot.dot([1], { x: 0, y: 0, r: (d) => size, fill: "#aaa1" }), Plot.arrow(labColors, { x: (d) => abScale(d.a), y: (d) => abScale(d.b), x2: (d, i) => abScale(labColors[i + 1]?.a), y2: (d, i) => abScale(labColors[i + 1]?.b), bend: true, markerEnd: "url(#largeArrow)", stroke: (d) => d.color, strokeOpacity: 0.3 }), Plot.dot(labColors, { x: (d) => abScale(d.a), y: (d) => abScale(d.b), fill: (d) => d.color, // fillOpacity: 0.1, r: 10 }), Plot.text(labColors, { x: (d) => abScale(d.a), y: (d) => abScale(d.b), fill: "white", text: (d, i) => i + 1, fontSize: 15, // fillOpacity: 0.1, r: 10 }) ] }); }33:[] 2f:{"title":"Observable10 and Tableau10 on ColorWheel","cells":[{"id":0,"value":"# Observable10 and Tableau10 on ColorWheel","pinned":false,"hidden":false,"mode":"md"},{"id":154,"value":"Categorical color scales now default to the new observable10 color scheme\nhttps://github.com/observablehq/plot/releases/tag/v0.6.12\n","pinned":false,"hidden":false,"mode":"md"},{"id":97,"value":"viewof range = Inputs.range([1, 10], {\n step: 1,\n value: 10,\n label: \"Number of Colors\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":176,"value":"Compare on Hue-Saturation Wheel","pinned":false,"hidden":false,"mode":"md"},{"id":201,"value":"## HSL Color Space","pinned":false,"hidden":false,"mode":"md"},{"id":103,"value":"html`

Tableau10

${colorWheel(\n d3.schemeTableau10\n)}

Observable10

${colorWheel(schemeObservable10)}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":197,"value":"## LAB Color Space","pinned":false,"hidden":false,"mode":"md"},{"id":195,"value":"html`

Tableau10

${colorWheelLAB(\n d3.schemeTableau10\n)}

Observable10

${colorWheelLAB(\n schemeObservable10\n)}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":204,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"schemeObservable10 = [\n \"#4269d0\",\n \"#f4bd4a\",\n \"#ff725c\",\n \"#6cc5b0\",\n \"#a463f2\",\n \"#ff8ab7\",\n \"#9c6b4e\",\n \"#97bbf5\",\n \"#01ab63\",\n \"#9498a0\"\n]","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}