3e:null 3f:["$","title",null,{"children":"waffle chart | Allison Towey | Observable"}] 45:T78c,function waffle (value = 90, { bind = null, // pass in a d3 selection i.e d3.select('class/div') shape = 'circle', // 'circle' 'rect' activeFill = '#008cbc', // colour of the square or circle passiveFill = '#e5e7de', // when there is no value strokeCol = '#666666', shapeSize = 15, strokeWidth = 0, margin = { top: shapeSize, right: shapeSize, bottom: shapeSize, left: shapeSize, } } = {}) { const size = (shapeSize + (strokeWidth * 2)) * 10 // append the svg if first render if (bind.select('svg').empty()) { bind .append('svg') .attr('width', size + margin.left + margin.right) .attr('height', size + margin.top + margin.bottom) .append('g') .attr('transform', `translate(${margin.left}, ${margin.top})`) .call(grid10by10) } function grid10by10 (sel) { const scaleX = d3.scaleLinear() .domain([0, 9]) .range([0, shapeSize * 10]) const scaleY = d3.scaleLinear() .domain([0, 9]) .range([shapeSize * 10, 0]) const render = sel.selectAll(shape) .data(d3.range(100)) .join(shape) .attr('stroke-width', strokeWidth) .attr('stroke', strokeCol) // note < not <= as counting from 0 .attr('fill', (d, i) => (i < value) ? activeFill : passiveFill) if (shape === 'rect') { render .attr('x', (d, i) => { const n = i % 10 return scaleX(n) }) .attr('y', (d, i) => { const n = Math.floor(i / 10) return scaleY(n) }) .attr('width', shapeSize) .attr('height', shapeSize) } else { render .attr('cx', (d, i) => { const n = i % 10 return scaleX(n) }) .attr('cy', (d, i) => { const n = Math.floor(i / 10) return scaleY(n) }).attr('r', shapeSize / 2) } } return bind.select('svg g').call(grid10by10) }46:[] 43:{"id":"d070a4217c900ef5","slug":null,"title":"waffle chart","thumbnail":"64193bcf6e94401f04dbd27cd146d4ca9db1f23207553257a577df2d0b564bb3","access_level":"public","create_time":"$D2023-03-26T23:16:01.528Z","update_time":"$D2023-03-26T23:17:00.612Z","view_time":null,"first_public_time":"$D2023-03-26T23:16:01.528Z","has_unpublished_edits":null,"fork":{"id":"7abeec1ebffa5a83","slug":"waffle-chart","title":"waffle chart","owner":{"id":"956970941b62fd35","login":"eesur","name":"Sundar Singh"}},"stars":0,"starred":false,"owner":{"type":"team","id":"45b94aa59ded2be7","login":"allisontowey","name":"Allison Towey","avatar_url":"https://avatars-next.observableusercontent.com/7634d1b746a03d0257502b4babb694c0c6a25400baea9bd73579d042c47d02a2","tier":"starter_2024","bio":"","following":false},"version":199,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1d25cda1584bb4e1","login":"allisontowey","name":"Allison Towey","avatar_url":"https://avatars-next.observableusercontent.com/7634d1b746a03d0257502b4babb694c0c6a25400baea9bd73579d042c47d02a2","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"1d25cda1584bb4e1","login":"allisontowey","name":"Allison Towey","avatar_url":"https://avatars-next.observableusercontent.com/7634d1b746a03d0257502b4babb694c0c6a25400baea9bd73579d042c47d02a2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"waffle chart","cells":[{"id":0,"value":"# waffle chart\nsimple reusable [waffle](https://datavizproject.com/data-type/percentage-grid/). Updated to render with circles or squares\n\nfor a more flexible grid check out: https://observablehq.com/@eesur/modulo-operation-to-create-a-grid-v2","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":19,"value":"vis = html`

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"waffle(value, {\n bind: d3.select(visSquare), // pass in the selection\n activeFill: '#64a6d1',\n passiveFill: '#dedede',\n shape: 'rect'\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"---------\n```\n __ __ _______ ___ _______ _______ ______ _______ ___ \n| | | || || | | || || _ | | || | \n| |_| || ___|| | | _ || ___|| | || | _____||___| \n| || |___ | | | |_| || |___ | |_|| | |_____ ___ \n| || ___|| |___ | ___|| ___|| __ ||_____ || | \n| _ || |___ | || | | |___ | | || _____| ||___| \n|__| |__||_______||_______||___| |_______||___| |||_______| \n\n\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":173,"value":"test with multiple renders:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":53,"value":"visWrap = html`

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"{ // have a way of updating the cell put not creating extra dom elements\n if (d3.select(visWrap).empty()) { // don't reload on any cell refreshes\n testMultipleRender(visWrap);\n } else {\n d3.select(visWrap).selectAll('div').remove();\n testMultipleRender(visWrap);\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"viewof activeFill = Inputs.color({label: \"Active fill:\", value: \"#505423\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"viewof passiveFill = Inputs.color({label: \"Passive fill:\", value: \"#eeeeee\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"function testMultipleRender(sel, col) { // render dom and bind svg visual to it\n return [30, 45, 25, 80, 60, 5, 20, 25, 15, 10, 90, 50].forEach((d, i) => {\n const div = d3.select(visWrap).append('div').attr('class', 'ref-' + i)\n d3.select('.ref-' + i).selectAll('h3').remove(); // tidy for refreshes on page\n d3.select('.ref-' + i).append('h3').attr('class', 'label').text(d + '%')\n waffle(d, {\n bind: d3.select('.ref-' + i),\n activeFill: activeFill,\n passiveFill: passiveFill,\n })\n })\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"

\n\n\n","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W46","stdlib":"1"}} 44:"$43:body"