3f:null 40:["$","title",null,{"children":"Waffle Chart | Jasper Croome | Observable"}] 46:Te78,{ const waffleDimensions = { height: 15, width: 45 }; const xDomain = d3.range(0, waffleDimensions.width); const yDomain = d3.range(0, waffleDimensions.height); const dataEntries = Object.entries(data[0]); let totalValue = 0; let cumulativeValues = []; dataEntries.map((e) => { totalValue += e[1]; cumulativeValues.push({ [e[0]]: totalValue }); }); const valueRange = d3.range(0, totalValue); const cumulativeEntries = cumulativeValues.map((v) => Object.entries(v)); const cells = valueRange.map((v, vNdx) => ({ category: cumulativeEntries.find((e) => e[0][1] >= v)[0][0], x: Math.floor(vNdx / waffleDimensions.height), y: vNdx % waffleDimensions.height })); const xScale = d3.scaleBand(xDomain, [ dimensions.margin, dimensions.width - dimensions.margin ]); const yScale = d3.scaleBand(yDomain, [ dimensions.height - dimensions.margin, dimensions.margin ]); const svg = d3 .create("svg") .attr("width", dimensions.width) .attr("height", dimensions.height); if (axes.axisLeft.show) { svg .append("g") .attr("transform", `translate(${dimensions.margin}, 0)`) .attr("class", "axis") .call( d3 .axisLeft(yScale) .tickArguments([axes.axisLeft.tickCount, axes.axisLeft.tickFormat]) ); svg .append("text") .attr("class", "axisLabel left") .attr("text-anchor", "end") .attr("dy", ".75em") .attr("transform", "rotate(-90)") .attr("x", -dimensions.margin) .text(axes.axisLeft.label); } if (axes.axisBottom.show) { svg .append("g") .attr( "transform", `translate(0, ${dimensions.height - dimensions.margin})` ) .attr("class", "axis") .call( d3 .axisBottom(xScale) .tickArguments([ axes.axisBottom.tickCount, axes.axisBottom.tickFormat ]) ); svg .append("text") .attr("class", "axisLabel bottom") .attr("text-anchor", "beginning") .attr("x", dimensions.margin) .attr("y", dimensions.height - dimensions.margin / 3) .text(axes.axisBottom.label); } const axisPath = svg.selectAll(".axis .domain"); const axisTickLine = svg.selectAll(".axis .tick").selectAll("line"); const axisTickText = svg.selectAll(".axis .tick").selectAll("text"); const axisLabel = svg.selectAll(".axisLabel"); const axisLineStyleArray = Object.entries(axisStyle.lines); const axisFontStyleArray = Object.entries(axisStyle.font); const axisLabelStyleArray = Object.entries(axisLabelStyle); axisLineStyleArray.map((s) => { axisPath.style(s[0], s[1]); axisTickLine.style(s[0], s[1]); }); axisFontStyleArray.map((s) => { axisTickText.style(s[0], s[1]); }); axisLabelStyleArray.map((s) => { axisLabel.style(s[0], s[1]); }); svg .append("text") .text(title) .attr("fontSize", titleStyle["font-size"]) .attr("class", "title") .attr("y", dimensions.margin * (2 / 3)); const titleStyleArray = Object.entries(titleStyle); const titleText = svg.selectAll(".title"); titleStyleArray.map((t) => { titleText.style(t[0], t[1]); }); svg .selectAll("rect") .data(cells) .join("rect") .attr("x", (d) => xScale(d.x)) .attr("y", (d) => yScale(d.y)) .attr("height", yScale.bandwidth()) .attr("width", xScale.bandwidth()) .attr("fill", (d) => { return d3.interpolateRainbow( dataEntries.indexOf(dataEntries.find((e) => e[0] === d.category)) / dataEntries.length ); }) .attr("stroke", "white") .attr("stroke-width", "2px"); return svg.node(); }47:T4d5,function thresholdChecker(dValue, showThreshold, thresholdValue, criteria,) { const multiValues = Array.isArray(thresholdValue) const value = dValue const threshold = thresholdValue let sortedThreshold = [] if (multiValues) { sortedThreshold[0] = Math.min( threshold[0],threshold[1] ) sortedThreshold[1] = Math.max( threshold[0],threshold[1] ) } if (showThreshold) { switch(criteria) { case ">": { if (value > threshold) return 'threshold' } break; case "<": { if (value < threshold) return 'threshold' } break; case "<=": { if (value <= threshold) return 'threshold' } break; case ">=": { if (value >= threshold) return 'threshold' } break; case "><": { if (value > sortedThreshold[0] && value < sortedThreshold[1]) return 'threshold' } break; case "<>": { if (value < sortedThreshold[0] || value > sortedThreshold[1]) return 'threshold' } break; case "===": { if (multiValues) { if ( value === threshold[0] ) { return 'threshold' } else if ( value === threshold[1] ) { return 'subtle' } } else if ( value === threshold ) return 'threshold' } break; } } else return; } 48:T78f0,// Custom SVG Shapes handDrawn = svg` `49:[] 44:{"id":"c5eecad32d26f60e","slug":"waffle-chart","title":"Waffle Chart","thumbnail":"98b256bf7e4d796a6ec6391a2de8894ce3137a38f79ad0faf2ce2ce02467729a","access_level":"public","create_time":"$D2021-10-28T12:38:56.088Z","update_time":"$D2022-08-01T23:34:55.348Z","view_time":null,"first_public_time":"$D2021-10-28T14:30:11.926Z","has_unpublished_edits":null,"fork":{"id":"8f04ef7b039843a7","slug":"scatterplot","title":"ScatterPlot","owner":{"id":"4980cc230c98941f","login":"jasper","name":"Jasper Croome"}},"stars":0,"starred":false,"owner":{"type":"team","id":"4980cc230c98941f","login":"jasper","name":"Jasper Croome","avatar_url":"https://avatars-next.observableusercontent.com/608473607665cc282deb36830ffc0c0456605281332fdcb460041f875772ba68","tier":"starter_2024","bio":"Hi! I'm a Design Technologist based in Portland, Oregon (USA). ","following":false},"version":974,"publish_version":974,"role":null,"authored":false,"authors":[{"type":"individual","id":"4520200087dbe52b","login":"jasper","name":"Jasper Croome","avatar_url":"https://avatars-next.observableusercontent.com/608473607665cc282deb36830ffc0c0456605281332fdcb460041f875772ba68","tier":null,"bio":"Hi! I'm a Design Technologist based in Portland, Oregon (USA). ","following":false}],"members":[{"type":"individual","id":"4520200087dbe52b","login":"jasper","name":"Jasper Croome","avatar_url":"https://avatars-next.observableusercontent.com/608473607665cc282deb36830ffc0c0456605281332fdcb460041f875772ba68","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Waffle Chart","cells":[{"id":0,"value":"# Waffle Chart\n\nThis is a basic Waffle Chart, generally used to visualize the contribution of various groups to the value of one larger group. \n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":757,"value":"## 1. Declare your Data\n\nThis is where you would declare data as whatever you want to graph. For this chart, it needs to have a key-value pairing for each category, à la: \n\n```[{ plants:450, bacteria:70, fungi:12, archaea:7, protists:4, 'animals (including humans)':2, 'all the cars in the US':1 }]```\n\nYou can also add in a `category` value to allow for differentiation across groups. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"// example dataset\ndata = [\n {\n Plants: 450,\n Bacteria: 70,\n Fungi: 12,\n Archaea: 7,\n Protists: 4,\n \"Animals (including humans)\": 2,\n \"All the cars in the US\": 0.5\n }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":769,"value":"## 2. Define your Axes\nThis is where you define the axes - whether or not to show them, label them, and how to format the ticks.\nFor more on formatting numbers in d3, [take a look here](https://github.com/d3/d3-format).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"// \n\naxes = Object({\n axisLeft:{\n show:false,\n },\n axisBottom:{\n show:false,\n }, \n axisRight:{show:false}, // for now, this does nothing\n axisTop:{show:false} // samesies\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"dimensions = Object({ height: 400, width: 800, margin: 60 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":244,"value":"axisStyle = Object({\n lines:{\n stroke:'#858585',\n 'stroke-width':'1px'\n },\n font:{\n 'font-size':'16px',\n 'font-weight':400,\n 'fill':'#858585',\n 'stroke-width':'1px',\n 'font-family':'helvetica',\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":568,"value":"axisLabelStyle = Object({\n 'font-weight':400,\n 'font-size':'20',\n 'font-family':'helvetica',\n 'fill':'#6F6F6F'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":544,"value":"titleStyle = Object({\n 'font-size':'31.25px',\n 'font-weight':400,\n 'font-family':'helvetica, sans-serif',\n 'fill':'#707070'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"// the basic style for elements within the chart\nelementStyle = Object({ stroke: \"white\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":542,"value":"title = \"Sample Waffle Chart\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":805,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W49","stdlib":"1"}} 45:"$44:body"