{"id":13885,"date":"2023-03-26T19:47:50","date_gmt":"2023-03-27T00:47:50","guid":{"rendered":"https:\/\/rud.is\/b\/?p=13885"},"modified":"2023-03-26T19:47:50","modified_gmt":"2023-03-27T00:47:50","slug":"%f0%9f%a7%aa-lit-webr-observable-plot-linking-lits-lightweight-web-components-and-webr-for-vanilla-js-reactivity-js-datavis","status":"publish","type":"post","link":"https:\/\/rud.is\/b\/2023\/03\/26\/%f0%9f%a7%aa-lit-webr-observable-plot-linking-lits-lightweight-web-components-and-webr-for-vanilla-js-reactivity-js-datavis\/","title":{"rendered":"? Lit + WebR + Observable Plot: Linking Lit’s Lightweight Web Components And WebR For Vanilla JS Reactivity & JS DataVis"},"content":{"rendered":"

\n See it live<\/a> before reading!\n<\/p><\/blockquote>\n

The previous post brought lit-webr<\/a>, to introduce Lit<\/a> and basic reactivity.<\/p>\n

Today, is more of the same, but we bring the OG Shiny demo plot into the modern age by using Observbable Plot to make the charts.<\/p>\n

We’re still pulling data from R, but we’re letting Plot do all the heavy lifting.<\/p>\n

Here’s what’s changed\u2026<\/p>\n

First, main.js<\/code> no longer has an {svglite} dependency. This means slightly faster load times, and less code. After ensuring we have datasets<\/code> available, this is remainder of what happens (please see the larger example for more extended “what’s goin’ on?” comments)<\/em>:<\/p>\n

\/\/  WE WILL TALK ABOUT THIS BELOW\nimport { webRDataFrameToJS } from '.\/utils.js'\n\nconst regions = document.getElementById(\"regionsInput\")\nconst plotOutput = document.getElementById(\"regionsOutput\")\n\nregions.options = await (await R.webR.evalR(`colnames(WorldPhones)`)).toArray()\n\n\/\/  WE WILL TALK ABOUT THIS BELOW\nplotOutput.worldPhones = webRDataFrameToJS(\n  await (await webR.evalR(\n    `as.data.frame.table(WorldPhones, stringsAsFactors=FALSE) |> \n       setNames(c(\"year\", \"region\", \"phones\"))`\n  )).toJs())\n\nplotOutput.region = regions.options[ 0 ]\n<\/code><\/pre>\n
The webRDataFrameToJS()<\/code> function in utils.js<\/code> was mentioned in a previous experiment. Its sole mission in life is to turn the highly structured object that is the result of calling WebR’s toJs()<\/code> function on an R data.frame<\/code>. Most JS data things like the structure webRDataFrameToJS()<\/code> puts things into, and Observable Plot is a cool JS data thing.<\/p>\n
The ugly await\u2026 await\u2026<\/code> sequence is to get the data from R to give to webRDataFrameToJS()<\/code>.  We got lucky thins time since as.data.frame.table<\/code> does a niiice<\/em> job taking the WorldPhones<\/code> rownamed matrix and pivoting it longer.<\/p>\n
We store the output of that into the region-plot<\/code> component. I could\/should have made it a private property, but no harm, no foul in this setting.<\/p>\n
Lastly, in region-plot.js<\/code>, our component is reduced to two properties: one to store the region name and one for the data you saw, above. We still use events to trigger updates between the popup and the plotter, and said plotter is doing this in render()<\/code>:<\/p>\n
render() {\nreturn html`\n<div>\n<slot><\/slot>\n${\n  Plot.plot({\n    style: {\n      background: \"#001e38\",\n      color: \"#c6cdd7\",\n      padding: \"30px\",\n      fontSize: \"10pt\",\n      fontFamily: '-apple-system, BlinkMacSystemFont, \u2026'\n    },\n    inset: 10,\n    marginLeft: 60,\n    caption: \"Data from AT&T (1961) The World's Telephones\",\n    x: {\n      label: null,\n      type: \"band\"\n    },\n    y: {\n      label: \"Number of \u260e\ufe0f (K)\",\n      grid: true\n    },\n    marks: [\n      Plot.barY(\n        this.worldPhones.filter((d) => d.region === this.region),\n        { x: \"year\", y: \"phones\", fill: \"#4a6d88\" }\n      ),\n      Plot.ruleY([0])\n    ]\n  })\n}\n<\/div>`;\n}\n<\/code><\/pre>\n
When the region<\/code> changes, it triggers a reactive update. When the refresh happens, this snippet:<\/p>\n
js
\n this.worldPhones.filter((d) => d.region === this.region)<\/code><\/p>\n
does the hard work of filtering out all but the region we selected from the tiny, in-memory phones “database”.<\/p>\n
Plot may not be {ggplot2}, but it cleans up well, and we’ve even had it match the style we used in the previous experiment.<\/p>\n","protected":false},"excerpt":{"rendered":"
See it live before reading! The previous post brought lit-webr, to introduce Lit and basic reactivity. Today, is more of the same, but we bring the OG Shiny demo plot into the modern age by using Observbable Plot to make the charts. We’re still pulling data from R, but we’re letting Plot do all the […]<\/p>\n","protected":false},"author":1,"featured_media":13886,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"activitypub_content_warning":"","activitypub_content_visibility":"","activitypub_max_image_attachments":3,"activitypub_interaction_policy_quote":"anyone","activitypub_status":"","footnotes":""},"categories":[91,867],"tags":[],"class_list":["post-13885","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-r","category-webr"],"yoast_head":"\n? Lit + WebR + Observable Plot: Linking Lit's Lightweight Web Components And WebR For Vanilla JS Reactivity & JS DataVis - rud.is<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/rud.is\/b\/2023\/03\/26\/\ud83e\uddea-lit-webr-observable-plot-linking-lits-lightweight-web-components-and-webr-for-vanilla-js-reactivity-js-datavis\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"? Lit + WebR + Observable Plot: Linking Lit's Lightweight Web Components And WebR For Vanilla JS Reactivity & JS DataVis - rud.is\" \/>\n<meta property=\"og:description\" content=\"See it live before reading! The previous post brought lit-webr, to introduce Lit and basic reactivity. Today, is more of the same, but we bring the OG Shiny demo plot into the modern age by using Observbable Plot to make the charts. We’re still pulling data from R, but we’re letting Plot do all the […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rud.is\/b\/2023\/03\/26\/\ud83e\uddea-lit-webr-observable-plot-linking-lits-lightweight-web-components-and-webr-for-vanilla-js-reactivity-js-datavis\/\" \/>\n<meta property=\"og:site_name\" content=\"rud.is\" \/>\n<meta property=\"article:published_time\" content=\"2023-03-27T00:47:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2023\/03\/preview.png?fit=1570%2C1536&ssl=1\" \/>\n\t<meta property=\"og:image:width\" content=\"1570\" \/>\n\t<meta property=\"og:image:height\" content=\"1536\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"hrbrmstr\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"hrbrmstr\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/rud.is\\\/b\\\/2023\\\/03\\\/26\\\/%f0%9f%a7%aa-lit-webr-observable-plot-linking-lits-lightweight-web-components-and-webr-for-vanilla-js-reactivity-js-datavis\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rud.is\\\/b\\\/2023\\\/03\\\/26\\\/%f0%9f%a7%aa-lit-webr-observable-plot-linking-lits-lightweight-web-components-and-webr-for-vanilla-js-reactivity-js-datavis\\\/\"},\"author\":{\"name\":\"hrbrmstr\",\"@id\":\"https:\\\/\\\/rud.is\\\/b\\\/#\\\/schema\\\/person\\\/d7cb7487ab0527447f7fda5c423ff886\"},\"headline\":\"? Lit + WebR + Observable Plot: Linking Lit’s Lightweight Web Components And WebR For Vanilla JS Reactivity & JS DataVis\",\"datePublished\":\"2023-03-27T00:47:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/rud.is\\\/b\\\/2023\\\/03\\\/26\\\/%f0%9f%a7%aa-lit-webr-observable-plot-linking-lits-lightweight-web-components-and-webr-for-vanilla-js-reactivity-js-datavis\\\/\"},\"wordCount\":332,\"commentCount\":4,\"publisher\":{\"@id\":\"https:\\\/\\\/rud.is\\\/b\\\/#\\\/schema\\\/person\\\/d7cb7487ab0527447f7fda5c423ff886\"},\"image\":{\"@id\":\"https:\\\/\\\/rud.is\\\/b\\\/2023\\\/03\\\/26\\\/%f0%9f%a7%aa-lit-webr-observable-plot-linking-lits-lightweight-web-components-and-webr-for-vanilla-js-reactivity-js-datavis\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/rud.is\\\/b\\\/wp-content\\\/uploads\\\/2023\\\/03\\\/preview.png?fit=1570%2C1536&ssl=1\",\"articleSection\":[\"R\",\"webr\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/rud.is\\\/b\\\/2023\\\/03\\\/26\\\/%f0%9f%a7%aa-lit-webr-observable-plot-linking-lits-lightweight-web-components-and-webr-for-vanilla-js-reactivity-js-datavis\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/rud.is\\\/b\\\/2023\\\/03\\\/26\\\/%f0%9f%a7%aa-lit-webr-observable-plot-linking-lits-lightweight-web-components-and-webr-for-vanilla-js-reactivity-js-datavis\\\/\",\"url\":\"https:\\\/\\\/rud.is\\\/b\\\/2023\\\/03\\\/26\\\/%f0%9f%a7%aa-lit-webr-observable-plot-linking-lits-lightweight-web-components-and-webr-for-vanilla-js-reactivity-js-datavis\\\/\",\"name\":\"? Lit + WebR + Observable Plot: Linking Lit's Lightweight Web Components And WebR For Vanilla JS Reactivity & JS DataVis - rud.is\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rud.is\\\/b\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/rud.is\\\/b\\\/2023\\\/03\\\/26\\\/%f0%9f%a7%aa-lit-webr-observable-plot-linking-lits-lightweight-web-components-and-webr-for-vanilla-js-reactivity-js-datavis\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/rud.is\\\/b\\\/2023\\\/03\\\/26\\\/%f0%9f%a7%aa-lit-webr-observable-plot-linking-lits-lightweight-web-components-and-webr-for-vanilla-js-reactivity-js-datavis\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/rud.is\\\/b\\\/wp-content\\\/uploads\\\/2023\\\/03\\\/preview.png?fit=1570%2C1536&ssl=1\",\"datePublished\":\"2023-03-27T00:47:50+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/rud.is\\\/b\\\/2023\\\/03\\\/26\\\/%f0%9f%a7%aa-lit-webr-observable-plot-linking-lits-lightweight-web-components-and-webr-for-vanilla-js-reactivity-js-datavis\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/rud.is\\\/b\\\/2023\\\/03\\\/26\\\/%f0%9f%a7%aa-lit-webr-observable-plot-linking-lits-lightweight-web-components-and-webr-for-vanilla-js-reactivity-js-datavis\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/rud.is\\\/b\\\/2023\\\/03\\\/26\\\/%f0%9f%a7%aa-lit-webr-observable-plot-linking-lits-lightweight-web-components-and-webr-for-vanilla-js-reactivity-js-datavis\\\/#primaryimage\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/rud.is\\\/b\\\/wp-content\\\/uploads\\\/2023\\\/03\\\/preview.png?fit=1570%2C1536&ssl=1\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/rud.is\\\/b\\\/wp-content\\\/uploads\\\/2023\\\/03\\\/preview.png?fit=1570%2C1536&ssl=1\",\"width\":1570,\"height\":1536,\"caption\":\"popup menu + barplot\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/rud.is\\\/b\\\/2023\\\/03\\\/26\\\/%f0%9f%a7%aa-lit-webr-observable-plot-linking-lits-lightweight-web-components-and-webr-for-vanilla-js-reactivity-js-datavis\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/rud.is\\\/b\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"? Lit + WebR + Observable Plot: Linking Lit’s Lightweight Web Components And WebR For Vanilla JS Reactivity & JS DataVis\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/rud.is\\\/b\\\/#website\",\"url\":\"https:\\\/\\\/rud.is\\\/b\\\/\",\"name\":\"rud.is\",\"description\":\""In God we trust. All others must bring data"\",\"publisher\":{\"@id\":\"https:\\\/\\\/rud.is\\\/b\\\/#\\\/schema\\\/person\\\/d7cb7487ab0527447f7fda5c423ff886\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/rud.is\\\/b\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/rud.is\\\/b\\\/#\\\/schema\\\/person\\\/d7cb7487ab0527447f7fda5c423ff886\",\"name\":\"hrbrmstr\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/i0.wp.com\\\/rud.is\\\/b\\\/wp-content\\\/uploads\\\/2023\\\/10\\\/ukr-shield.png?fit=460%2C460&ssl=1\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/rud.is\\\/b\\\/wp-content\\\/uploads\\\/2023\\\/10\\\/ukr-shield.png?fit=460%2C460&ssl=1\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/rud.is\\\/b\\\/wp-content\\\/uploads\\\/2023\\\/10\\\/ukr-shield.png?fit=460%2C460&ssl=1\",\"width\":460,\"height\":460,\"caption\":\"hrbrmstr\"},\"logo\":{\"@id\":\"https:\\\/\\\/i0.wp.com\\\/rud.is\\\/b\\\/wp-content\\\/uploads\\\/2023\\\/10\\\/ukr-shield.png?fit=460%2C460&ssl=1\"},\"description\":\"Don't look at me\u2026I do what he does \u2014 just slower. #rstats avuncular \u2022 ?Resistance Fighter \u2022 Cook \u2022 Christian \u2022 [Master] Chef des Donn\u00e9es de S\u00e9curit\u00e9 @ @rapid7\",\"sameAs\":[\"http:\\\/\\\/rud.is\"],\"url\":\"https:\\\/\\\/rud.is\\\/b\\\/author\\\/hrbrmstr\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"? Lit + WebR + Observable Plot: Linking Lit's Lightweight Web Components And WebR For Vanilla JS Reactivity & JS DataVis - rud.is","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/rud.is\/b\/2023\/03\/26\/\ud83e\uddea-lit-webr-observable-plot-linking-lits-lightweight-web-components-and-webr-for-vanilla-js-reactivity-js-datavis\/","og_locale":"en_US","og_type":"article","og_title":"? Lit + WebR + Observable Plot: Linking Lit's Lightweight Web Components And WebR For Vanilla JS Reactivity & JS DataVis - rud.is","og_description":"See it live before reading! The previous post brought lit-webr, to introduce Lit and basic reactivity. Today, is more of the same, but we bring the OG Shiny demo plot into the modern age by using Observbable Plot to make the charts. We’re still pulling data from R, but we’re letting Plot do all the […]","og_url":"https:\/\/rud.is\/b\/2023\/03\/26\/\ud83e\uddea-lit-webr-observable-plot-linking-lits-lightweight-web-components-and-webr-for-vanilla-js-reactivity-js-datavis\/","og_site_name":"rud.is","article_published_time":"2023-03-27T00:47:50+00:00","og_image":[{"width":1570,"height":1536,"url":"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2023\/03\/preview.png?fit=1570%2C1536&ssl=1","type":"image\/png"}],"author":"hrbrmstr","twitter_card":"summary_large_image","twitter_misc":{"Written by":"hrbrmstr","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/rud.is\/b\/2023\/03\/26\/%f0%9f%a7%aa-lit-webr-observable-plot-linking-lits-lightweight-web-components-and-webr-for-vanilla-js-reactivity-js-datavis\/#article","isPartOf":{"@id":"https:\/\/rud.is\/b\/2023\/03\/26\/%f0%9f%a7%aa-lit-webr-observable-plot-linking-lits-lightweight-web-components-and-webr-for-vanilla-js-reactivity-js-datavis\/"},"author":{"name":"hrbrmstr","@id":"https:\/\/rud.is\/b\/#\/schema\/person\/d7cb7487ab0527447f7fda5c423ff886"},"headline":"? Lit + WebR + Observable Plot: Linking Lit’s Lightweight Web Components And WebR For Vanilla JS Reactivity & JS DataVis","datePublished":"2023-03-27T00:47:50+00:00","mainEntityOfPage":{"@id":"https:\/\/rud.is\/b\/2023\/03\/26\/%f0%9f%a7%aa-lit-webr-observable-plot-linking-lits-lightweight-web-components-and-webr-for-vanilla-js-reactivity-js-datavis\/"},"wordCount":332,"commentCount":4,"publisher":{"@id":"https:\/\/rud.is\/b\/#\/schema\/person\/d7cb7487ab0527447f7fda5c423ff886"},"image":{"@id":"https:\/\/rud.is\/b\/2023\/03\/26\/%f0%9f%a7%aa-lit-webr-observable-plot-linking-lits-lightweight-web-components-and-webr-for-vanilla-js-reactivity-js-datavis\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2023\/03\/preview.png?fit=1570%2C1536&ssl=1","articleSection":["R","webr"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/rud.is\/b\/2023\/03\/26\/%f0%9f%a7%aa-lit-webr-observable-plot-linking-lits-lightweight-web-components-and-webr-for-vanilla-js-reactivity-js-datavis\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/rud.is\/b\/2023\/03\/26\/%f0%9f%a7%aa-lit-webr-observable-plot-linking-lits-lightweight-web-components-and-webr-for-vanilla-js-reactivity-js-datavis\/","url":"https:\/\/rud.is\/b\/2023\/03\/26\/%f0%9f%a7%aa-lit-webr-observable-plot-linking-lits-lightweight-web-components-and-webr-for-vanilla-js-reactivity-js-datavis\/","name":"? Lit + WebR + Observable Plot: Linking Lit's Lightweight Web Components And WebR For Vanilla JS Reactivity & JS DataVis - rud.is","isPartOf":{"@id":"https:\/\/rud.is\/b\/#website"},"primaryImageOfPage":{"@id":"https:\/\/rud.is\/b\/2023\/03\/26\/%f0%9f%a7%aa-lit-webr-observable-plot-linking-lits-lightweight-web-components-and-webr-for-vanilla-js-reactivity-js-datavis\/#primaryimage"},"image":{"@id":"https:\/\/rud.is\/b\/2023\/03\/26\/%f0%9f%a7%aa-lit-webr-observable-plot-linking-lits-lightweight-web-components-and-webr-for-vanilla-js-reactivity-js-datavis\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2023\/03\/preview.png?fit=1570%2C1536&ssl=1","datePublished":"2023-03-27T00:47:50+00:00","breadcrumb":{"@id":"https:\/\/rud.is\/b\/2023\/03\/26\/%f0%9f%a7%aa-lit-webr-observable-plot-linking-lits-lightweight-web-components-and-webr-for-vanilla-js-reactivity-js-datavis\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rud.is\/b\/2023\/03\/26\/%f0%9f%a7%aa-lit-webr-observable-plot-linking-lits-lightweight-web-components-and-webr-for-vanilla-js-reactivity-js-datavis\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/rud.is\/b\/2023\/03\/26\/%f0%9f%a7%aa-lit-webr-observable-plot-linking-lits-lightweight-web-components-and-webr-for-vanilla-js-reactivity-js-datavis\/#primaryimage","url":"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2023\/03\/preview.png?fit=1570%2C1536&ssl=1","contentUrl":"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2023\/03\/preview.png?fit=1570%2C1536&ssl=1","width":1570,"height":1536,"caption":"popup menu + barplot"},{"@type":"BreadcrumbList","@id":"https:\/\/rud.is\/b\/2023\/03\/26\/%f0%9f%a7%aa-lit-webr-observable-plot-linking-lits-lightweight-web-components-and-webr-for-vanilla-js-reactivity-js-datavis\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/rud.is\/b\/"},{"@type":"ListItem","position":2,"name":"? Lit + WebR + Observable Plot: Linking Lit’s Lightweight Web Components And WebR For Vanilla JS Reactivity & JS DataVis"}]},{"@type":"WebSite","@id":"https:\/\/rud.is\/b\/#website","url":"https:\/\/rud.is\/b\/","name":"rud.is","description":""In God we trust. All others must bring data"","publisher":{"@id":"https:\/\/rud.is\/b\/#\/schema\/person\/d7cb7487ab0527447f7fda5c423ff886"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/rud.is\/b\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/rud.is\/b\/#\/schema\/person\/d7cb7487ab0527447f7fda5c423ff886","name":"hrbrmstr","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2023\/10\/ukr-shield.png?fit=460%2C460&ssl=1","url":"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2023\/10\/ukr-shield.png?fit=460%2C460&ssl=1","contentUrl":"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2023\/10\/ukr-shield.png?fit=460%2C460&ssl=1","width":460,"height":460,"caption":"hrbrmstr"},"logo":{"@id":"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2023\/10\/ukr-shield.png?fit=460%2C460&ssl=1"},"description":"Don't look at me\u2026I do what he does \u2014 just slower. #rstats avuncular \u2022 ?Resistance Fighter \u2022 Cook \u2022 Christian \u2022 [Master] Chef des Donn\u00e9es de S\u00e9curit\u00e9 @ @rapid7","sameAs":["http:\/\/rud.is"],"url":"https:\/\/rud.is\/b\/author\/hrbrmstr\/"}]}},"jetpack_featured_media_url":"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2023\/03\/preview.png?fit=1570%2C1536&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/p23idr-3BX","jetpack_likes_enabled":true,"jetpack-related-posts":[{"id":13860,"url":"https:\/\/rud.is\/b\/2023\/03\/25\/linking-lits-lightweight-web-components-and-webr-for-vanilla-js-reactivity\/","url_meta":{"origin":13885,"position":0},"title":"Linking Lit’s Lightweight Web Components And WebR For Vanilla JS Reactivity","author":"hrbrmstr","date":"2023-03-25","format":false,"excerpt":"See it live before reading! This is a Lit + WebR reproduction of the OG Shiny Demo App Lit is a javascript library that makes it a bit easier to work with Web Components, and is especially well-suited in reactive environments. My recent hack-y WebR experiments have been using Reef\u2026","rel":"","context":"In "R"","block_context":{"text":"R","link":"https:\/\/rud.is\/b\/category\/r\/"},"img":{"alt_text":"some descriptive text you can read at the linked url in the post. there's also a popup menu and a barplot.","src":"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2023\/03\/lit-webr-phones.png?fit=1200%2C972&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2023\/03\/lit-webr-phones.png?fit=1200%2C972&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2023\/03\/lit-webr-phones.png?fit=1200%2C972&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2023\/03\/lit-webr-phones.png?fit=1200%2C972&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2023\/03\/lit-webr-phones.png?fit=1200%2C972&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":13834,"url":"https:\/\/rud.is\/b\/2023\/03\/18\/the-road-to-ggplot2-in-webr-part-1-the-road-is-paved-with-good-base-r-plots\/","url_meta":{"origin":13885,"position":1},"title":"The Road To ggplot2 In WebR, Part 1: The Road Is Paved With Good Base R Plots","author":"hrbrmstr","date":"2023-03-18","format":false,"excerpt":"I have graphics working in Vanilla JS WebR, now, and I'll cover the path to that in two parts. The intent was to jump straight into ggplot2-land, but, as you saw in my previous post, WASM'd ggplot2 is a bear. And, I really didn't grok what the WebR site docs\u2026","rel":"","context":"In "ggplot"","block_context":{"text":"ggplot","link":"https:\/\/rud.is\/b\/category\/ggplot\/"},"img":{"alt_text":"WebR plot example with a faceted scatterplot","src":"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2023\/03\/Screenshot-2023-03-18-at-10.10.23.png?fit=974%2C1200&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2023\/03\/Screenshot-2023-03-18-at-10.10.23.png?fit=974%2C1200&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2023\/03\/Screenshot-2023-03-18-at-10.10.23.png?fit=974%2C1200&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2023\/03\/Screenshot-2023-03-18-at-10.10.23.png?fit=974%2C1200&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":13789,"url":"https:\/\/rud.is\/b\/2023\/03\/12\/almost-bare-bones-webr-starter-app\/","url_meta":{"origin":13885,"position":2},"title":"Almost Bare Bones WebR Starter App","author":"hrbrmstr","date":"2023-03-12","format":false,"excerpt":"Let's walk through how to set up a ~minimal HTML\/JS\/CSS + WebR-powered \"app\" on a server you own. This will be vanilla JS (i.e. no React\/Vue\/npm\/bundler) you can hack on at-will. TL;DR: You can find the source to the app and track changes to it over on GitHub if you\u2026","rel":"","context":"In "R"","block_context":{"text":"R","link":"https:\/\/rud.is\/b\/category\/r\/"},"img":{"alt_text":"screenshot of the example webr app showing a portion of mtcars","src":"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2023\/03\/Screenshot-2023-03-12-at-10.24.18.png?fit=1200%2C772&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2023\/03\/Screenshot-2023-03-12-at-10.24.18.png?fit=1200%2C772&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2023\/03\/Screenshot-2023-03-12-at-10.24.18.png?fit=1200%2C772&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2023\/03\/Screenshot-2023-03-12-at-10.24.18.png?fit=1200%2C772&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2023\/03\/Screenshot-2023-03-12-at-10.24.18.png?fit=1200%2C772&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":13773,"url":"https:\/\/rud.is\/b\/2023\/03\/09\/webr-is-here\/","url_meta":{"origin":13885,"position":3},"title":"WebR IS HERE!","author":"hrbrmstr","date":"2023-03-09","format":false,"excerpt":"WebR 0.1.0 was released! I had been git-stalking George (the absolute genius who we all must thank for this) for a while and noticed the GH org and repos being updated earlier this week, So, I was already pretty excited. It dropped today, and you can hit that link for\u2026","rel":"","context":"In "d3"","block_context":{"text":"d3","link":"https:\/\/rud.is\/b\/category\/d3\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":13963,"url":"https:\/\/rud.is\/b\/2023\/04\/16\/start-creating-vanilla-js-webr-apps-with-less-inertia\/","url_meta":{"origin":13885,"position":4},"title":"Start Creating Vanilla JS WebR Apps With Less Inertia","author":"hrbrmstr","date":"2023-04-16","format":false,"excerpt":"WebR has a template for React, but I'm not a fan of it or Vue (a fact longtime readers are likely tired of hearing right about now). It's my opinion and experience that Lit webcomponents come closer to \u201cbare metal\u201d webcomponents, which means the \u201clock-in\u201d with Lit is way less\u2026","rel":"","context":"In "R"","block_context":{"text":"R","link":"https:\/\/rud.is\/b\/category\/r\/"},"img":{"alt_text":"dark mode webr web app","src":"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2023\/04\/dark.png?fit=1200%2C754&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2023\/04\/dark.png?fit=1200%2C754&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2023\/04\/dark.png?fit=1200%2C754&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2023\/04\/dark.png?fit=1200%2C754&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2023\/04\/dark.png?fit=1200%2C754&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":13894,"url":"https:\/\/rud.is\/b\/2023\/03\/29\/using-webr-pyodide-to-fill-in-the-temporary-package-gaps\/","url_meta":{"origin":13885,"position":5},"title":"Using WebR + Pyodide To Fill In The (Temporary) Package Gaps","author":"hrbrmstr","date":"2023-03-29","format":false,"excerpt":"I won't wax long and poetic here since I've already posted the experiment that has all the details. TL;DR: there are still only ~90-ish ? in the WebR WASM \"CRAN\", but more are absolutely on the way, including the capability to build your own CRAN and dev packages via Docker\u2026","rel":"","context":"In "Python"","block_context":{"text":"Python","link":"https:\/\/rud.is\/b\/category\/python-2\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/rud.is\/b\/wp-json\/wp\/v2\/posts\/13885","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rud.is\/b\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rud.is\/b\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rud.is\/b\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rud.is\/b\/wp-json\/wp\/v2\/comments?post=13885"}],"version-history":[{"count":0,"href":"https:\/\/rud.is\/b\/wp-json\/wp\/v2\/posts\/13885\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rud.is\/b\/wp-json\/wp\/v2\/media\/13886"}],"wp:attachment":[{"href":"https:\/\/rud.is\/b\/wp-json\/wp\/v2\/media?parent=13885"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rud.is\/b\/wp-json\/wp\/v2\/categories?post=13885"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rud.is\/b\/wp-json\/wp\/v2\/tags?post=13885"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}