2d:null 2e:["$","title",null,{"children":"CSS Color Keywords | వీవెన్ | Observable"}] 33:T545,{ const height = width * .55; const margin = {top: 8, right: 48, bottom: 48, left: 8}; const svg = d3.create('svg').attr('viewBox', [0, 0, width, height]); const colorspace = 'lch' const xChannel = 'h'; const yChannel = 'l'; const rChannel = 'c'; const x = d3.scaleLinear() .domain(d3.extent(data, c => getValue(c[0], colorspace, xChannel))) .range([margin.left, width - margin.right]) //.nice() ; const y = d3.scaleLinear() .domain(d3.extent(data, c => getValue(c[0], colorspace, yChannel))) .range([height - margin.bottom, margin.top]) //.nice() ; const r = d3.scalePow() .exponent(.5) .domain(d3.extent(data, c => getValue(c[0], colorspace, rChannel))) .range([16, 6]) ; svg.append('g').attr('transform', 'translate(0, ' + (height - margin.bottom) +')') .call(d3.axisBottom(x)) ; svg.append('g').attr('transform', 'translate(' + (width - margin.right) +', 0)') .call(d3.axisRight(y)) ; svg.append('g').selectAll('circle').data(data).join('circle') .attr('cx', c => x(getValue(c[0], colorspace, xChannel))) .attr('cy', c => y(getValue(c[0], colorspace, yChannel))) .attr('r', c => r(getValue(c[0], colorspace, rChannel))) .attr('fill', c => c[0]) .attr('stroke', 'grey') .attr('stroke-width', .5) ; return svg.node(); }34:[{"id":"d69c6aa9ac146cc6ecec88f7e77b8a53a736c3965008594bae1af2d9ee3bdec488d578a44379c4dc64d1a2bded43271fd5651969631673c15e7eb553285b813c","href":"https://static.observableusercontent.com/files/d69c6aa9ac146cc6ecec88f7e77b8a53a736c3965008594bae1af2d9ee3bdec488d578a44379c4dc64d1a2bded43271fd5651969631673c15e7eb553285b813c","name":"css-color-keywords@1.json","type":"application/json","lastModified":1589812916839.758,"size":6508}] 31:{"id":"aa128660efffbc80","slug":"css-color-keywords","title":"CSS Color Keywords","thumbnail":"284716d8f8a739f0c4fc7c5007a43aa5aca567c913a1a4989cb63dbe85637668","access_level":"public","create_time":"$D2020-05-18T14:36:46.619Z","update_time":"$D2025-09-05T15:49:33.548Z","view_time":null,"first_public_time":"$D2020-05-18T16:00:45.029Z","has_unpublished_edits":null,"fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"9072823fe9d379f2","login":"veeven","name":"వీవెన్","avatar_url":"https://avatars-next.observableusercontent.com/c857fc38aefa0e86178487179f5b3ee50a45c0bf0b00ab6d89a34d096a9dfbf0","tier":"starter_2024"},"version":366,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"ad0d391dc4298470","login":"veeven","name":"వీవెన్","avatar_url":"https://avatars-next.observableusercontent.com/c857fc38aefa0e86178487179f5b3ee50a45c0bf0b00ab6d89a34d096a9dfbf0","tier":null}],"members":[{"type":"individual","id":"ad0d391dc4298470","login":"veeven","name":"వీవెన్","avatar_url":"https://avatars-next.observableusercontent.com/c857fc38aefa0e86178487179f5b3ee50a45c0bf0b00ab6d89a34d096a9dfbf0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"CSS Color Keywords","cells":[{"id":0,"value":"md`# CSS Color Keywords`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"html `

\n${\n data\n //.filter(c => c[1].search(',') > -1)\n .sort(sorter('lch', 'h', 'desc'))\n .sort(sorter('lch', 'l', 'asc')) \n .sort(sorter('lch', 'c', 'asc'))\n \n .map(c => {\n const space = 'lch';\n const channel = 'h';\n const color = c[0];\n const name = c[1];\n const cv = getValue(color, space, channel);\n return html `\n \n ${name}\n \n \n ` // end backtick\n })\n}\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":311,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":328,"value":"d3.extent(data.map(c => getValue(c[0], 'lch', 'c')))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"md `## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"rawdata = FileAttachment(\"css-color-keywords@1.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"data = Array.from(new Set(rawdata.map(c => c[1]))).map(hex => [hex, rawdata.filter(c => c[1] == hex).map(c => c[0]).join(', ')])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"html `\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"sorter = (space, channel, order) => function(a, b) {\n const args = Array.from(arguments)\n .map(i => {\n const cv = getValue(i[0], space, channel); //d3[space](i[1])[channel];\n return cv ? cv : 0;\n });\n const o = order == 'desc' || order == 'descending'? 'descending' : 'ascending';\n return d3[o](args[0], args[1]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"getValue = (color, space, channel) => {\n const v = d3[space](color)[channel];\n return v ? v : 0;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"md `## Libraries/Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"