2b:null 2c:["$","title",null,{"children":"Scroll Grid | Trevor Manz | Observable"}] 31:[] 2f:{"id":"99477be4dd921fbe","slug":"scroll-grid","title":"Scroll Grid","thumbnail":"c0d9cca0ab33f534d16f8f4e7debbf6a1aeeaab07d40e3211bb8ca1c5e8b345a","access_level":"public","create_time":"$D2018-08-04T16:06:50.968Z","update_time":"$D2018-10-23T20:38:17.287Z","view_time":null,"first_public_time":"$D2018-08-04T17:27:22.660Z","fork":false,"stars":13,"starred":false,"owner":{"type":"team","id":"eea54452b8f3877b","login":"manzt","name":"Trevor Manz","avatar_url":"https://avatars-next.observableusercontent.com/2a99588ee6cff6ad670b3293028aef7dfc1103b71c4553590075886e2deba4c1","tier":"starter_2024"},"version":162,"publish_version":162,"role":null,"authored":false,"authors":[{"type":"individual","id":"075e7cdc2ad9e61e","login":"manzt","name":"Trevor Manz","avatar_url":"https://avatars-next.observableusercontent.com/2a99588ee6cff6ad670b3293028aef7dfc1103b71c4553590075886e2deba4c1","tier":null}],"members":[{"type":"individual","id":"075e7cdc2ad9e61e","login":"manzt","name":"Trevor Manz","avatar_url":"https://avatars-next.observableusercontent.com/2a99588ee6cff6ad670b3293028aef7dfc1103b71c4553590075886e2deba4c1","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":8,"collection":null,"type":"notebook","body":{"title":"Scroll Grid","cells":[{"id":0,"value":"md`# Scroll Grid`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"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"},{"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","author":"$undefined","summary":"$undefined"},{"id":27,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":52,"value":"threshold = 45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"import { slider } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"