3e:null 3f:["$","title",null,{"children":"Budget Waffle Chart | Altynai Mambetova | Observable"}] 45:T8c3,function renderChart(data, currency, height) { const waffles = createWaffles(data); const colorScale = color(data); const svg = d3.create("svg") .style("cursor", "default") .style("overflow", "visible") .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto;"); // fixes the mobile view const g = svg.selectAll(".waffle") .data(waffles) .join("g") .attr("class", "waffle"); if (!whole) { const numPerRow = Math.floor(width / (waffleSize + padding.x)); g.attr("transform", (d, i) => { const r = Math.floor(i / numPerRow); const c = i - r * numPerRow; return `translate(${c * (waffleSize + padding.x)},${r * (waffleSize + padding.y)})` }); } const cellSize = scale.bandwidth(); const half = cellSize / 2; const cells = g.append("g") .selectAll(options.shape) .data(d => d) .join(options.shape) .attr("fill", d => d.index === -1 ? wbezColors().get("lightgray") : colorScale(d.index)); cells.attr("x", d => scale(d.x)) .attr("y", d => whole ? 0 : scale(d.y)) .attr("rx", 3).attr("ry", 3) .attr("width", cellSize).attr("height", cellSize) g.append("text") .style("font-size", 20) .style("font-weight", "bold") .attr("dy", "1.5em") .attr("text-anchor", "middle") .attr("fill", (d, i) => colorScale(i)) .attr("transform", `translate(${waffleSize / 2},0)`) //.text((d, i) => `${chartData[i].ratio.toFixed(0)}%`); g.append("g") .attr("transform", `translate(0,${waffleSize + padding.y / 2.5})`) .call(g => g.append("text") .attr("font-size", 18) .attr("font-weight", 800) .attr("font-family", "Source Sans Pro") .attr("fill", "#636466") .text((d, i) => data[i].category)) .call(g => g.append("text") .attr("dy", "1em") .attr("font-size", 14) .attr("font-family", "Source Sans Pro") .attr("fill", "#636466") .text((d, i) => { if (currency == true) { return toCurrency(data[i].amount) } else { return toPercent(data[i].amount) }})) return svg.node(); }46:[{"id":"78d29208f4719a75aa578486a7e6440dbf89079b98419b1844767bd4a8d2347524229a75a84d3f6e6f7d819ae8f8504ff147fc57f2d739dc19e10e488b09396a","href":"https://static.observableusercontent.com/files/78d29208f4719a75aa578486a7e6440dbf89079b98419b1844767bd4a8d2347524229a75a84d3f6e6f7d819ae8f8504ff147fc57f2d739dc19e10e488b09396a","name":"viz_data - anna (2).csv","type":"text/csv","lastModified":1680525437077.136,"size":192},{"id":"28358f9c46b549d8fa972cc72f2ef27a7a904a4d25f720607ed38553b5a4b6bc3e8b61c39945eb5db80e00c742132358ab2d48a6ba7e74ffe4d59c4c7ab99fb6","href":"https://static.observableusercontent.com/files/28358f9c46b549d8fa972cc72f2ef27a7a904a4d25f720607ed38553b5a4b6bc3e8b61c39945eb5db80e00c742132358ab2d48a6ba7e74ffe4d59c4c7ab99fb6","name":"viz_data - alona (1).csv","type":"text/csv","lastModified":1680525437077.136,"size":123},{"id":"c737b52d503d1b35b33f60ae2bb2c01fb52fd039c3b048a00b4af718c31dae6f8aa0616e5f5750cd0b3d3b5c7df4a07c7e2e1af82a563fcc7a9fc3e7e654d12a","href":"https://static.observableusercontent.com/files/c737b52d503d1b35b33f60ae2bb2c01fb52fd039c3b048a00b4af718c31dae6f8aa0616e5f5750cd0b3d3b5c7df4a07c7e2e1af82a563fcc7a9fc3e7e654d12a","name":"viz_data - ari.csv","type":"text/csv","lastModified":1680525437077.136,"size":172},{"id":"a32cf4bc732d1686628bf60c10a0e2ffedaf957d685e4daaf5bb87dc28b1ec12be2310b98dc7a29336e121674b5ae793ef8d6895aa8159be14cac5c7b413f540","href":"https://static.observableusercontent.com/files/a32cf4bc732d1686628bf60c10a0e2ffedaf957d685e4daaf5bb87dc28b1ec12be2310b98dc7a29336e121674b5ae793ef8d6895aa8159be14cac5c7b413f540","name":"viz_data - kyle (3).csv","type":"text/csv","lastModified":1680525437077.136,"size":266},{"id":"0735eaf3f7882c8deebd7d7b2b4bbb1dafd8b7c483179bb7c08a0f5c351185759265eafe4e42ecc77fcbfa58e31a2658d6686e57e3f5f63a0e4181b23ee316f8","href":"https://static.observableusercontent.com/files/0735eaf3f7882c8deebd7d7b2b4bbb1dafd8b7c483179bb7c08a0f5c351185759265eafe4e42ecc77fcbfa58e31a2658d6686e57e3f5f63a0e4181b23ee316f8","name":"viz_data - richie (1).csv","type":"text/csv","lastModified":1680525437077.136,"size":221}] 43:{"id":"3b2c45b674368853","slug":null,"title":"Budget Waffle Chart","thumbnail":"057038d0bc6caec713f74e5119395991cd5d8a64e5be091256f5a8ded89d8787","access_level":"public","create_time":"$D2023-04-03T12:37:17.077Z","update_time":"$D2023-04-03T12:52:34.746Z","view_time":null,"first_public_time":"$D2023-04-03T12:37:17.077Z","has_unpublished_edits":null,"fork":{"id":"820f952821dd5b64","slug":null,"title":"Budget Waffle Chart","owner":{"id":"451a0400736e977f","login":"charmainerunes","name":"Charmaine Runes"}},"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":606,"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":"Budget Waffle Chart","cells":[{"id":0,"value":"md`# Budget Waffle Chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"viewof options = form(html`

\n Style: \n Shape: \n`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":379,"value":"chatter = new Object({\n //\"hed\": \"Ari spends a third of their income on rent\",\n //\"subhed\": \"Monthly expenses by category\",\n \"src\": \"Provided to WBEZ\",\n \"credit\": \"Charmaine Runes/WBEZ\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":404,"value":"viewof ariExpensesChart = { \n const outerContainer = html`

${style()}

`\n const chartContainer = html`

`\n const chartHed = html`

Monthly budget breakdown

`\n //const chartSubhed = html`

${chatter.subhed}

`\n const chartAttribution = html`

`\n \n const chartSource = html`Source: ${chatter.src}
`\n const chartCredit = html`Visualization: ${chatter.credit}
`\n\n chartAttribution.appendChild(chartSource);\n chartAttribution.appendChild(chartCredit);\n\n chartContainer.appendChild(chartHed);\n //chartContainer.appendChild(chartSubhed);\n chartContainer.appendChild(renderChart(ariData, true, 300));\n chartContainer.appendChild(chartAttribution);\n \n outerContainer.appendChild(chartContainer);\n outerContainer.appendChild(html`
`);\n \n return outerContainer;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":478,"value":"viewof annaExpensesChart = { \n const outerContainer = html`

${style()}

`\n const chartContainer = html`

`\n const chartHed = html`

Monthly budget breakdown

`\n //const chartSubhed = html`

${chatter.subhed}

`\n const chartAttribution = html`

`\n \n const chartSource = html`Source: ${chatter.src}
`\n const chartCredit = html`Visualization: ${chatter.credit}
`\n\n chartAttribution.appendChild(chartSource);\n chartAttribution.appendChild(chartCredit);\n\n chartContainer.appendChild(chartHed);\n //chartContainer.appendChild(chartSubhed);\n \n chartContainer.appendChild(renderChart(annaData, true, 300));\n chartContainer.appendChild(chartAttribution);\n \n outerContainer.appendChild(chartContainer);\n outerContainer.appendChild(html`
`);\n \n return outerContainer;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":504,"value":"viewof alonaExpensesChart = { \n const outerContainer = html`

${style()}

`\n const chartContainer = html`

`\n const chartHed = html`

Monthly budget breakdown

`\n //const chartSubhed = html`

${chatter.subhed}

`\n const chartAttribution = html`

`\n \n const chartSource = html`Source: ${chatter.src}
`\n const chartCredit = html`Visualization: ${chatter.credit}
`\n\n chartAttribution.appendChild(chartSource);\n chartAttribution.appendChild(chartCredit);\n\n chartContainer.appendChild(chartHed);\n //chartContainer.appendChild(chartSubhed);\n chartContainer.appendChild(renderChart(alonaData, true, 150));\n chartContainer.appendChild(chartAttribution);\n \n outerContainer.appendChild(chartContainer);\n outerContainer.appendChild(html`
`);\n \n return outerContainer;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":511,"value":"viewof richieExpensesChart = { \n const outerContainer = html`

${style()}

`\n const chartContainer = html`

`\n const chartHed = html`

Monthly budget breakdown

`\n //const chartSubhed = html`

${chatter.subhed}

`\n const chartAttribution = html`

`\n \n const chartSource = html`Source: ${chatter.src}
`\n const chartCredit = html`Visualization: ${chatter.credit}
`\n\n chartAttribution.appendChild(chartSource);\n chartAttribution.appendChild(chartCredit);\n\n chartContainer.appendChild(chartHed);\n //chartContainer.appendChild(chartSubhed);\n \n chartContainer.appendChild(renderChart(richieData, true, 300));\n chartContainer.appendChild(chartAttribution);\n \n outerContainer.appendChild(chartContainer);\n outerContainer.appendChild(html`
`);\n \n return outerContainer;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":533,"value":"viewof kyleExpensesChart = { \n const outerContainer = html`

${style()}

`\n const chartContainer = html`

`\n const chartHed = html`

Monthly budget breakdown

`\n //const chartSubhed = html`

${chatter.subhed}

`\n const chartAttribution = html`

`\n \n const chartSource = html`Source: ${chatter.src} as percentages, not dollar amounts.
`\n const chartCredit = html`Visualization: ${chatter.credit}
`\n\n chartAttribution.appendChild(chartSource);\n chartAttribution.appendChild(chartCredit);\n\n chartContainer.appendChild(chartHed);\n //chartContainer.appendChild(chartSubhed);\n \n chartContainer.appendChild(renderChart(kyleData, false, 425));\n chartContainer.appendChild(chartAttribution);\n \n outerContainer.appendChild(chartContainer);\n outerContainer.appendChild(html`
`);\n \n return outerContainer;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":467,"value":"$45","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":440,"value":"## Color scales","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":56,"value":"function color(budgetData) {\n return d3.scaleOrdinal()\n .domain(budgetData.map(d => d.category))\n .range([\n wbezColors().get(\"royalpurple\"), \n wbezColors().get(\"marigold\"), \n wbezColors().get(\"peacock\"), \n wbezColors().get(\"red\"),\n wbezColors().get(\"black\"),\n wbezColors().get(\"lavender\"),\n wbezColors().get(\"gold\"),\n wbezColors().get(\"lime\")])\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":443,"value":"## Helpers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":406,"value":"function createWaffles(chartData) {\n\nconst array = [];\n if (whole) {\n const max = chartData.length; \n let index = 0, curr = 1, \n accu = Math.round(chartData[0].ratio), waffle = [];\n \n for (let y = 9; y >= 0; y--)\n for (let x = 0; x < 10; x ++) {\n if (curr > accu && index < max) {\n let r = Math.round(chartData[++index].ratio);\n while(r === 0 && index < max) r = Math.round(chartData[++index].ratio);\n accu += r;\n }\n waffle.push({x, y, index});\n curr++;\n } \n array.push(waffle);\n }\n else {\n chartData.map((d, i) => {\n let curr = 0, waffle = [];\n for (let y = 9; y >= 0; y--)\n for(let x = 0; x < 10; x ++) {\n waffle.push(({x, y, index: curr < Math.round(d.ratio) ? i : -1}));\n curr++;\n }\n array.push(waffle);\n });\n } \n return array;\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"toCurrency = num => d3.format(\"$,.0f\")(num)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":521,"value":"toPercent = num => d3.format(\",.0%\")(num)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"scale = d3.scaleBand()\n .domain(sequence(10))\n .range([0, waffleSize])\n .padding(0.1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"sequence = (length) => Array.apply(null, {length: length}).map((d, i) => i);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"whole = options.style === \"whole\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"isRect = options.shape === \"rect\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"width = 800","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":558,"value":"height = 400;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"padding = ({x: 40, y: 40})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"waffleSize = whole ? width < height ? width : height : 100;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":600,"value":"dataNew = 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":434,"value":"data = {\n const total = data.reduce((a, b) => a + Math.abs(b.Amount), 0);\n return data.map(d => ({\n category: d.Subcategory,\n amount: d.Amount,\n ratio: (d.Amount / total) * 100\n }));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":498,"value":"alonaData = {\n const data = d3.csvParse(await FileAttachment(\"viz_data - alona (1).csv\").text(), d3.autotype);\n const total = data.reduce((a, b) => a + Math.abs(b.Amount), 0);\n return data.map(d => ({\n category: d.Subcategory,\n amount: d.Amount,\n ratio: (d.Amount / total) * 100\n }));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":310,"value":"ariData = {\n const data = d3.csvParse(await FileAttachment(\"viz_data - ari.csv\").text(), d3.autotype);\n const total = data.reduce((a, b) => a + Math.abs(b.Amount), 0);\n return data.map(d => ({\n category: d.Subcategory,\n amount: d.Amount,\n ratio: (d.Amount / total) * 100\n }));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":525,"value":"kyleData = {\n const data = d3.csvParse(await FileAttachment(\"viz_data - kyle (3).csv\").text(), d3.autotype);\n const total = data.reduce((a, b) => a + Math.abs(b.Amount), 0);\n return data.map(d => ({\n category: d.Subcategory,\n amount: d.Amount,\n ratio: (d.Amount / total) * 100\n }));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":515,"value":"richieData = {\n const data = d3.csvParse(await FileAttachment(\"viz_data - richie (1).csv\").text(), d3.autotype);\n const total = data.reduce((a, b) => a + Math.abs(b.Amount), 0);\n return data.map(d => ({\n category: d.Subcategory,\n amount: d.Amount,\n ratio: (d.Amount / total) * 100\n }));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":461,"value":"## Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":215,"value":"import {form} from \"@mbostock/form-input\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":336,"value":"import {style, wbezColors} from \"@charmainerunes/wbez-data-visuals-style-guide\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W46","stdlib":"1"}} 44:"$43:body"