2d:null 2e:["$","title",null,{"children":"Voronoi Garden Planning | bea | Observable"}] 33:T9c6,yourGardenInputData = yourGardenInput ? await yourGardenInput.json() : { "seeds": [ { "x": 0.1586433260393873, "y": 0.21760890794836957, "name": "Erdbeeren", "desc": "Bunte Mischung aus Walderdbeeren und anderen", "active": false, "shown": true, "uuid": "b2e96f54-f67d-4f3a-9424-fcec31cd417c" }, { "x": 0.09299781181619256, "y": 0.3545654296875, "name": "Zitronenmelisse", "desc": "schon alt", "shown": true, "uuid": "9d8303e2-3157-412b-a6d4-6620c96ae561", "active": false }, { "x": 0.16996402877697842, "y": 0.7932245669157608, "name": "Waldmeister", "desc": "von Nachbarin", "shown": true, "uuid": "ebf00f5a-9a78-49c4-9970-35b7fa7258dc", "active": true }, { "x": 0.4568345323741007, "y": 0.008441958220108696, "name": "Brombeere", "shown": true, "uuid": "ad29787f-1ece-442e-955f-2674c6019af4", "active": false }, { "x": 0.6276978417266187, "y": 0.16061587126358695, "name": "Himbeere", "shown": true, "uuid": "1dc81339-443d-4cf3-bbd3-650b37466c43", "active": false }, { "x": 0.8927789934354485, "y": 0.32413064707880435, "name": "Preiselbeere", "shown": true, "uuid": "86fd9630-7f9b-40eb-96fe-715344d86053", "active": false }, { "x": 0.6267985611510791, "y": 0.7040941321331522, "name": "Tree", "shown": true, "uuid": "82bad295-34cf-452f-8b3e-33203c3a065d", "active": false, "seasons": [] }, { "x": 0.9721223021582733, "y": 0.6627897843070653, "name": "Tree", "shown": true, "uuid": "54b64ae0-0da4-47e4-b17d-0f67fdc24523", "active": false, "seasons": [] }, { "x": 0.9945295404814004, "y": 0.9741306470788044, "name": "Holler", "shown": true, "uuid": "81f55a27-b0aa-4287-b810-ac3f6d1ff0c7", "active": false }, { "x": 0.710431654676259, "y": 0.9388767408288043, "name": "Ginster", "shown": true, "uuid": "da998018-44fb-4c97-bd67-a919fbf746e3", "active": false, "seasons": [] } ] }; 34:T1435,gardenChart = (chartJson, chartBounds, colourMode) => { const numberOfSeeds = Math.random()*200; const width = chartBounds && chartBounds.width ? chartBounds.width : 1000; const height = chartBounds && chartBounds.height ? chartBounds.height : 500; const margin = 20; const x = d3.scaleLinear().domain([0, 1]).range([margin, width-margin]); const y = d3.scaleLinear().domain([0, 1]).range([margin, height-margin]); const svg = d3.create("svg") .style("width", width + "px") .style("height", height + "px") .style("cursor", "pointer"); // external node value and dispatch update event const dispatchUpdate = (parent, data) => { svg.node().value = data; svg.node().dispatchEvent(new CustomEvent("input", { detail: { voronoi: true } })); } // calculate the voronoi graph const voronoi = (seeds, width, height) => { return d3.Delaunay .from(seeds.map((seedElem) => ([x(seedElem.x), y(seedElem.y)]))) .voronoi([0, 0, width, height]) }; const colour = (d, i, parent) => { switch(colourMode){ case "season": return d3.interpolateYlGnBu(d.seasons && d.seasons.length>0 ? d.seasons.reduce((a,b)=>a+b)/12.0 : 1); break; default: return d3.interpolateViridis(i/parent.data().length); } } // redraws the voronoi elements, position, names, ... const updateVoronois = (parent) => { let filteredSeeds = parent.data().filter(d => d.shown); let calculatedVoronoi = voronoi(filteredSeeds, width, height); parent.select("circle") .style("display", d => d.shown ? "block" : "none") .attr("cx", (d,i) => x(d.x)) .attr("cy", (d,i) => y(d.y)) .attr("r", margin/2) .style("stroke", (d,i) => d3.color(colour(d, i, parent)).brighter(3)) .style("stroke-width", (d) => d.active ? 5 : 0) .style("fill", (d,i) => d.active ? d3.color(colour(d, i, parent)).darker(1) : d3.color(colour(d, i, parent)).darker(2)); parent.select("text") .style("display", d => d.shown ? "block" : "none") .attr("font-family", "sans-serif") .attr("font-size", "0.8em") .attr("font-weight", (d,i) => d.active ? "bold" : "normal") .attr("x", (d,i) => x(d.x)-margin) .attr("y", (d,i) => y(d.y)+1.3*margin) .text((d,i) => d.name ? d.name : i) .style("fill", (d,i) => d.active ? d3.color(colour(d, i, parent)).darker(3) : d3.color(colour(d, i, parent)).brighter(0.5)); parent.select("path") .attr("d", (d,i) => d.shown ? calculatedVoronoi.renderCell(filteredSeeds.findIndex(f => seedKey(f) == seedKey(d))) : "") .style("fill", (d, i) => d.active ? d3.color(colour(d, i, parent)).brighter(0.1) : d3.color(colour(d, i, parent) ).darker(0.5)); } // initial draw of the parts const drawPartGroup = (partGroup) => { partGroup.attr("class", d => d.shown ? "part" : "hidden"); partGroup.append("path"); partGroup.append("circle"); partGroup.append("text"); } // defines the drag behaviour const dragBehaviour = (partGroup) => { partGroup.call(d3.drag() .subject(partGroup) .on("drag", (event, d) => { d.x = x.invert(event.x); d.y = y.invert(event.y); partGroup .call(updateVoronois) .call(dispatchUpdate, {"seeds" : partGroup.data()}); }) .on("start", (event, d) => { partGroup.each (d => d.active = false); d.active = true; partGroup .call(updateVoronois) .call(dispatchUpdate, {"seeds" : partGroup.data()}); }) ); } const seedKey = (seed) => seed.uuid; // upsertChart const updateChart = (parts, data) => { data.ts = data.ts != undefined ? data.ts : Date.now() + 31557600000; data.seeds.forEach((d) => { ((!d.ts || d.ts <= chartJson.ts) && (!d.tsend || d.tsend > chartJson.ts)) ? d.shown=true : d.shown=false; if (!d.uuid) d.uuid = crypto.randomUUID(); }) parts .data(data.seeds, seedKey) .join( enter => enter.append("g").call(drawPartGroup), update => update, exit => exit.remove() ).call(updateVoronois).call(dragBehaviour); } // setup chartJson = chartJson ? chartJson : ( { "seeds": d3.range(numberOfSeeds).map((d) => ({"x" : Math.random(), "y": Math.random()}))}); chartJson.seeds.sort((a, b) => a.ts - b.ts); svg.selectAll("g").call(updateChart, chartJson).call(dispatchUpdate, chartJson); // add listener to receive data from outside svg.node().addEventListener("input", (e) => { if (!(e && e.detail && e.detail.voronoi)){ d3.select(e.target).selectAll("g").call(updateChart, e.target.value); } }); return svg.node(); }35:T5e4,gardenJson = (visualisationObjectView) => { let parseText = (text) => JSON.parse(text); let showJson = (json) => JSON.stringify(visualisationObjectView.value, null, 3); let myJsonTextArea = html` `; visualisationObjectView.addEventListener("input", (e) => { if (!(e && e.detail && e.detail.jsonText)){ myJsonTextArea.value = showJson(visualisationObjectView.value); } }); myJsonTextArea.addEventListener("click", () => { myJsonTextArea.style.height = myJsonTextArea.scrollHeight + "px"; }); myJsonTextArea.addEventListener("input", (e) => { if (!(e && e.detail && e.detail.jsonText)){ try { var parsedText = parseText(myJsonTextArea.value); visualisationObjectView.value = parsedText; myJsonTextArea.style.backgroundColor = "#ffffff"; visualisationObjectView.dispatchEvent(new CustomEvent("input", { detail: { jsonText: true } })); } catch (e) { if(e instanceof SyntaxError){ console.log("SnytaxError", e); myJsonTextArea.style.backgroundColor = "#ff5555"; return } if(e.message == "SemanticsError"){ console.log("SemanticsError", e); myJsonTextArea.style.backgroundColor = "#ffff88"; } } } }); myJsonTextArea.defaultValue = showJson(visualisationObjectView.value); return myJsonTextArea; }36:Tbc4,gardenControl = (visualisationObjectView) => { let nowISO = new Date().toISOString(); const form = html` `; form.updateFields = function(element){ if(element){ if(this.ts.value) element.ts = new Date(this.ts.value + "Z").getTime(); if(this.tsend.value) element.tsend = new Date(this.tsend.value + "Z").getTime(); if(this.desc.value) element.desc = this.desc.value; if(this.name.value) element.name = this.name.value; if(this.seasons.selectedOptions){ element.seasons = new Array(); Array.from(this.seasons.selectedOptions).forEach(option => { element.seasons.push(parseInt(option.value)); }); } } return element; } form.addEventListener("submit", (e) => { e.preventDefault(); switch(e.submitter.name){ case "add": let newSeed = {"ts": Date.now(), "x": 0.5, "y":0.5, "active":true}; form.updateFields(newSeed); activeSeeds(visualisationObjectView.value).forEach(elem => elem.active = false); visualisationObjectView.value.seeds.push(newSeed); visualisationObjectView.dispatchEvent(new CustomEvent("input")); break; case "update": form.updateFields(activeSeed(visualisationObjectView.value)); visualisationObjectView.dispatchEvent(new CustomEvent("input")); break; } }); visualisationObjectView.addEventListener("input", (e) => { let active = activeSeed(visualisationObjectView.value); form.ts.value = active && active.ts != undefined ? new Date(active.ts).toISOString().slice(0, -8) : undefined; form.tsend.value = active && active.tsend != undefined ? new Date(active.tsend).toISOString().slice(0, -8) : undefined; form.name.value = active && active.name ? active.name : ""; form.desc.value = active && active.desc ? active.desc : ""; form.seasons.selectedIndex = -1; if(active && active.seasons){ active.seasons.forEach(season => { if (season > 0 && season < 5) form.seasons[season-1].selected = true; }); } }); return form; }37:T67f,gardenLog = (visualisationObjectView) => { const logList = html`

`; let today = new Date(); let todayFormatted = "" + today.getFullYear() + "-" + ((today.getMonth() < 9) ? "0" : "") + (today.getMonth()+1) + "-" + ((today.getDate() < 10) ? "0" : "") + today.getDate(); const logForm = html` `; let redraw = function() { // clear while (logList.firstChild) logList.removeChild(logList.firstChild); // list logs let active = activeSeed(visualisationObjectView.value); if(active && active.log){ active.log.forEach(entry => { logList.appendChild(html`

${new Date(entry.ts).toLocaleString("en", { timeZone: 'UTC', weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}: ${entry.desc}

`); }); } // input logList.appendChild(html`

now: ${logForm}

`); } logForm.addEventListener("submit", (e) => { e.preventDefault(); let active = activeSeed(visualisationObjectView.value); if(active && logForm.desc.value){ if(!active.log) active.log = new Array(); active.log.push({"ts": new Date(logForm.date.value).getTime(), "desc": logForm.desc.value}); } logForm.desc.value = ""; visualisationObjectView.dispatchEvent(new CustomEvent("input")); }); visualisationObjectView.addEventListener("input", (e) => { redraw(); }); return logList; }38:T97a,gardenTimeSlider = (visualisationObjectView) => { let reducer = (tsArray, seed) => { if(seed && seed.ts){ tsArray.push({"ts": seed.ts, "active": seed}); if(seed.tsend) tsArray.push({"ts": seed.tsend, "active": seed}) if(seed.log) seed.log.forEach(entry => tsArray.push({"ts": entry.ts, "active": seed})); } return tsArray; }; const monthMilis = 2629800000; let sliderData = visualisationObjectView.value.seeds.reduce(reducer, [{"ts": Date.now()+monthMilis}]); sliderData.sort((a, b) => a.ts - b.ts); const scale = d3.scaleUtc() .domain([d3.min(sliderData, d => d.ts), d3.max(sliderData, d => d.ts)+monthMilis]); const times = scale.ticks(d3.timeMonth, 1); const scrubber = Scrubber(times, { delay: 100, loop: false, alternate: true, autoplay: false, initial: times.length - 1, format: ts => new Date(ts).toLocaleString("en", { timeZone: 'UTC', year: 'numeric', month: 'short' }) }) scrubber.addEventListener("input", (e) => { let tickTimeStart = times[parseInt(e.target.value)-1] ? times[parseInt(e.target.value)-1].getTime() : times[0].getTime()-2629800000; let tickTimeEnd = times[e.target.value].getTime(); let selected = visualisationObjectView.value.seeds.filter(elem => ((elem.ts >= tickTimeStart && elem.ts < tickTimeEnd) || (elem.log && elem.log.filter(log => (log.ts >= tickTimeStart && log.ts < tickTimeEnd)).length > 0))); if (selected.length > 0) activeSeeds(visualisationObjectView.value).forEach(elem => elem.active = false); selected.forEach(elem => (elem.active = true)); visualisationObjectView.value.ts = tickTimeEnd; visualisationObjectView.dispatchEvent(new CustomEvent("input")); }); const reset = html` `; reset.addEventListener("submit", (e) => { e.preventDefault(); switch(e.submitter.name){ case "reset": visualisationObjectView.value.ts = undefined; visualisationObjectView.dispatchEvent(new CustomEvent("input")); scrubber.value = times.length -1; scrubber.i.value = times.length -1; scrubber.dispatchEvent(new CustomEvent("input")); break; } }); const slider = html`

`; slider.appendChild(scrubber); slider.appendChild(reset); return slider; }39:[] 31:{"id":"007b54ef674d30ef","slug":"voronoi-garden-planning","title":"Voronoi Garden Planning","thumbnail":"9b5cc3bb7bf514c39622c3a0eed1d2a34a635e83002b14f044af3bec7433be03","access_level":"public","create_time":"$D2020-03-21T09:36:41.934Z","update_time":"$D2023-03-27T21:20:04.958Z","view_time":null,"first_public_time":"$D2020-09-27T15:33:25.822Z","has_unpublished_edits":null,"fork":false,"stars":5,"starred":false,"owner":{"type":"team","id":"18aeb6daee87a192","login":"llb4ll","name":"bea","avatar_url":"https://avatars-next.observableusercontent.com/1817a622719b68c15fd89c864643a2513d5e715681d61186936e60b95a0bcc0e","tier":"starter_2024"},"version":2181,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"2e1df79eb11834a9","login":"llb4ll","name":"bea","avatar_url":"https://avatars-next.observableusercontent.com/1817a622719b68c15fd89c864643a2513d5e715681d61186936e60b95a0bcc0e","tier":null}],"members":[{"type":"individual","id":"2e1df79eb11834a9","login":"llb4ll","name":"bea","avatar_url":"https://avatars-next.observableusercontent.com/1817a622719b68c15fd89c864643a2513d5e715681d61186936e60b95a0bcc0e","tier":null,"role":"editor"}],"comments":[{"id":"582bf31e22d184ca","reply_to_id":null,"content":"There is a bug in the scrubber behaviour, as the scrubber doesn't get updated when data is added / updated / removed.","create_time":"$D2023-03-27T21:24:18.213Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"2e1df79eb11834a9","login":"llb4ll","name":"bea","avatar_url":"https://avatars-next.observableusercontent.com/1817a622719b68c15fd89c864643a2513d5e715681d61186936e60b95a0bcc0e","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"Voronoi Garden Planning","cells":[{"id":0,"value":"md`\n# Voronoi Garden Planning\n\nA small tool helping you to plan your garden.\n\n## Context\nSpring is here and I am again mesmerised by what is sprouting in my garden.\nAs plants tend to spread as much as they can (of course given they get what they need to grow), I thought voronois could be cool to visualise that. In order to make it more fun to build up my own garden dataset, I thought I should add some interaction to easily move things around in the garden plan..\n\nHere is a random list of things to add to the interactive visualisation next:\n- ✓ Support adding new cells\n- (✓) Season buttons to view the garden for a specific season\n- Labels and grouping\n- Marking garden boundaries\n- ✓ Adding a time view to see what has been growing in past years...\n- add timeline or journal and \"jump to time\"\n- Add soil requirements and other data points\n\n## A random garden\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":353,"value":"viewof randomGarden = \n gardenChart(\n null, \n {\n width: width, \n height: 500\n }\n );","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":359,"value":"randomGarden","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":274,"value":"md`\n## Your garden\nStart your own garden here. You can download the chart json below in order to save your garden plan and later reupload and iterate on it. For now you can start with my garden and make it your own.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1999,"value":"viewof yourGardenInput = Inputs.file({label: \"Input JSON\", accept: \".json\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2013,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1727,"value":"gardenTimeSlider(viewof yourGarden)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2083,"value":"viewof colourBy = Inputs.select([\"created\", \"season\"], {value: \"Time\", label: \"Colour by...\", format: input => input.toUpperCase()})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"viewof yourGarden = gardenChart(\n\n yourGardenInputData, \n {\n width: width, \n height: 700\n }, colourBy\n);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1320,"value":"md`Use the form to plant. You can also edit the json data directly.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1316,"value":"gardenControl(viewof yourGarden)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1541,"value":"gardenLog(viewof yourGarden)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"md`\nIn order to save your garden plans the following data format is used. You can also mutate the data in the text field below and watch how it changes your garden plan.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":278,"value":"gardenJson(viewof yourGarden)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2003,"value":"DOM.download(new Blob([JSON.stringify(yourGarden)], { type: \"text/json\" }), new Date().toISOString().replaceAll(/\\s+/g, '').replaceAll(':', '-') + \"_garden.json\", \"Download JSON\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2053,"value":"Inputs.table(yourGarden.seeds, {\n columns: \n [\"ts\", \"tsend\", \"name\", \"desc\", \"log\", \"seasons\"]\n ,\n header: {\n log: \"Log entries\",\n },\n format: {\n ts: ts => new Date(ts).toISOString(),\n log: log => log.length,\n tsend: tsend => new Date(tsend).toISOString(),\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":805,"value":"md `\n## Code\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1478,"value":"md `\n### Voronoi View\n\nI am using [D3js](https://d3js.org/ \"D3.js is a JavaScript library for manipulating documents based on data\") for the interactive visualisation:\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"d3 = require(\"d3@6\", \"d3-delaunay\", \"d3-time\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":822,"value":"md `\n### Json Editor\nIn addition there is a bit of observable magic hooked up to it to synchronise the visualisation with the data view:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":826,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1486,"value":"md `\n### Controls to add and update elements\n` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1312,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1535,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1406,"value":"md`\n### Timeline Scrubber\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1400,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1396,"value":"$38","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1494,"value":"md`\n### Misc utils\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1642,"value":"activeSeeds = (visualisationObject) => { \n return visualisationObject.seeds.filter(d => d.active);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1416,"value":"activeSeed = (visualisationObject) => { \n let actives = activeSeeds(visualisationObject);\n if (actives.length != 1) return undefined;\n return actives[0];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W39","stdlib":"1","titling":"auto"}} 32:"$31:body"