3e:null 3f:["$","title",null,{"children":"waffle chart | Altynai Mambetova | 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":"b94be9afd1c73a01","slug":null,"title":"waffle chart","thumbnail":"83eea6bfb41671ca90909786f1548aa64bde3a96cc81c37a99db83d7858a8ac2","access_level":"public","create_time":"$D2023-04-03T12:56:31.667Z","update_time":"$D2023-04-03T13:09:20.600Z","view_time":null,"first_public_time":"$D2023-04-03T12:56:31.667Z","has_unpublished_edits":null,"fork":{"id":"d070a4217c900ef5","slug":null,"title":"waffle chart","owner":{"id":"45b94aa59ded2be7","login":"allisontowey","name":"Allison Towey"}},"stars":0,"starred":false,"owner":{"type":"team","id":"1835c25f9d3b6530","login":"c40861ee70b7298a","name":"Altynai Mambetova","avatar_url":"https://avatars-next.observableusercontent.com/3207f1d6efc219872bab7af51f369129838870c3cf6b9b96776f4097ac75ee65","tier":"starter_2024","bio":"","following":false},"version":212,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"c40861ee70b7298a","login":"c40861ee70b7298a","name":"Altynai Mambetova","avatar_url":"https://avatars-next.observableusercontent.com/3207f1d6efc219872bab7af51f369129838870c3cf6b9b96776f4097ac75ee65","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"c40861ee70b7298a","login":"c40861ee70b7298a","name":"Altynai Mambetova","avatar_url":"https://avatars-next.observableusercontent.com/3207f1d6efc219872bab7af51f369129838870c3cf6b9b96776f4097ac75ee65","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"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":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"data = d3.csv(\"https://docs.google.com/spreadsheets/d/e/2PACX-1vRsQR8bQ48BNK0f7PSqZCOZjyvyEWiMARsItjlLqQb5vHCToDekT0V9Rhb_MjXetQ/pub?gid=1699877571&single=true&output=csv\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"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"