2e:null 2f:["$","title",null,{"children":"Web Components | Gordon Smith | Observable"}] 34: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)`

35:[] 32:{"id":"68d7197d5e2f1406","slug":"web-components","title":"Web Components","thumbnail":"67cdeb7296c86a16151382da9a02756ff1e5d36f5972cc2e2c2a7cd7cbaa1588","access_level":"public","create_time":"$D2021-12-17T06:29:40.429Z","update_time":"$D2022-07-28T12:44:00.076Z","view_time":null,"first_public_time":"$D2022-01-29T19:12:09.225Z","has_unpublished_edits":null,"fork":false,"stars":16,"starred":false,"owner":{"type":"team","id":"1ca386e9fdf73037","login":"gordonsmith","name":"Gordon Smith","avatar_url":"https://avatars-next.observableusercontent.com/78b1e9a8876f3e6bb69bf1b0cbe8833994e77a8bdd7893eef27fe59c995b0fe0","tier":"starter_2024"},"version":463,"publish_version":463,"role":null,"authored":false,"authors":[{"type":"individual","id":"ecffd59db269e2b5","login":"gordonsmith","name":"Gordon Smith","avatar_url":"https://avatars-next.observableusercontent.com/78b1e9a8876f3e6bb69bf1b0cbe8833994e77a8bdd7893eef27fe59c995b0fe0","tier":null}],"members":[{"type":"individual","id":"ecffd59db269e2b5","login":"gordonsmith","name":"Gordon Smith","avatar_url":"https://avatars-next.observableusercontent.com/78b1e9a8876f3e6bb69bf1b0cbe8833994e77a8bdd7893eef27fe59c995b0fe0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":9,"collection":null,"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":41,"value":"$34","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":347,"value":"## Dependencies","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":181,"value":"wc = require(\"@hpcc-js/wc-layout\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":458,"value":"wc2 = require(\"@hpcc-js/wc-observable\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 33:"$32:body"