2d:null 2e:["$","title",null,{"children":"OS Paper Color Picker Tool | maegul | Observable"}] 33:[] 31:{"id":"d88a68e2dd767e38","slug":"os-paper-color-picker-tool","title":"OS Paper Color Picker Tool","thumbnail":"41a02a270625e280aa0c608cbee1e8f851a55e558bc3734d8422fe0079138026","access_level":"public","create_time":"$D2018-05-22T06:54:52.080Z","update_time":"$D2018-09-04T15:40:26.534Z","view_time":null,"first_public_time":"$D2018-05-22T08:07:09.117Z","has_unpublished_edits":null,"fork":true,"stars":2,"starred":false,"owner":{"type":"team","id":"582a897bfa71c421","login":"maegul","name":"maegul","avatar_url":"https://avatars-next.observableusercontent.com/7c5e31845af2035aa4a8c86acb7900e91c2a4d1789ca552d83278ab76227e151","tier":"starter_2024"},"version":322,"publish_version":322,"role":null,"authored":false,"authors":[{"type":"individual","id":"8e919082e67bc8f5","login":"maegul","name":"Errol Lloyd","avatar_url":"https://avatars-next.observableusercontent.com/7c5e31845af2035aa4a8c86acb7900e91c2a4d1789ca552d83278ab76227e151","tier":null}],"members":[{"type":"individual","id":"8e919082e67bc8f5","login":"maegul","name":"Errol Lloyd","avatar_url":"https://avatars-next.observableusercontent.com/7c5e31845af2035aa4a8c86acb7900e91c2a4d1789ca552d83278ab76227e151","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"OS Paper Color Picker Tool","cells":[{"id":195,"value":"md`# OS Paper Color Picker Tool`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"md`#### HSL Rainbow Colors`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"ramp(t => `hsl(${t * 360},${saturation}%,${lightness}%)`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"svg\n`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"md`#### HSV Rainbow Colors (MatLab?)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":250,"value":"ramp(t=> `${d3.hsv(t*360, saturation * 0.01, value)}`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":253,"value":"svg\n`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"viewof saturation = slider({\n min: 0, \n max: 100, \n step: 1, \n value: 100, \n title: \"Saturation (HSL & HSV)\", \n description: \"0-100%\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"viewof lightness = slider({\n min: 0, \n max: 100, \n step: 1, \n value: 60, \n title: \"Lightness (HSL)\", \n description: \"0-100%\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":246,"value":"viewof value = slider({\n min: 0, \n max: 1, \n step: 0.01, \n value: 1, \n title: \"Value (HSV)\", \n description: \"brightness for HSV only (0-1)\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"viewof num_steps = slider({\n min: 0, \n max: 30, \n step: 1, \n value: 10, \n title: \"Number of Steps\", \n description: \"To see how evenly spaced steps look in the color space (note: not circular, first and last are not the same)\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"table(d3.range(num_steps).map(\n s=>({\n step: s+1 +'',\n HSL: `${d3.hsl((s/num_steps) * 360, saturation*0.01,lightness*0.01)}`,\n HSV: `${d3.hsv((s/num_steps) * 360, saturation * 0.01, value)}`\n })\n )\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":313,"value":"HSL_cols = d3.range(num_steps).map(s=>`${d3.hsl((s/num_steps) * 360, saturation*0.01,lightness*0.01)}`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":316,"value":"HSV_cols = d3.range(num_steps).map(s=>`${d3.hsv((s/num_steps) * 360, saturation * 0.01, value)}`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"md`### Radius Calcs (ignore)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"rad_y = (height-10)/2.1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"rad_x = width/num_steps/2.1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"height = 50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"md`# Color Ramp\n\nA simple, reusable ramp for visualizing color scales.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"function ramp(color, n = 256) {\n const canvas = DOM.canvas(n, 1);\n const context = canvas.getContext(\"2d\");\n canvas.style.margin = \"${rad_x}\";\n canvas.style.width = \"calc(100%)\";\n canvas.style.height = \"40px\";\n canvas.style.imageRendering = \"pixelated\";\n for (let i = 0; i < n; ++i) {\n context.fillStyle = color(i / (n - 1));\n context.fillRect(i, 0, 1, 1);\n }\n return canvas;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"ramp(t => `hsl(${t * 360},100%,50%)`) // The dreaded angry rainbow!","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"ramp(t=> `${d3.hsv(t*360, 0.5, 1)}`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"md`## Could be Quite useful as a quasi color-blind friendly cyclical color scale\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"ramp(d3.interpolateGreys)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"ramp(d3.interpolateRainbow) // A better cylical color scheme.","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"ramp(d3.interpolateViridis) // A nice sequential color scheme.","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"ramp(d3.interpolateViridis, 12) // With a discrete number of steps.","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"ramp(d3.interpolateRgb(\"red\", \"blue\")) // Also works nicely with D3 interpolators.","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"ramp(d3.interpolateHclLong(\"red\", \"blue\"))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"md`## Could be Quite useful as a quasi color-blind friendly cyclical color scale`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"ramp(d3.interpolateSpectral)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"ramp(d3.interpolateCubehelixDefault)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"// d3 = require(\"d3-scale-chromatic@1\", \"d3-interpolate@1\")\nd3 = require('d3', 'd3-hsv')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"import {table} from \"@tmcw/tables@444\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 32:"$31:body"