30: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) }31:[] 2e:{"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"},{"id":19,"value":"vis = html`

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":21,"value":"waffle(value, {\n bind: d3.select(vis), // pass in the selection\n activeFill: '#3dbd5d'\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":23,"value":"viewof value = Inputs.range([1, 100], {label: \"Pct\", step: 1, value: 45})","pinned":false,"hidden":false,"mode":"ojs"},{"id":137,"value":"visSquare = html`

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":140,"value":"waffle(value, {\n bind: d3.select(visSquare), // pass in the selection\n activeFill: '#de4500',\n passiveFill: '#ebd999',\n shape: 'rect'\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"---------\n```\n __ __ _______ ___ _______ _______ ______ _______ ___ \n| | | || || | | || || _ | | || | \n| |_| || ___|| | | _ || ___|| | || | _____||___| \n| || |___ | | | |_| || |___ | |_|| | |_____ ___ \n| || ___|| |___ | ___|| ___|| __ ||_____ || | \n| _ || |___ | || | | |___ | | || _____| ||___| \n|__| |__||_______||_______||___| |_______||___| |||_______| \n\n\n```","pinned":false,"hidden":false,"mode":"md"},{"id":173,"value":"test with multiple renders:","pinned":false,"hidden":false,"mode":"md"},{"id":53,"value":"visWrap = html`

`","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":181,"value":"viewof activeFill = Inputs.color({label: \"Active fill:\", value: \"#505423\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":187,"value":"viewof passiveFill = Inputs.color({label: \"Passive fill:\", value: \"#eeeeee\"})","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":57,"value":"

\n\n\n","pinned":true,"hidden":false,"mode":"html"}],"files":"$W31","stdlib":"1","titling":"auto"}