3f:null 40:["$","title",null,{"children":"Destructured Waffle Chart - single level | Jasper Croome | Observable"}] 46:T140c,{ const dataEntries = Object.entries(finalData) .sort((a, b) => b[1].Total - a[1].Total) .filter((e) => primaryFoods.includes(e[0])); let firstTier = {}; dataEntries.map((d) => { firstTier[d[0]] = { value: Math.floor(d[1]["Total"]) }; Object.entries(d[1]) .filter((d) => d[0] !== "Total") .sort((a, b) => b[1] - a[1]); }); const firstTierEntries = Object.entries(firstTier); let totalValue = 0; let cumulativeValues = []; firstTierEntries.map((e) => { totalValue += e[1].value; cumulativeValues.push({ [e[0]]: totalValue }); }); const placeHolderData = firstTierEntries.map((d) => d3.range(0, d[1].value)); const valueRange = d3.range(0, totalValue).filter((v) => v > 0); const cumulativeEntries = cumulativeValues.map((v) => Object.entries(v)); const cellOffsets = valueRange.map((v, vNdx) => ({ category: cumulativeEntries.find((e) => e[0][1] >= v)[0][0], x: vNdx % waffleProps.dimensions.width, y: Math.floor(vNdx / waffleProps.dimensions.width) + 1 })); cellOffsets.forEach((c, cNdx) => { if (cNdx > 0) { const lastCell = cellOffsets[cNdx - 1]; if (lastCell["category"] !== c["category"]) { cellOffsets[cNdx]["y"] += 2; } if (lastCell["category"] === c["category"] && lastCell["y"] > c["y"]) { cellOffsets[cNdx]["y"] += 2; } } }); const cells = placeHolderData.map((p, pNdx) => { return p.map((v, vNdx) => ({ category: dataEntries[pNdx][0], x: vNdx % waffleProps.dimensions.width, y: Math.floor(vNdx / waffleProps.dimensions.width), yOffset: pNdx === 0 ? 0 : cellOffsets .filter( // look for the y value of the last item of the prior category (c) => c.category === dataEntries[pNdx - 1][0] ) .at(-1).y })); }); const xDomain = d3.range(0, 50); waffleProps.dimensions.height = Math.ceil( (totalValue * 1.2) / waffleProps.dimensions.width ); const yDomain = d3.range(0, 30); const xScale = d3.scaleBand(xDomain, [ dimensions.margin, dimensions.width - dimensions.margin ]); const yScale = d3.scaleBand(yDomain, [ dimensions.height - dimensions.margin, dimensions.margin ]); // add the svg const svg = d3 .create("svg") .attr("width", dimensions.width) .attr("height", dimensions.height); 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]); }); // last, add the cells cells.map((group, gNdx) => { svg .append("g") .attr("class", "firstTier") .selectAll("rect") .data(group) .join("rect") .attr("class", "rect") .attr("x", (d) => waffleProps.align === "left" ? xScale(d.x) : dimensions.width - xScale(d.x) ) .attr("id", (d, dNdx) => `${dNdx}`) .attr("y", (d) => dimensions.height - yScale(d.y + d.yOffset)) .attr("transform", (d) => { return `translate(0,${ dataEntries.indexOf(dataEntries.find((e) => e[0] === d.category)) * yScale.bandwidth() })`; }) .attr("height", yScale.bandwidth()) .attr("width", xScale.bandwidth()) .attr("fill", (d) => { if (!categories) { return colors[0]; } else { return colors[ dataEntries.indexOf(dataEntries.find((e) => e[0] === d.category)) % dataEntries.length ]; } }) .attr("stroke", (d) => { if (!categories) { return colors[0]; } else { return colors[ dataEntries.indexOf(dataEntries.find((e) => e[0] === d.category)) % dataEntries.length ]; } }); }); if (waffleProps.labels) { firstTierEntries.map((d, dNdx) => { svg .append("text") .text(`${d[0]}: ${valueCalc(d[1].value)}`) .attr("x", dimensions.margin) .attr("text-anchor", "beginning") .attr( "y", dimensions.height - yScale(cells[dNdx][0]["y"] + cells[dNdx][0]["yOffset"]) ) .attr( "transform", `translate(0,${ firstTierEntries.indexOf( firstTierEntries.find((e) => e[0] === d[0]) ) * yScale.bandwidth() - 3 })` ) .attr("class", "detailLabel"); }); } // apply the standard style to the elements const styleArray = Object.entries(elementStyle); styleArray.forEach((s) => { svg.selectAll("rect").style(s[0], s[1]); }); const { detailLabelStyle } = chartObjectStyle; const detailLabelStyleArray = Object.entries(detailLabelStyle); detailLabelStyleArray.forEach((s) => { svg.selectAll(".detailLabel").style(s[0], s[1]); }); return svg.node(); }47:T78f0,// Custom SVG Shapes handDrawn = svg` `48:[] 44:{"id":"e0552c86b02e1ed9","slug":"destructured-waffle-chart-single-level","title":"Destructured Waffle Chart - single level","thumbnail":"2e3279fcd5853f8c91b824f9c6b0a9611511aa5a5bb4301deaaa0e0bbb359753","access_level":"public","create_time":"$D2021-11-12T04:37:23.866Z","update_time":"$D2021-11-13T22:05:54.932Z","view_time":null,"first_public_time":"$D2021-11-12T14:12:42.053Z","has_unpublished_edits":null,"fork":{"id":"e5943a17424479a1","slug":"grouped-waffle-chart-single-shape-per-category","title":"Grouped Waffle Chart - single shape per category","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":1761,"publish_version":1761,"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":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Destructured Waffle Chart - single level","cells":[{"id":0,"value":"# Destructured Waffle Chart - single level\n\nThis is a Destructured Waffle Chart, generally used to visualize the contribution of various groups to the value of one larger group. This is different from the basic waffle chart in that each category is grouped together into a standalone cluster, to aid in comparison of size across the overall 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```\n{category:{Total:number}}\n```\n","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 = Object({})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1278,"value":"waffleAlign = \"left\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1285,"value":"waffleLabels = true","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1716,"value":"viewof categories = Inputs.toggle({ label: \"Color by Category\" }) || false","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1460,"value":"import {landUsePer1000kCals} from \"@jasper/getting-food-resource-data-from-github\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1482,"value":"primaryFoods = Array(\n \"Tofu (soybeans)\",\n \"Peas\",\n \"Fish (farmed)\",\n \"Prawns (farmed)\",\n \"Poultry Meat\",\n \"Pig Meat\",\n \"Lamb & Mutton\",\n \"Beef (beef herd)\",\n \"Beef (dairy herd)\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1463,"value":"metricAccessor = \"Total Emissions\"","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":1761,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1499,"value":"sortedData = [\n Object({\n Entity: \"Beef (beef herd)\",\n Code: \"\",\n Year: \"2010\",\n \"Total Emissions\": \"269.35\"\n }),\n Object({\n Entity: \"Pig Meat\",\n Code: \"\",\n Year: \"2010\",\n \"Total Emissions\": \"52.33\"\n }),\n Object({\n Entity: \"Poultry Meat\",\n Code: \"\",\n Year: \"2010\",\n \"Total Emissions\": \"38.18\"\n }),\n Object({\n Entity: \"Lamb & Mutton\",\n Code: \"\",\n Year: \"2010\",\n \"Total Emissions\": \"23.70\"\n })\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1740,"value":"finalData = Object({})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1461,"value":"sortedData.forEach((m) => {\n finalData[m.Entity] = { Total: m[metricAccessor] };\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1333,"value":"valueCalc = (n) => `~${n / 10}T tonnes emissions` // this converts the values in the data object to gigatons","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1220,"value":"**Anything below this box is maintenance-related, and doesn't directly change the experience of the grouped Waffle Chart**\n\n(apart from maybe breaking it)\n____","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1061,"value":"waffleProps = Object({\n dimensions: {\n width: 25\n },\n labels: waffleLabels ?? true,\n align: waffleAlign ?? \"left\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1532,"value":"import { colors, chartObjectStyle } from \"@jasper/carbon-almanac-stylesheet\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"dimensions = Object({ height: 800, width: innerWidth, margin: 40 })","pinned":false,"hidden":false,"mode":"ojs","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":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({\n \"stroke-width\": \".5px\",\n // fill: \"#1D874E\",\n stroke: \"whitesmoke\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":542,"value":"title = `${metricAccessor}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":805,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W48","stdlib":"1"}} 45:"$44:body"