2e:null 2f:["$","title",null,{"children":"Dashboard with Inputs | Fabian Iwand | Observable"}] 34:T492,canvas = { const {width: w, height: h, pad: p} = options, wp = w - 2 * p, hp = h - 2 * p, ctx = DOM.context2d(w, h, 1), num = 5; ctx.canvas.maxWidth = "100%"; ctx.fillStyle = "hsl(0, 0%, 0%)"; ctx.lineWidth = 4; ctx.fillRect(0, 0, w, h); // If there's a noticeable delay between a cell's invalidation and its next evaluation // then it might be preferable to not pass the invalidation promise for autoremoval, // and to instead replace the area's contents when the cell rerenders. display("output", ctx.canvas, {replace: true}); while(true) { ctx.globalCompositeOperation = "multiply"; ctx.globalAlpha = .03; ctx.fillRect(0, 0, w, h); ctx.globalAlpha = 1; ctx.globalCompositeOperation = "screen"; for(let i = 0; i < num; i++) { ctx.beginPath(); const t = Math.cos((Date.now() / 6000 + i/num) * Math.PI * 2) + 1; t < 1 ? ctx.moveTo(p + wp * t, p) : ctx.moveTo(p + wp, p + hp * (t-1)); t < 1 ? ctx.lineTo(p, p + hp * t) : ctx.lineTo(p + wp * (t-1), p + hp); ctx.strokeStyle = color || `hsl(${i/num*360},100%,50%)`; ctx.stroke(); } yield; } }35:[] 32:{"id":"3799afbb78a8700c","slug":"dashboard-with-inputs","title":"Dashboard with Inputs","thumbnail":"9ab2a08c3bf31e188d2c78ffac893ccffc781e559f52061eead815e246f496cb","access_level":"public","create_time":"$D2020-05-11T10:36:54.611Z","update_time":"$D2025-12-19T14:15:40.909Z","view_time":null,"first_public_time":"$D2020-08-18T19:17:46.431Z","has_unpublished_edits":null,"fork":{"id":"fe1c78885c2e9622","slug":"dashboard-example","title":"Dashboard","owner":{"id":"898d35f8860c7f03","login":"mootari","name":"Fabian Iwand"}},"stars":27,"starred":false,"owner":{"type":"team","id":"898d35f8860c7f03","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":"starter_2024"},"version":651,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null}],"members":[{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":7,"collection":{"id":"6d9c7f601029e6bf","slug":"widgets","title":"Widgets and helpers","owner":{"id":"898d35f8860c7f03","login":"mootari","name":"Fabian Iwand"}},"type":"notebook","body":{"title":"Dashboard with Inputs","cells":[{"id":0,"value":"# Dashboard with Inputs\n\nThis notebook provides a helper to combine outputs from multiple cells in a template.\n\n~~~js\nimport {dashboard} from \"@mootari/dashboard-with-inputs\"\n~~~\n\n*Context / discussion: [Redefine a value for viewof ?](https://talk.observablehq.com/t/redefine-a-value-for-viewof/3175/8)*\n\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":132,"value":"viewof display = dashboard(htl.html`

\n\n