30:T511,

canvas import { canvas } with { height } from "@mbostock/liquidfun" height=400 md`###### Credits: [@mbostock](https://observablehq.com/@mbostock)`

graph import { graph } from "@laotzunami/numeric-integration-quadrature" md`###### Credits: [@laotzunami](https://observablehq.com/@laotzunami)`

error import { error } from "@laotzunami/numeric-integration-quadrature" md`###### Credits: [@laotzunami](https://observablehq.com/@laotzunami)`

31:[] 2e:{"title":"Web Components","cells":[{"id":0,"value":"# Web Components\n\nQuick example using Web Components from [@hpcc-js/web-components](https://gordonsmith.github.io/hpcc-js-wc), some highlights:\n* The layout is a combination of split panels and tab panels, so drag some of those splitters!\n* The \"Liquid Fun\" visualization is inside a drag and zoom container so you can drag and zoom it!\n* The tab panel can be reordered, so swap them about!\n* The observable component will work anywhere, not just here! (but looks like I have some escaping work to do!).","pinned":false,"hidden":false,"mode":"md"},{"id":41,"value":"$30","pinned":true,"hidden":false,"mode":"html"},{"id":281,"value":"pies = {\n wc; // Need reference wc so edits are observed correctly --\n const elList = document.querySelectorAll(\"hpcc-pie\");\n return Array.prototype.slice.call(elList, 0);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"{\n wc; // Needs reference to wc so edits are observed correctly --\n yield \"loading pie data\";\n for (const pie of pies) {\n pie.columns = [\"Subject\", \"Score\"];\n pie.data = [\n [\"Math\", 188],\n [\"English\", 72],\n [\"Science\", 60],\n [\"History\", 50],\n [\"Geography\", 40],\n [\"Biology\", 30], \n [\"Physics\", 20],\n [\"Chemistry\", 10]\n ];\n }\n yield \"loaded pie data\";\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":258,"value":"tick = {\n wc; // Needs reference to wc so edits are observed correctly --\n let retVal = 0;\n while (true) {\n yield Promises.delay(150, retVal);\n retVal += 2;\n let i = 0;\n for (const pie of pies) {\n pie.setAttribute(\"start_angle\", i % 2 === 0 ? retVal :-retVal);\n ++i;\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":347,"value":"## Dependencies","pinned":false,"hidden":false,"mode":"md"},{"id":181,"value":"wc = require(\"@hpcc-js/wc-layout\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":458,"value":"wc2 = require(\"@hpcc-js/wc-observable\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}