29:["$","title",null,{"children":"Waffle Iron by Beige Technologies | Kaluza | Observable"}] 2e:T1be3,function waffleIron( data = [], { width, //size of each waffle height, scaleHundredTo = 100, //scale the value that will fill the waffle squareBuffer = 1, //space between squares waffleBufferRow = 10, //space between waffles waffleBufferCol = 10, waffleStacks, //how many columns of waffles waffleStackHeight, //how many rows of columns squareSize = 4, //size of squares numberOfRows = 10, //dimensions of each waffle numberOfColumns = 10, numberOfSquares = numberOfRows * numberOfColumns, delay = 1, //animation delay animation = true, //animate the waffle filling sumWaffleAxis = false, //allow x-axes to be a continous range yAxis = false, bgcolor = "#dfdfdf", //colour of empty squares fontSize = squareSize / 2 > 10 ? this : 5, //size for axes color, //array, maps one to one for a value in the data array xAxis = 0, xAxisEnabled = false, marginXaxis = false, //distance between axis and wafflle marginXaxisTop = squareSize / 2, //shrinks the axis domain defaultXaxis, //calculate a default size scaling = 1, //scales the axis label ticks = numberOfRows, //number of ticks suffix = "", //axes unit cornerRadius = 0 //round the corners } = {} ) { //id for each square var id = 0; //for a hundred squares in a waffle, allow a values <>100 to completely fill a waffle var scale = d3.scaleLinear().range([0, 100]).domain([0, scaleHundredTo]); //how many individual waffles to make var howManyWaffles = Math.ceil(scale(d3.sum(data)) / numberOfSquares); //How many waffle stacks (columns of waffle charts)? If not defined, default waffleStacks = waffleStacks ? waffleStacks : Math.ceil(howManyWaffles / 2); //How high are the waffle stacks waffleStackHeight = Math.ceil(howManyWaffles / waffleStacks); color = color ? color : ["#a543ae", "#a543ae", "#a543ae"]; //Calcualate height and width of each waffle height = height ? height : numberOfRows * squareSize + (numberOfRows - 1) * squareBuffer; width = width ? width : numberOfColumns * squareSize + (numberOfColumns - 1) * squareBuffer; //margin for x-axis labels defaultXaxis = width / 4 + ([scaling * numberOfRows].toString().length + suffix.length) * fontSize; defaultXaxis = waffleBufferCol > defaultXaxis ? waffleBufferCol : defaultXaxis; //Space for labels if (xAxisEnabled) { xAxis = xAxis < defaultXaxis ? defaultXaxis : xAxis; } marginXaxis = marginXaxis ? marginXaxis : xAxis / 2; //Calcualate height and width of svg var waffleHolderHeight = height * waffleStackHeight + waffleBufferRow * (waffleStackHeight - 1) + yAxis * waffleStackHeight; var waffleHolderWidth = width * waffleStacks + waffleBufferCol * (waffleStacks - 1) + xAxis * waffleStacks; //The svg to return const allTheWaffles = d3 .create("svg") .attr("height", waffleHolderHeight) .attr("width", waffleHolderWidth) .attr("id", "og"); var offerIdMap = []; var returnedGrid = []; var yoffset; var xyoffset; var colcounter = 0; var rowcounter = 0; var x = 0; var y = 0; var x0 = 0; var y0 = 0; data.forEach((p, i) => { //fill in squares for (let d = 0; d < scale(p); d++) { offerIdMap.push(color[i]); } }); for ( let sq = offerIdMap.length; sq <= numberOfSquares * howManyWaffles; sq++ ) { offerIdMap.push(bgcolor); } for (let w = 0; w < howManyWaffles; w++) { var waffleId = "W" + w; offerIdMap.slice(w * numberOfSquares, (w + 1) * numberOfSquares); for (let row = 0; row < numberOfRows; row++) { returnedGrid[row] = []; for (let idx = 0; idx < numberOfColumns; idx++) { x = xAxis * (colcounter + 1) + colcounter * width + idx * squareSize + squareBuffer * idx + colcounter * waffleBufferCol; y = waffleHolderHeight - (row + 1) * squareSize - row * squareBuffer - rowcounter * (height + waffleBufferRow); y0 = y; returnedGrid[row].push({ x: x, y: y, width: squareSize, height: squareSize, id: [id, offerIdMap[id]], fill: offerIdMap[id], rx: cornerRadius, ry: cornerRadius }); id += 1; } } allTheWaffles .append((d) => wafflePress(waffleId)) .call((d) => { if (xAxisEnabled) { width > 50 ? d .append((axis) => xaxisgen(w)) .attr("x", x0 == 0 ? x0 : x0 + marginXaxis) .attr("y", y0) : d; } }); x0 = x; colcounter++; if (colcounter + 1 > waffleStacks) { rowcounter++; colcounter = 0; x0 = 0; } } function wafflePress(waffleId) { const svg = d3.create("svg").attr("id", waffleId); svg .selectAll(".row") .data(returnedGrid) .join((enter) => enter .append("g") .attr("class", "row") .call((d) => d //Add nodes for each column .selectAll(".square") .data( (d) => d, function (d) { return d ? d.id : this.id; } ) .join( (enter) => enter .append("rect") .attr("class", "square") .attr("id", (d) => d.id) .attr("x", (d) => d.x) .attr("width", (d) => d.width) .attr("height", (d) => d.height) .attr("rx", (d) => d.rx) .attr("ry", (d) => d.ry), (update) => update.remove(), (exit) => exit.remove() ) ) ); //.call((d) => old.selectAll("#delete").remove()); svg.call((t) => (animation ? animate(t) : youreBoring(t))); return svg.node(); } return allTheWaffles.node(); function xaxisgen(w) { var x = d3 .create("svg") .attr("height", height + marginXaxisTop) .attr("width", xAxis); var waffleXmax = numberOfRows * scaling; x.append("g") .call( d3 .axisRight( d3.scaleLinear( [(0 + waffleXmax) * w, (w + 1) * waffleXmax], [height - marginXaxisTop, marginXaxisTop] ) ) .ticks(ticks) .tickFormat((d) => d + " " + suffix) ) .selectAll("text") .attr("font-size", fontSize); return x.node(); } function youreBoring(t) { t.selectAll("rect") .attr("fill", (d) => d.fill) .attr("y", (d) => d.y) .attr("x", (d) => d.x); } function animate(t) { t.selectAll("rect") .attr("y", (d, i) => d.y - 100 * i * delay) .transition() .delay(function (d, i) { return delay * i * d3.randomInt(5, 12)(); }) .attr("fill", (d) => d.fill) .attr("y", (d) => d.y) .attr("x", (d) => d.x); } }2f:Tac5,//import { Scrubber } from "@mbostock/scrubber" function Scrubber( values, { format = (value) => value, initial = 0, delay = null, autoplay = true, loop = true, loopDelay = null, alternate = false } = {} ) { values = Array.from(values); const form = html``; let frame = null; let timer = null; let interval = null; let direction = 1; function start() { form.b.textContent = "Pause"; if (delay === null) frame = requestAnimationFrame(tick); else interval = setInterval(tick, delay); } function stop() { form.b.textContent = "Animate"; if (frame !== null) cancelAnimationFrame(frame), (frame = null); if (timer !== null) clearTimeout(timer), (timer = null); if (interval !== null) clearInterval(interval), (interval = null); } function running() { return frame !== null || timer !== null || interval !== null; } function tick() { if ( form.i.valueAsNumber === (direction > 0 ? values.length - 1 : direction < 0 ? 0 : NaN) ) { if (!loop) return stop(); if (alternate) direction = -direction; if (loopDelay !== null) { if (frame !== null) cancelAnimationFrame(frame), (frame = null); if (interval !== null) clearInterval(interval), (interval = null); timer = setTimeout(() => (step(), start()), loopDelay); return; } } if (delay === null) frame = requestAnimationFrame(tick); step(); } function step() { form.i.valueAsNumber = (form.i.valueAsNumber + direction + values.length) % values.length; form.i.dispatchEvent(new CustomEvent("input", { bubbles: true })); } form.i.oninput = (event) => { if (event && event.isTrusted && running()) stop(); form.value = values[form.i.valueAsNumber]; form.o.value = format(form.value, form.i.valueAsNumber, values); }; form.b.onclick = () => { if (running()) return stop(); direction = alternate && form.i.valueAsNumber === values.length - 1 ? -1 : 1; form.i.valueAsNumber = (form.i.valueAsNumber + direction) % values.length; form.i.dispatchEvent(new CustomEvent("input", { bubbles: true })); start(); }; form.i.oninput(); if (autoplay) start(); else stop(); Inputs.disposal(form).then(stop); return form; }30:[{"id":"2da9b7b7c75856c2dd38ac56d50f3968bcb30c6840d88f1bf70dd8f8d7c5529f0db874e57a0f5a120362182fafc4deeae295101a061119ba4adc8122a7455a02","href":"https://static.observableusercontent.com/files/2da9b7b7c75856c2dd38ac56d50f3968bcb30c6840d88f1bf70dd8f8d7c5529f0db874e57a0f5a120362182fafc4deeae295101a061119ba4adc8122a7455a02","name":"Lato-Regular.ttf","type":"font/ttf","lastModified":1680741218010.019,"size":75152},{"id":"3a4ff0144f4fecaec7e05bb36639960ec29af5ae62241b31d3bcca18401f88837dc6e326a2cbdd38ea6d49de75ff5cdd21cb50b524b4d946c2063120c292732e","href":"https://static.observableusercontent.com/files/3a4ff0144f4fecaec7e05bb36639960ec29af5ae62241b31d3bcca18401f88837dc6e326a2cbdd38ea6d49de75ff5cdd21cb50b524b4d946c2063120c292732e","name":"19981201 OpenNEM.csv","type":"text/csv","lastModified":1681799215842.066,"size":103549}] 2c:{"id":"8024ab189b456444","slug":"waffle-iron","title":"Waffle Iron by Beige Technologies","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2023-04-06T00:33:09.811Z","update_time":"$D2024-03-26T00:28:03.290Z","view_time":null,"first_public_time":"$D2023-04-27T00:24:57.765Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"4bcb72c21e16d60e","login":"kaluza-au","name":"Kaluza","avatar_url":"https://avatars-next.observableusercontent.com/39c9c24c6b4a34ab0f637855a57d9594a4f8b2c7171649010d74442651b6ee94","tier":"pro_2024"},"version":2450,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"675db08e178678f6","login":"tamsin","name":"Tamsin","avatar_url":"https://avatars-next.observableusercontent.com/845de546ebc3079fb3a8a2f6bd3e59cf4fc69cca679971f5575b2724875d61f5","tier":null}],"members":[{"type":"team","id":"4bcb72c21e16d60e","login":"kaluza-au","name":"Kaluza","avatar_url":"https://avatars-next.observableusercontent.com/39c9c24c6b4a34ab0f637855a57d9594a4f8b2c7171649010d74442651b6ee94","tier":"pro_2024","role":"editor"},{"type":"individual","id":"675db08e178678f6","login":"tamsin","name":"Tamsin","avatar_url":"https://avatars-next.observableusercontent.com/845de546ebc3079fb3a8a2f6bd3e59cf4fc69cca679971f5575b2724875d61f5","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":7,"collection":null,"type":"notebook","body":{"title":"Waffle Iron by Beige Technologies","cells":[{"id":0,"value":"# Waffle Iron by Beige Technologies","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2449,"value":"http://beige.tech","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2266,"value":"The NEM (National Energy Market) is the largest interconnected electrical grid in the world, stretching from northern Queensland to the southern island state of Tasmania. \n\nBy the end of 1999 the NEM had complete it's first year of operation.\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2300,"value":"htl.html`

NEM Total Output in ${year} was approximately: ${Math.ceil(\n total / 1000\n)} GWh

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1205,"value":"viewof year = Scrubber(years, { delay: 1500, autoplay: false })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1340,"value":"Swatches(d3.scaleOrdinal(Object.keys(colors), Object.values(colors)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2196,"value":"waffleIron(d, {\n squareSize: 5,\n squareBuffer: 1,\n color: data(year).map((d) => Object.values(d)[1]),\n animation: false,\n xAxis: 5,\n xAxisEnabled: false,\n waffleBufferRow: 5,\n waffleBufferCol: 5,\n marginXaxisTop: 10,\n sumWaffleAxis: false,\n scaling: 1,\n scaleHundredTo: 50,\n suffix: \"GWh\",\n ticks: 5,\n fontSize: 12,\n cornerRadius: 0\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2328,"value":"Checkout OpenNEM! (https://opennem.org.au/energy/nem/?range=7d&interval=30m)\n\nAn open source platform that aggreagates data from the NEM operator AEMO. The data for the total generation can be downloaded as a csv and attached to an obeservableHQ notebook like this one!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1195,"value":"data1 = opennem","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"data1","database":"$undefined"},{"id":2406,"value":"Plot.plot({\n color: {\n legend: true\n },\n marks: [\n Plot.auto(data1, {x: \"date\", y: \"Coal (Brown) - GWh\", color: \"Coal (Brown) - GWh\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2401,"value":"A mini waffle!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2399,"value":"waffleIron([100])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"Simply pass an array with a number of squares to fill. [100] will fill a waffle. Can't help but go over a hundred? The waffles will overflow into more waffles!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":18,"value":"waffleIron([90, 10, 20, 30, 100], {\n animation: true,\n delay: 0.4,\n squareSize: 15\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":360,"value":"Are you a boring person? Choose if the animation is used","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":362,"value":"waffleIron([100, 100, 1000], { animation: true, xAxis: true, squareSize: 5 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":374,"value":"The waffle is configurable! Colour, size, spacing, number of columns and animation delay can be defined","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":20,"value":"waffleIron([50, 30, 1], {\n color: [\"#a543ae\", \"#000\", \"#00bb\"],\n bgcolor: \"#af1\", //beautiful,\n squareSize: 8,\n waffleStacks: 2, // how many columns of waffles\n squareBuffer: 10, //space between squares\n waffleBufferRow: 45, //space between waffles\n waffleBufferCol: 40, //space between waffles\n numberOfRows: 5, //# of rows in a waffle\n numberOfColumns: 5, //# of columns in a waffle\n delay: 50,\n xaxis: true\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"waffleIron([31, 48, 7], {\n bgcolor: \"#fff\", //set to white for no bg colour\n numberOfRows: 5, //# of rows in a waffle\n scaleHundredto: 79, //if you want to break the space-time continuum a value of 79 will now fill 100% of a waffle\n squareSize: 2,\n squareBuffer: 7,\n delay: 1,\n xAxis: true,\n scaling: 100,\n suffix: \"MW\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1187,"value":"## Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1189,"value":"opennem = FileAttachment(\"19981201 OpenNEM.csv\").csv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1199,"value":"function data(year) {\n var yearly = opennem.filter((d) => d3.timeFormat(\"%Y\")(d.date) == year);\n var tmp = [];\n var ret = [];\n var cols = Object.keys(yearly[0]);\n\n cols.forEach((x, i) =>\n tmp.push({\n [x.split(\" \", 1)]: d3.sum(yearly.map((d) => d[x])),\n color: colors[x.split(\" \", 1)]\n })\n );\n\n return tmp.slice(3, 17);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2339,"value":"d = data(year).map((d, i) => {\n var tmp = Object.values(d)[0] / 500;\n tmp = (tmp < 1) & (tmp > 0) ? 1 : tmp;\n return tmp;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1202,"value":"years = d3.range(1999, 2023)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1197,"value":"colors = Object.assign({\n Coal: \"#ABDDF3\",\n Bioenergy: \"#FE6A97\",\n Distillate: \"#E9B4E6\",\n Gas: \"#B536AF\",\n Battery: \"#12ffaa\",\n Hydro: \"#384651\",\n Wind: \"#F6B27B\",\n Solar: \"#A90235\"\n})","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1255,"value":"f = d3.format(\".1f\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2276,"value":"total = d3.sum(\n data(year).map((d, i) => {\n var tmp = Object.values(d)[0];\n return tmp;\n })\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1185,"value":"## Styling","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1336,"value":"import { Swatches } from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1281,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"latoRegular = FileAttachment(\"Lato-Regular.ttf\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2d:"$2c:body" 28:E{"digest":"NEXT_REDIRECT;replace;/@kaluza-au/waffle-iron;307;"}