{"id":13069,"date":"2021-05-09T08:25:51","date_gmt":"2021-05-09T13:25:51","guid":{"rendered":"https:\/\/rud.is\/b\/?p=13069"},"modified":"2021-05-11T08:34:18","modified_gmt":"2021-05-11T13:34:18","slug":"using-the-new-plot-javascript-exploratory-visualization-library-sans-observable","status":"publish","type":"post","link":"https:\/\/rud.is\/b\/2021\/05\/09\/using-the-new-plot-javascript-exploratory-visualization-library-sans-observable\/","title":{"rendered":"Using the new Plot Javascript Exploratory Visualization Library Sans-Observable"},"content":{"rendered":"<p>The fine folks over at @ObservableHQ released a new javascript exploratory visualization library called <a href=\"https:\/\/github.com\/observablehq\/plot\">Plot<\/a> last week with great fanfare. It was primarily <a href=\"https:\/\/observablehq.com\/@observablehq\/plot\">designed to be used in Observable notebooks<\/a> and I quickly tested it out there (you can find them at my Observable landing page: <a href=\"https:\/\/observablehq.com\/@hrbrmstr\">https:\/\/observablehq.com\/@hrbrmstr<\/a>).<\/p>\n<p>{Plot} doesn&#8217;t require Observable, however, and I threw together a small <a href=\"https:\/\/rud.is\/vis\/tsa-covid\/\">example that dynamically tracks U.S. airline passenger counts by the TSA<\/a> to demonstrate how to use it in a plain web page.<\/p>\n<p>It&#8217;s small enough that I can re-create it here: <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/apache-arrow@3\"><\/script><script src=\"https:\/\/cdn.jsdelivr.net\/npm\/arquero@latest\"><\/script><script src=\"https:\/\/cdn.jsdelivr.net\/npm\/d3@6\"><\/script><script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@observablehq\/plot@0.1\"><\/script><\/p>\n<div id=\"vis20210509\" class=\"vis\">\n<h4>TSA Total Traveler Throughput <span style='color:#E15759'>2021<\/span> vs <span style='color:#F28E2B'>2020<\/span> vs <span style='color:#4E79A7'>2019<\/span> (same weekday)<\/h4>\n<\/div>\n<p><script>fetch(\"https:\/\/observable-cors.glitch.me\/https:\/\/www.tsa.gov\/coronavirus\/passenger-throughput\",{cache:\"no-store\",mode:\"cors\",redirect:\"follow\"}).then(e=>e.text()).then(e=>{var t=(new DOMParser).parseFromString(e,\"text\/html\"),r=d3.timeParse(\"%m\/%d\/%Y\"),a=e=>Array.from(t.querySelectorAll(`table tbody tr td:nth-child(${e})`)).map(e=>parseFloat(e.innerText.trim().replace(\/,\/g,\"\"))),l=aq.table({day:Array.from(t.querySelectorAll(\"table tbody tr td:nth-child(1)\")).map(e=>r(e.innerText.trim().replace(\/.{4}$\/g,\"2021\"))),y2021:a(2),y2020:a(3),y2019:a(4)}).orderby(\"day\").objects().filter(e=>!isNaN(e.y2021));document.getElementById(\"vis20210509\").appendChild(Plot.plot({marginLeft:80,x:{grid:!0},y:{grid:!0,label:\"# Passengers\"},marks:[Plot.line(l,{x:\"day\",y:\"y2019\",stroke:\"#4E79A7\"}),Plot.line(l,{x:\"day\",y:\"y2020\",stroke:\"#F28E2B\"}),Plot.line(l,{x:\"day\",y:\"y2021\",stroke:\"#E15759\"})]}))}).catch(e=>e);<\/script><br \/>\nand include the (<em>lightly<\/em> annotated) source:<\/p>\n<pre><code class=\"language-js\">fetch(\n\"https:\/\/observable-cors.glitch.me\/https:\/\/www.tsa.gov\/coronavirus\/passenger-throughput\",\n{\n  cache: \"no-store\",\n  mode: \"cors\",\n  redirect: \"follow\"\n}\n)\n.then((response) =&gt; response.text()) \/\/ we get the text here\n.then((html) =&gt; {\n\n   var parser = new DOMParser();\n   var doc = parser.parseFromString(html, \"text\/html\"); \/\/ we turn it into DOM elements here\n\n   \/\/ some helpers to make the code less crufty\n   \/\/ first a function to make proper dates\n\n   var as_date = d3.timeParse(\"%m\/%d\/%Y\");\n\n   \/\/ and, now, a little function to pull a specific &lt;table&gt; column and\n   \/\/ convert it to a proper numeric array. I would have put this inline\n   \/\/ if we were only converting one column but there are three of them,\n   \/\/ so it makes sense to functionize it.\n\n   var col_double = (col_num) =&gt; {\n     return Array.from(\n     doc.querySelectorAll(`table tbody tr td:nth-child(${col_num})`)\n     ).map((d) =&gt; parseFloat(d.innerText.trim().replace(\/,\/g, \"\")));\n   };\n\n   \/\/ build an arquero table from the scraped columns\n\n   var flights = aq\n         .table({\n            day: Array.from(\n                   doc.querySelectorAll(\"table tbody tr td:nth-child(1)\")\n                 ).map((d) =&gt; as_date(d.innerText.trim().replace(\/.{4}$\/g, \"2021\"))),\n            y2021: col_double(2),\n            y2020: col_double(3),\n            y2019: col_double(4)\n        })\n        .orderby(\"day\")\n        .objects()\n        .filter((d) =&gt; !isNaN(d.y2021))\n\n   document.getElementById('vis').appendChild(\n     Plot.plot({\n       marginLeft: 80,\n       x: {\n         grid: true\n       },\n       y: {\n         grid: true,\n         label: \"# Passengers\"\n       },\n       marks: [\n         Plot.line(flights, { x: \"day\", y: \"y2019\", stroke: \"#4E79A7\" }),\n         Plot.line(flights, { x: \"day\", y: \"y2020\", stroke: \"#F28E2B\" }),\n         Plot.line(flights, { x: \"day\", y: \"y2021\", stroke: \"#E15759\" })\n       ]\n    })\n  );\n\n})\n.catch((err) =&gt; err)\n<\/code><\/pre>\n<h3>FIN<\/h3>\n<p>I&#8217;ll likely do a more in-depth piece on Plot in the coming weeks (today is Mother&#8217;s Dayin the U.S. and that&#8217;s going to consume most of my attention today), but I highly encourage y&#8217;all to play with this new, fun tool.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The fine folks over at @ObservableHQ released a new javascript exploratory visualization library called Plot last week with great fanfare. It was primarily designed to be used in Observable notebooks and I quickly tested it out there (you can find them at my Observable landing page: https:\/\/observablehq.com\/@hrbrmstr). {Plot} doesn&#8217;t require Observable, however, and I threw [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"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":[666,764,673,674,15],"tags":[],"class_list":["post-13069","post","type-post","status-publish","format-standard","hentry","category-d3","category-data-wrangling","category-datavis-2","category-dataviz","category-javascript"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Using the new Plot Javascript Exploratory Visualization Library Sans-Observable - 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\/2021\/05\/09\/using-the-new-plot-javascript-exploratory-visualization-library-sans-observable\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Using the new Plot Javascript Exploratory Visualization Library Sans-Observable - rud.is\" \/>\n<meta property=\"og:description\" content=\"The fine folks over at @ObservableHQ released a new javascript exploratory visualization library called Plot last week with great fanfare. It was primarily designed to be used in Observable notebooks and I quickly tested it out there (you can find them at my Observable landing page: https:\/\/observablehq.com\/@hrbrmstr). {Plot} doesn&#8217;t require Observable, however, and I threw [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rud.is\/b\/2021\/05\/09\/using-the-new-plot-javascript-exploratory-visualization-library-sans-observable\/\" \/>\n<meta property=\"og:site_name\" content=\"rud.is\" \/>\n<meta property=\"article:published_time\" content=\"2021-05-09T13:25:51+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-05-11T13:34:18+00:00\" \/>\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\\\/2021\\\/05\\\/09\\\/using-the-new-plot-javascript-exploratory-visualization-library-sans-observable\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rud.is\\\/b\\\/2021\\\/05\\\/09\\\/using-the-new-plot-javascript-exploratory-visualization-library-sans-observable\\\/\"},\"author\":{\"name\":\"hrbrmstr\",\"@id\":\"https:\\\/\\\/rud.is\\\/b\\\/#\\\/schema\\\/person\\\/d7cb7487ab0527447f7fda5c423ff886\"},\"headline\":\"Using the new Plot Javascript Exploratory Visualization Library Sans-Observable\",\"datePublished\":\"2021-05-09T13:25:51+00:00\",\"dateModified\":\"2021-05-11T13:34:18+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/rud.is\\\/b\\\/2021\\\/05\\\/09\\\/using-the-new-plot-javascript-exploratory-visualization-library-sans-observable\\\/\"},\"wordCount\":165,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\\\/\\\/rud.is\\\/b\\\/#\\\/schema\\\/person\\\/d7cb7487ab0527447f7fda5c423ff886\"},\"articleSection\":[\"d3\",\"data wrangling\",\"DataVis\",\"DataViz\",\"Javascript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/rud.is\\\/b\\\/2021\\\/05\\\/09\\\/using-the-new-plot-javascript-exploratory-visualization-library-sans-observable\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/rud.is\\\/b\\\/2021\\\/05\\\/09\\\/using-the-new-plot-javascript-exploratory-visualization-library-sans-observable\\\/\",\"url\":\"https:\\\/\\\/rud.is\\\/b\\\/2021\\\/05\\\/09\\\/using-the-new-plot-javascript-exploratory-visualization-library-sans-observable\\\/\",\"name\":\"Using the new Plot Javascript Exploratory Visualization Library Sans-Observable - rud.is\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rud.is\\\/b\\\/#website\"},\"datePublished\":\"2021-05-09T13:25:51+00:00\",\"dateModified\":\"2021-05-11T13:34:18+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/rud.is\\\/b\\\/2021\\\/05\\\/09\\\/using-the-new-plot-javascript-exploratory-visualization-library-sans-observable\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/rud.is\\\/b\\\/2021\\\/05\\\/09\\\/using-the-new-plot-javascript-exploratory-visualization-library-sans-observable\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/rud.is\\\/b\\\/2021\\\/05\\\/09\\\/using-the-new-plot-javascript-exploratory-visualization-library-sans-observable\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/rud.is\\\/b\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Using the new Plot Javascript Exploratory Visualization Library Sans-Observable\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/rud.is\\\/b\\\/#website\",\"url\":\"https:\\\/\\\/rud.is\\\/b\\\/\",\"name\":\"rud.is\",\"description\":\"&quot;In God we trust. All others must bring data&quot;\",\"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":"Using the new Plot Javascript Exploratory Visualization Library Sans-Observable - 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\/2021\/05\/09\/using-the-new-plot-javascript-exploratory-visualization-library-sans-observable\/","og_locale":"en_US","og_type":"article","og_title":"Using the new Plot Javascript Exploratory Visualization Library Sans-Observable - rud.is","og_description":"The fine folks over at @ObservableHQ released a new javascript exploratory visualization library called Plot last week with great fanfare. It was primarily designed to be used in Observable notebooks and I quickly tested it out there (you can find them at my Observable landing page: https:\/\/observablehq.com\/@hrbrmstr). {Plot} doesn&#8217;t require Observable, however, and I threw [&hellip;]","og_url":"https:\/\/rud.is\/b\/2021\/05\/09\/using-the-new-plot-javascript-exploratory-visualization-library-sans-observable\/","og_site_name":"rud.is","article_published_time":"2021-05-09T13:25:51+00:00","article_modified_time":"2021-05-11T13:34:18+00:00","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\/2021\/05\/09\/using-the-new-plot-javascript-exploratory-visualization-library-sans-observable\/#article","isPartOf":{"@id":"https:\/\/rud.is\/b\/2021\/05\/09\/using-the-new-plot-javascript-exploratory-visualization-library-sans-observable\/"},"author":{"name":"hrbrmstr","@id":"https:\/\/rud.is\/b\/#\/schema\/person\/d7cb7487ab0527447f7fda5c423ff886"},"headline":"Using the new Plot Javascript Exploratory Visualization Library Sans-Observable","datePublished":"2021-05-09T13:25:51+00:00","dateModified":"2021-05-11T13:34:18+00:00","mainEntityOfPage":{"@id":"https:\/\/rud.is\/b\/2021\/05\/09\/using-the-new-plot-javascript-exploratory-visualization-library-sans-observable\/"},"wordCount":165,"commentCount":1,"publisher":{"@id":"https:\/\/rud.is\/b\/#\/schema\/person\/d7cb7487ab0527447f7fda5c423ff886"},"articleSection":["d3","data wrangling","DataVis","DataViz","Javascript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/rud.is\/b\/2021\/05\/09\/using-the-new-plot-javascript-exploratory-visualization-library-sans-observable\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/rud.is\/b\/2021\/05\/09\/using-the-new-plot-javascript-exploratory-visualization-library-sans-observable\/","url":"https:\/\/rud.is\/b\/2021\/05\/09\/using-the-new-plot-javascript-exploratory-visualization-library-sans-observable\/","name":"Using the new Plot Javascript Exploratory Visualization Library Sans-Observable - rud.is","isPartOf":{"@id":"https:\/\/rud.is\/b\/#website"},"datePublished":"2021-05-09T13:25:51+00:00","dateModified":"2021-05-11T13:34:18+00:00","breadcrumb":{"@id":"https:\/\/rud.is\/b\/2021\/05\/09\/using-the-new-plot-javascript-exploratory-visualization-library-sans-observable\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rud.is\/b\/2021\/05\/09\/using-the-new-plot-javascript-exploratory-visualization-library-sans-observable\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/rud.is\/b\/2021\/05\/09\/using-the-new-plot-javascript-exploratory-visualization-library-sans-observable\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/rud.is\/b\/"},{"@type":"ListItem","position":2,"name":"Using the new Plot Javascript Exploratory Visualization Library Sans-Observable"}]},{"@type":"WebSite","@id":"https:\/\/rud.is\/b\/#website","url":"https:\/\/rud.is\/b\/","name":"rud.is","description":"&quot;In God we trust. All others must bring data&quot;","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":"","jetpack_shortlink":"https:\/\/wp.me\/p23idr-3oN","jetpack_likes_enabled":true,"jetpack-related-posts":[{"id":13060,"url":"https:\/\/rud.is\/b\/2021\/05\/06\/covid-19-u-s-county-vaccination-tracker-with-an-observable-notebook-using-datasettes-and-plot\/","url_meta":{"origin":13069,"position":0},"title":"COVID-19 U.S. County Vaccination Tracker With An Observable Notebook Using Datasettes and {Plot}","author":"hrbrmstr","date":"2021-05-06","format":false,"excerpt":"Rather than continue to generate daily images with R, I threw together an Observable notebook that takes advantage of the CDC COVID-19 county data datasette (provided by Simon Willison) and the new {Plot} library (by the @ObservableHQ team) that enables users to interactively see the daily county resident vaccination \"series\u2026","rel":"","context":"In &quot;DataVis&quot;","block_context":{"text":"DataVis","link":"https:\/\/rud.is\/b\/category\/datavis-2\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14337,"url":"https:\/\/rud.is\/b\/2023\/09\/09\/foliage-2023\/","url_meta":{"origin":13069,"position":1},"title":"Foliage 2023","author":"hrbrmstr","date":"2023-09-09","format":false,"excerpt":"2023-09-10 UPDATE: Art Steinmetz took me up on the Shiny challenge (at the end of the post) and did a fantastic job! The days are getting shorter and when we were visiting Down East Maine the other week, there was just a hint of some trees starting to change up\u2026","rel":"","context":"In &quot;data wrangling&quot;","block_context":{"text":"data wrangling","link":"https:\/\/rud.is\/b\/category\/data-wrangling\/"},"img":{"alt_text":"conus foliage map 2023","src":"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2023\/09\/lit-plot.png?fit=1200%2C1137&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2023\/09\/lit-plot.png?fit=1200%2C1137&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2023\/09\/lit-plot.png?fit=1200%2C1137&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2023\/09\/lit-plot.png?fit=1200%2C1137&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2023\/09\/lit-plot.png?fit=1200%2C1137&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":14001,"url":"https:\/\/rud.is\/b\/2023\/04\/29\/supreme-annotations-plot-redux-an-ojs-plot%e2%86%94ggplot2-rosetta-stone\/","url_meta":{"origin":13069,"position":2},"title":"Supreme Annotations Plot Redux &#038; An OJS Plot\u2194ggplot2 Rosetta Stone","author":"hrbrmstr","date":"2023-04-29","format":false,"excerpt":"Back in 2016, I did a post on {ggplot2} text annotations because it was a tad more challenging to do some of the things in that post back in the day. Since I've been moving back and forth between R and Observable (and JavaScript in general), I decided to recreate\u2026","rel":"","context":"In &quot;Observable&quot;","block_context":{"text":"Observable","link":"https:\/\/rud.is\/b\/category\/observable\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":13569,"url":"https:\/\/rud.is\/b\/2022\/09\/09\/fall-foliage-javascript-ojs-edition\/","url_meta":{"origin":13069,"position":3},"title":"Fall Foliage: JavaScript\/OJS Edition","author":"hrbrmstr","date":"2022-09-09","format":false,"excerpt":"I've been (mostly) keeping up with annual updates for my R\/{sf} U.S. foliage post which you can find on GH. This year, we have Quarto, and it comes with so many batteries included that you'd think it was Christmas. One of those batteries is full support for the Observable runtime.\u2026","rel":"","context":"In &quot;d3&quot;","block_context":{"text":"d3","link":"https:\/\/rud.is\/b\/category\/d3\/"},"img":{"alt_text":"foliage map","src":"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2022\/09\/foliage.png?fit=1200%2C1040&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2022\/09\/foliage.png?fit=1200%2C1040&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2022\/09\/foliage.png?fit=1200%2C1040&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2022\/09\/foliage.png?fit=1200%2C1040&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2022\/09\/foliage.png?fit=1200%2C1040&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":13549,"url":"https:\/\/rud.is\/b\/2022\/08\/20\/ohq2quarto-rust-based-cli-for-turning-observable-notebooks-into-quarto-projects\/","url_meta":{"origin":13069,"position":4},"title":"ohq2quarto \u2014 Rust-Based CLI For Turning Observable Notebooks Into Quarto Projects","author":"hrbrmstr","date":"2022-08-20","format":false,"excerpt":"The previous post had some hacky R code to grab seekrit JSON data in ObservableHQ (OHQ) Notebooks and spit out a directory with a Quarto qmd and any associated FileAttachments. Holding firm to my \"no more generic public R packages\" decree, that's as far as the R code for that\u2026","rel":"","context":"In &quot;Quarto&quot;","block_context":{"text":"Quarto","link":"https:\/\/rud.is\/b\/category\/quarto\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":13885,"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\/","url_meta":{"origin":13069,"position":5},"title":"? Lit + WebR + Observable Plot: Linking Lit&#8217;s Lightweight Web Components And WebR For Vanilla JS Reactivity &#038; JS DataVis","author":"hrbrmstr","date":"2023-03-26","format":false,"excerpt":"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\u2026","rel":"","context":"In &quot;R&quot;","block_context":{"text":"R","link":"https:\/\/rud.is\/b\/category\/r\/"},"img":{"alt_text":"popup menu + barplot","src":"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2023\/03\/preview.png?fit=1200%2C1174&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2023\/03\/preview.png?fit=1200%2C1174&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2023\/03\/preview.png?fit=1200%2C1174&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2023\/03\/preview.png?fit=1200%2C1174&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2023\/03\/preview.png?fit=1200%2C1174&ssl=1&resize=1050%2C600 3x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/rud.is\/b\/wp-json\/wp\/v2\/posts\/13069","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=13069"}],"version-history":[{"count":0,"href":"https:\/\/rud.is\/b\/wp-json\/wp\/v2\/posts\/13069\/revisions"}],"wp:attachment":[{"href":"https:\/\/rud.is\/b\/wp-json\/wp\/v2\/media?parent=13069"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rud.is\/b\/wp-json\/wp\/v2\/categories?post=13069"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rud.is\/b\/wp-json\/wp\/v2\/tags?post=13069"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}