27:null 28:["$","title",null,{"children":"三变量填充地图颜色生成器 | RStata 团队 | Observable"}] 2d:[] 2b:{"id":"ac2462c27dac3e35","slug":null,"title":"三变量填充地图颜色生成器","thumbnail":"749f32a8e00698ab9dea72964a6d54971c7a41fad7973fd7c4cb3fba715bbabf","access_level":"public","create_time":"$D2024-01-20T15:13:52.763Z","update_time":"$D2024-08-04T09:31:42.971Z","view_time":null,"first_public_time":"$D2024-01-20T15:13:52.763Z","has_unpublished_edits":null,"fork":true,"stars":1,"starred":false,"owner":{"type":"team","id":"441761b6594e52b8","login":"czxa","name":"RStata 团队","avatar_url":"https://avatars-next.observableusercontent.com/24640d5bf3472e6e21da6ca586de7d83f9b5001c41a0a229c9512968093c00ac","tier":"starter_2024"},"version":2306,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"6919fb13894d5982","login":"czxa","name":"RStata 团队","avatar_url":"https://avatars-next.observableusercontent.com/24640d5bf3472e6e21da6ca586de7d83f9b5001c41a0a229c9512968093c00ac","tier":null}],"members":[{"type":"individual","id":"6919fb13894d5982","login":"czxa","name":"RStata 团队","avatar_url":"https://avatars-next.observableusercontent.com/24640d5bf3472e6e21da6ca586de7d83f9b5001c41a0a229c9512968093c00ac","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"三变量填充地图颜色生成器","cells":[{"id":0,"value":"# 三变量填充地图颜色生成器","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2274,"value":"viewof rows = slider({\n title: '分组数',\n min: 3,\n max: 20,\n step: 1,\n value: 10\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"viewof colors = Inputs.form({\n a: Inputs.color({\n label: \"Color A\",\n value: chroma(pigmentColors[\"Cadmium Yellow\"]).hex()\n }),\n b: Inputs.color({\n label: \"Color B\",\n value: chroma(pigmentColors[\"Cobalt Blue\"]).hex()\n }),\n c: Inputs.color({\n label: \"Color C\",\n value: chroma(pigmentColors[\"Quinacridone Magenta\"]).hex()\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2212,"value":"show3(colors.b, colors.c, colors.a)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2237,"value":"colorStringsRGB()\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2272,"value":"colorStringsHEX()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"
\n\n-----\n## Functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4,"value":"spectral = import(\"https://cdn.skypack.dev/spectral.js@2.0.2?min\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"mixbox = require(\"mixbox@2.0.0/mixbox.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":426,"value":"function mixboxLerpMulti(colors, parts) {\n const zList = colors.map((d) => mixbox.rgbToLatent(d));\n const zMix = new Array(mixbox.LATENT_SIZE);\n const sum = (d) => d.reduce((a, b) => a + b, 0);\n const total = sum(parts);\n const fList = parts.map((d) => d / total);\n for (var i = 0; i < zMix.length; i++) {\n zMix[i] = sum(\n zList.map(function (z, j) {\n const f = fList[j];\n return f * z[i];\n })\n );\n }\n return mixbox.latentToRgb(zMix).toString();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":487,"value":"import { ternary } from \"@fil/ternary-plot\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"import {chroma} from \"@grantcuster/hcl-color-space-with-chroma-slider\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"function show(mixFunction, width, n = 9, label = \"\") {\n const fontSize = 15;\n return svg``;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":491,"value":"function show3(a, b, c) {\n const w = 320;\n const n = rows;\n const data = [];\n for (let i = 0; i < n; i++) {\n for (let j = 0; j < n; j++) {\n let x = i / (n - 1);\n let y = j / (n - 1);\n let z = 1 - x - y;\n console.log(x, y, z);\n if (x + y <= 1) {\n data.push({\n x: x,\n y: y,\n fill: mixboxLerpMulti([a, b, c], [x, y, z])\n });\n }\n }\n }\n return Plot.plot({\n width: w,\n height: (w / 2) * Math.sqrt(3),\n projection: { type: ternary.projection, inset: 1 },\n margin: w / n,\n marks: [\n Plot.sphere(),\n ternary.graticule(),\n Plot.dot(data, {\n x: (d) => d.x,\n y: (d) => d.y,\n fill: (d) => d.fill,\n symbol: \"hexagon\",\n r: w / (n + 1) / 2\n })\n ]\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2250,"value":"function show3color(a, b, c) {\n const w = 320;\n const n = rows;\n const data = [];\n for (let i = 0; i < n; i++) {\n for (let j = 0; j < n; j++) {\n let x = i / (n - 1);\n let y = j / (n - 1);\n let z = 1 - x - y;\n console.log(x, y, z);\n if (x + y <= 1) {\n data.push({\n x: x,\n y: y,\n fill: mixboxLerpMulti([a, b, c], [x, y, z])\n });\n }\n }\n }\n return data;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"// from https://github.com/scrtwpns/mixbox/blob/master/javascript/mixbox.js\npigmentColors = ({\n \"Cadmium Yellow\": \"rgb(254, 236, 0)\",\n \"Hansa Yellow\": \"rgb(252, 211, 0)\",\n \"Cadmium Orange\": \"rgb(255, 105, 0)\",\n \"Cadmium Red\": \"rgb(255, 39, 2)\",\n \"Quinacridone Magenta\": \"rgb(128, 2, 46)\",\n \"Cobalt Violet\": \"rgb(78, 0, 66)\",\n \"Ultramarine Blue\": \"rgb(25, 0, 89)\",\n \"Cobalt Blue\": \"rgb(0, 33, 133)\",\n \"Phthalo Blue\": \"rgb(13, 27, 68)\",\n \"Phthalo Green\": \"rgb(0, 60, 50)\",\n \"Permanent Green\": \"rgb(7, 109, 22)\",\n \"Sap Green\": \"rgb(107, 148, 4)\",\n \"Burnt Sienna\": \"rgb(123, 72, 0)\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2244,"value":"function colorStringsHEX() {\n const title = md`### HEX 颜色列表`\n const strings = show3color(colors.b, colors.c, colors.a).map(d => chroma(d.fill).hex()).map(d => `\"${d}\"`).reverse()\n const text = `c(${strings.join(', ')})`\n const textarea = html`

${text}`\n  const button = html`<button>Copy`\n  button.onclick = () => copy(text)\n  return html`<div class='color-strings'>${title}${button}</div><div>${textarea}</div>`\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2267,"value":"function colorStringsRGB() {\n  const title = md`### RGB 颜色列表`\n  const strings = show3color(colors.b, colors.c, colors.a).map(d => chroma(d.fill).rgb()).map(d => `\"${d}\"`).reverse()\n  const text = `${strings.join(' ').replace(/,/g, \" \")}`\n  const textarea = html`<textarea rows=4 cols=44 readonly>${text}`\n  const button = html`<button>Copy`\n  button.onclick = () => copy(text)\n  return html`<div class='color-strings'>${title}${button}</div><div>${textarea}</div>`\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2276,"value":"import {copy} from \"@mbostock/copy-to-clipboard\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2281,"value":"import {select, slider} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2d","stdlib":"1","titling":"auto"}}
2c:"$2b:body"
</article></body></html>