25:["$","title",null,{"children":"HCT Color Space | Ronin's Workspace | Observable"}] 49:T66d,{ // Define the size and radius of the disc const width = 400; const height = 400; const radius = Math.min(width, height) / 2; const step = 1; // Step size, decrease for smoother gradations // Create a canvas element const canvas = d3 .create("canvas") .attr("width", width) .attr("height", height) .node(); const context = canvas.getContext("2d"); // Loop through each pixel of the canvas for (let y = -radius; y < radius; y += step) { for (let x = -radius; x < radius; x += step) { // Calculate the hue based on the angle const angle = Math.atan2(y, x); const hue = (angle * 180) / Math.PI + 180; // Calculate the lightness based on the radius const distance = Math.sqrt(x * x + y * y); const lightness = 100 - (distance / radius) * 100 * 0.5; const saturationsRange = selChroma.map((d) => (d / voxelSize) * 100); const lightnessRange = selTone.map((d) => (d / voxelSize) * 100); let color = "#fff"; if (colorMode === "HCT") { const hctColor = MCU.Hct.from(hue, saturationsRange[1], lightness); color = MCU.hexFromArgb(hctColor.argb); } if (colorMode === "HSL") { color = d3.hcl(hue, saturationsRange[1], lightness); } // Set the fill color of the pixel context.fillStyle = distance <= radius && lightness >= lightnessRange[0] && lightness <= lightnessRange[1] ? color : "#fff"; // context.fillStyle = color; context.fillRect(x + radius, y + radius, step, step); } } // Return the canvas element return canvas; }4a:T5d3,{ // return; // Define the size and radius of the disc const width = 1000; const height = 400; const radius = Math.min(width, height) / 2; const step = 20; // Step size, decrease for smoother gradations // Create a canvas element const canvas = d3 .create("canvas") .attr("width", width) .attr("height", height) .node(); const context = canvas.getContext("2d"); // Loop through each pixel of the canvas for (let y = 0; y <= height; y += step) { for (let x = 0; x < width; x += step) { // Calculate the hue based on the angle // const angle = Math.atan2(y, x); const hue = (x / width) * 360 * 1.6 - 60; // Calculate the lightness based on the radius // const distance = Math.sqrt(x * x + y * y); const lightness = 100 - (y / height) * 100; const saturationsRange = selChroma.map((d) => (d / voxelSize) * 100); const lightnessRange = selTone.map((d) => (d / voxelSize) * 100); let color = "#fff"; if (colorMode === "HCT") { const hctColor = MCU.Hct.from(hue, saturationsRange[1], lightness); color = MCU.hexFromArgb(hctColor.argb); } if (colorMode === "HSL") { // color = d3.hcl(hue, saturationsRange[1], lightness); color = d3.hcl(hue, 100, lightness); } // Set the fill color of the pixel context.fillStyle = color; context.fillRect(x, y, step, step); } } // Return the canvas element return canvas; }4b:Tcc7,scene = { // create a scene and set the background color to white const scene = new THREE.Scene(); scene.background = new THREE.Color(0xffffff); // specify the dimensions of the color cube const size = voxelSize; // add voxels to the scene, color them according to their HSL position for (let x = selHue[0]; x <= selHue[1]; x++) { for (let y = selChroma[0]; y <= selChroma[1]; y++) { for (let z = selTone[0]; z <= selTone[1]; z++) { // create a voxel (cube) if ( x === selHue[0] || x === selHue[1] || y === selChroma[0] || y === selChroma[1] || z === selTone[0] || z === selTone[1] ) { const geometry = new THREE.BoxGeometry(1, 1, 1); const color = genColor(x, y, z, size); // set the color of the voxel based on its position const material = new THREE.MeshBasicMaterial({ color }); // create a mesh with the geometry and material const voxel = new THREE.Mesh(geometry, material); // position the voxel voxel.position.set( (x / size) * size - size / 2, (z / size) * size - size / 2, (y / size) * size - size / 2 ); // add the voxel to the scene scene.add(voxel); } } } } // add arrows for each axis const arrowSize = size + 1; const dir = new THREE.Vector3(1, 0, 0); const origin = new THREE.Vector3(0, 0, 0); const length = arrowSize; // let hex = 0xffff00; // let arrowHelper = new THREE.ArrowHelper(dir, origin, length, hex); // scene.add(arrowHelper); // dir.set(0, 1, 0); // hex = 0xff00ff; // arrowHelper = new THREE.ArrowHelper(dir, origin, length, hex); // scene.add(arrowHelper); // dir.set(0, 0, 1); // hex = 0x00ffff; // arrowHelper = new THREE.ArrowHelper(dir, origin, length, hex); // scene.add(arrowHelper); // add text labels // const loader = new THREE.FontLoader(); // loader.load( // "https://threejs.org/examples/fonts/helvetiker_regular.typeface.json", // function (font) { // const geometry = new THREE.TextGeometry("Hue", { // font: font, // size: 0.4, // height: 0.1, // curveSegments: 12, // bevelEnabled: true, // bevelThickness: 0.15, // bevelSize: 0.3, // bevelSegments: 5 // }); // const material = new THREE.MeshBasicMaterial({ color: 0x000000 }); // const textMesh = new THREE.Mesh(geometry, material); // textMesh.position.set(arrowSize + 1, 0, 0); // scene.add(textMesh); // geometry = new THREE.TextGeometry("Chroma", { ...geometry.parameters }); // material = new THREE.MeshBasicMaterial({ color: 0x000000 }); // textMesh = new THREE.Mesh(geometry, material); // textMesh.position.set(0, arrowSize + 1, 0); // scene.add(textMesh); // geometry = new THREE.TextGeometry("Tone", { ...geometry.parameters }); // material = new THREE.MeshBasicMaterial({ color: 0x000000 }); // textMesh = new THREE.Mesh(geometry, material); // textMesh.position.set(0, 0, arrowSize + 1); // scene.add(textMesh); // } // ); return scene; }4c:[] 29:{"id":"da3d7a81c1875d3f","slug":null,"title":"HCT Color Space","thumbnail":"f0361233259b7499f817481cb77e871f41379325a830b4f7b78e029427046a68","access_level":"public","create_time":"$D2023-09-16T21:53:17.794Z","update_time":"$D2026-01-29T21:59:22.713Z","view_time":null,"first_public_time":"$D2023-09-16T21:53:17.794Z","has_unpublished_edits":null,"fork":{"id":"259dd9d3134e5131","slug":"hct-color-space-compare","title":"HCT Color Space","owner":{"id":"b7e5b2f89b823a97","login":"taekie","name":"taekie"}},"stars":1,"starred":false,"owner":{"type":"team","id":"30da7631bd711db0","login":"ronin-ws","name":"Ronin's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/fad82ba29824e0ce232d6e76444717d0cd30315f5b871b7b2613e897a1428f73","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":666,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"a9c16f2ed303b7cb","login":"ronin","name":"Ronin","avatar_url":"https://avatars-next.observableusercontent.com/c215ee0be2b865013e0942d79ac4ca36ca917e8677114fc5cf97911268440796","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"a9c16f2ed303b7cb","login":"ronin","name":"Ronin","avatar_url":"https://avatars-next.observableusercontent.com/c215ee0be2b865013e0942d79ac4ca36ca917e8677114fc5cf97911268440796","tier":null,"role":"editor"},{"type":"team","id":"30da7631bd711db0","login":"ronin-ws","name":"Ronin's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/fad82ba29824e0ce232d6e76444717d0cd30315f5b871b7b2613e897a1428f73","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"HCT Color Space","cells":[{"id":0,"value":"md`# HCT Color Space\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":300,"value":"## ${colorMode} Color Cube","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":384,"value":"viewof colorMode = Inputs.radio([\"HCT\", \"HSL\", \"RGB\"], {\n label: \"Color Model\",\n value: \"HCT\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"{\n const renderer = new THREE.WebGLRenderer({ antialias: true });\n const controls = new THREE.OrbitControls(camera, renderer.domElement);\n invalidation.then(() => (controls.dispose(), renderer.dispose()));\n renderer.setSize(width, height);\n renderer.setPixelRatio(devicePixelRatio);\n controls.addEventListener(\"change\", () => renderer.render(scene, camera));\n while (true) {\n // cube.rotation.x += 0.01;\n // cube.rotation.y += 0.01;\n\n renderer.render(scene, camera);\n yield renderer.domElement;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"viewof selHue = interval([0, voxelSize], {\n step: 1,\n value: [0, voxelSize],\n label: colorMode === \"RGB\" ? \"R\" : \"Hue\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"viewof selChroma = interval([0, voxelSize], {\n step: 1,\n value: [0, voxelSize],\n label:\n colorMode === \"RGB\" ? \"G\" : colorMode === \"HCT\" ? \"Chroma\" : \"Saturation\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"viewof selTone = interval([0, voxelSize], {\n step: 1,\n value: [0, voxelSize],\n label: colorMode === \"RGB\" ? \"B\" : colorMode === \"HCT\" ? \"Tone\" : \"Lightness\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":610,"value":"## ${colorMode} Hue Disc ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":575,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":624,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":250,"value":"## Gradient","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":183,"value":"viewof color1 = Inputs.color({ label: \"Color1\", value: \"#f2cf21\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"viewof color2 = Inputs.color({ label: \"Color2\", value: \"#2f6ea2\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"viewof grayscale = Inputs.range([0, 100], {\n value: 0,\n step: 1,\n label: \"desaturation\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"gradient(hctScale2, \"HCT\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"gradient(hslScale2, \"HSL\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":289,"value":"gradient(rgbScale2, \"RGB\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":303,"value":"## Hue Scale","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":179,"value":"viewof chroma = Inputs.range([0, 100], {\n step: 1,\n value: 100,\n label: \"Chroma(Saturation)\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"viewof tone = Inputs.range([0, 100], {\n step: 1,\n value: 50,\n label: \"Tone(Lightness)\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"gradient(hctScale, \"HCT\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":245,"value":"gradient(hslScale, \"HSL\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":308,"value":"## Functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":175,"value":"function gradient(colorScale, label) {\n return html`

${\n label\n ? `

${label}

`\n : \"\"\n }${colorScale.map(\n (d) => html`

`\n )}

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"hctScale = d3.range(0, 256).map((hue) => {\n const color = MCU.Hct.from(hue, chroma, tone);\n const rgb = MCU.hexFromArgb(color.argb);\n return rgb;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"hslScale = d3.range(0, 256).map((hue) => {\n const color = d3.hsl(hue, chroma / 100, tone / 100);\n return color.formatHex();\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"hct1 = MCU.Hct.fromInt(MCU.argbFromHex(color1))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"hct2 = MCU.Hct.fromInt(MCU.argbFromHex(color2))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":551,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"hctScale2 = d3.range(0, steps).map((i) => {\n const hue1 = hct1.hue;\n let hue2 = hct2.hue;\n hue2 = correctHue(hue1, hue2);\n\n const hue = hue1 * (1 - i / steps) + hue2 * (i / steps);\n const chroma = hct1.chroma * (1 - i / steps) + hct2.chroma * (i / steps); // Interpolate chroma\n const tone = hct1.tone * (1 - i / steps) + hct2.tone * (i / steps); // Interpolate tone\n\n const color = MCU.Hct.from(hue, chroma, tone); // Convert back to color\n const rgb = MCU.hexFromArgb(color.argb);\n return rgb;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":259,"value":"hslScale2 = d3.range(0, steps).map((i) => {\n const c1 = d3.hsl(color1);\n const c2 = d3.hsl(color2);\n c2.h = correctHue(c1.h, c2.h);\n \n const v = [\"h\", \"s\", \"l\"].map(\n (key) => (c1[key] * (steps - i) + c2[key] * i) / steps\n );\n const color = d3.hsl(v[0], v[1], v[2]);\n return color.formatHex();\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":515,"value":"correctHue = (h1, h2) => {\n const diff = Math.abs(h1 - h2);\n if (diff > 180) {\n if (h1 > h2) {\n return h2 + 360;\n } else {\n return h2 - 360;\n }\n }\n return h2;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":"rgbScale2 = d3.range(0, steps).map((i) => {\n const c1 = d3.rgb(color1);\n const c2 = d3.rgb(color2);\n const v = [\"r\", \"g\", \"b\"].map((key) =>\n Math.round((c1[key] * (steps - i) + c2[key] * i) / steps)\n );\n // return v;\n const color = d3.rgb(v[0], v[1], v[2]);\n return color.formatHex();\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"steps = 100","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"voxelSize = 12","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"function genColor(x, y, z, size) {\n const color = MCU.Hct.from(\n (x / size) * 360,\n (y / size) * 100,\n (z / size) * 100\n );\n const hex = MCU.hexFromArgb(color.argb);\n const threeColor = new THREE.Color();\n const rgb = `rgb(${Math.round((x / size) * 256)},${Math.round(\n (y / size) * 256\n )},${Math.round((z / size) * 256)})`;\n\n const h = x / size;\n const s = y / size;\n const l = z / size;\n\n if (colorMode === \"HSL\") threeColor.setHSL(h, s, l);\n else threeColor.set(colorMode === \"HCT\" ? hex : rgb);\n return threeColor;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"cube = {\n const material = new THREE.MeshNormalMaterial();\n const geometry = new THREE.BoxGeometry(1, 1, 1);\n return new THREE.Mesh(geometry, material);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"camera = {\n const fov = 45;\n const aspect = width / height;\n const near = 1;\n const far = 1000;\n const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);\n camera.position.x = 30;\n camera.position.z = 30;\n camera.position.y = 20;\n return camera;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":495,"value":"width = 700","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"import { interval } from \"@mootari/range-slider\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"THREE = {\n const THREE = window.THREE = await require(\"three@0.99.0/build/three.min.js\");\n await require(\"three@0.99.0/examples/js/controls/OrbitControls.js\").catch(() => {});\n return THREE;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"MCU = import(\n \"https://cdn.skypack.dev/pin/@material/material-color-utilities@v0.2.7-MgMrT0nfmqoM3qMfy8sS/mode=imports,min/optimized/@material/material-color-utilities.js\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":498,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":665,"value":"Plot.plot({\n marks: [\n Plot.auto(null, {})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W4c","stdlib":"1"}} 24:null