28:null 29:["$","title",null,{"children":"Scroll Grid | Lila Conlee | Observable"}] 2e:[] 2c:{"id":"9e04a6d4b5f4688b","slug":null,"title":"Scroll Grid","thumbnail":"9525e242c4994fe44fad3508f298d75bd78370f9044a1d958d8c686cdf4bdc3d","access_level":"public","create_time":"$D2022-12-12T17:51:31.584Z","update_time":"$D2022-12-12T17:51:51.430Z","view_time":null,"first_public_time":"$D2022-12-12T17:51:31.584Z","has_unpublished_edits":null,"fork":{"id":"99477be4dd921fbe","slug":"scroll-grid","title":"Scroll Grid","owner":{"id":"eea54452b8f3877b","login":"manzt","name":"Trevor Manz"}},"stars":0,"starred":false,"owner":{"type":"team","id":"ece51d3b54f8848b","login":"lilaconlee-id","name":"Lila Conlee","avatar_url":"https://avatars-next.observableusercontent.com/f70c8419e599320522f0703aab6aa594bee34f70ef45f1b7dd509b427f4e5c35","tier":"starter_2024"},"version":163,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"c319b963ebd22b41","login":"lilaconlee-id","name":"Lila Conlee","avatar_url":"https://avatars-next.observableusercontent.com/f70c8419e599320522f0703aab6aa594bee34f70ef45f1b7dd509b427f4e5c35","tier":null}],"members":[{"type":"individual","id":"c319b963ebd22b41","login":"lilaconlee-id","name":"Lila Conlee","avatar_url":"https://avatars-next.observableusercontent.com/f70c8419e599320522f0703aab6aa594bee34f70ef45f1b7dd509b427f4e5c35","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Scroll Grid","cells":[{"id":0,"value":"md`# Scroll Grid`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"html`\n

\n ${a2}%\n ${ a2 <= threshold ? \n `${a2 - threshold}%` : \n `+${a2 - threshold}%`\n }\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"chart = {\n const div = html`

`\n const waffle = d3.select(div)\n \n // Create an array with numbers 0 - 99\n const numbers = d3.range(100);\n\n // For each item in the array, add a div element\n // if the number is < 5, color it red, otherwise gray\n waffle\n .selectAll('.block')\n .data(numbers)\n .enter()\n .append('div')\n .attr('class', 'block')\n .style('background-color', d => {\n if (d < threshold) {\n return '#00A99D'\n } else if (d < a2) {\n return '#CC8685'\n } else {\n return '#CCCCCC'\n }\n })\n .style('width', d => {\n if (d < threshold && d >= a2) {\n return '10px'\n } else {\n return '20px'\n }\n })\n .style('height', d => {\n if (d < threshold && d >= a2) {\n return '10px'\n } else {\n return '20px'\n }\n })\n .style('margin', d => {\n if (d < threshold && d >= a2) {\n return '9px'\n } else {\n return '4px'\n }\n })\n \n return div\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"viewof a2 = slider({\n min: 0, \n max: 100, \n step: 1, \n value: 20, \n title: \"Input\", \n description: \"\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"threshold = 45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"import { slider } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2e","stdlib":"1"}} 2d:"$2c:body"