30:[] 2e:{"title":"Scroll Grid","cells":[{"id":0,"value":"md`# Scroll Grid`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"threshold = 45","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"import { slider } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}