2e:null 2f:["$","title",null,{"children":"Observable10 and Tableau10 on ColorWheel | taekie | Observable"}] 34: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 }) ] }); }35: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 }) ] }); }36:[] 32:{"id":"299b50db716ba3ec","slug":"observable10-and-tableau10-on-colorwheel","title":"Observable10 and Tableau10 on ColorWheel","thumbnail":"a8e5db05e5dc6734e5bf0452b400f219e814e09ee8559f59599d2442f0c79666","access_level":"public","create_time":"$D2023-12-13T01:19:17.142Z","update_time":"$D2024-04-09T22:55:07.215Z","view_time":null,"first_public_time":"$D2024-04-10T01:28:50.994Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"b7e5b2f89b823a97","login":"taekie","name":"taekie","avatar_url":"https://avatars-next.observableusercontent.com/be34fc83e1c21b2cc0145ceebbde48e5fcfa280c49aa41dbd746a1c3c1847b81","tier":"pro_2024"},"version":225,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"8bc558cbad6934ee","login":"taekie","name":"taekie","avatar_url":"https://avatars-next.observableusercontent.com/be34fc83e1c21b2cc0145ceebbde48e5fcfa280c49aa41dbd746a1c3c1847b81","tier":null}],"members":[{"type":"individual","id":"8bc558cbad6934ee","login":"taekie","name":"taekie","avatar_url":"https://avatars-next.observableusercontent.com/be34fc83e1c21b2cc0145ceebbde48e5fcfa280c49aa41dbd746a1c3c1847b81","tier":null,"role":"editor"},{"type":"team","id":"b7e5b2f89b823a97","login":"taekie","name":"taekie","avatar_url":"https://avatars-next.observableusercontent.com/be34fc83e1c21b2cc0145ceebbde48e5fcfa280c49aa41dbd746a1c3c1847b81","tier":"pro_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Observable10 and Tableau10 on ColorWheel","cells":[{"id":0,"value":"# Observable10 and Tableau10 on ColorWheel","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"Compare on Hue-Saturation Wheel","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":201,"value":"## HSL Color Space","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":103,"value":"html`

Tableau10

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

Observable10

${colorWheel(schemeObservable10)}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"## LAB Color Space","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":195,"value":"html`

Tableau10

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

Observable10

${colorWheelLAB(\n schemeObservable10\n)}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 33:"$32:body"