fubits1
diff --git a/‎.gitignore
+7 b/‎.gitignore
+7
diff --git a/‎00-quarto-observable-basics.qmd
+217 b/‎00-quarto-observable-basics.qmd
+217
@@ -0,0 +1,7 @@
+.Rproj.user
+.Rhistory
+.RData
+.Ruserdata
+_publish.yml
+
+/.quarto/
@@ -0,0 +1,217 @@
+---
+title: "Quarto Tests"
+format:
+  html:
+    toc: true
+    toc-title: "TOC"
+    css: ./css/style.css
+code-fold: true
+---
+
+# Quarto Tests
+
+> deploy with `quarto publish quarto-pub 00-quarto-observable-basics.qmd`
+
+## TODOs
+
+- [ ] [Query Database](https://observablehq.com/@observablehq/databases)
+- [ ] Document publishing to quartopub.com with `quarto publish quarto-pub <filename>.qmd`
+
+## Syntax Sugar bytes
+
+:::{}
+I'm a `div` but R will wrap me within a `<p></p>`
+:::
+
+:::{.callout-note}
+Note that there are five types of callouts, including:
+`note`, `warning`, `important`, `tip`, and `caution`.
+:::
+
+:::{.callout-warning}
+I'm a `div` but R will wrap me within a `<p></p>`
+:::
+
+:::{.callout-important}
+Funny how `important` is more urgent than `warning`...
+:::
+
+:::{.callout-tip}
+## Tip With Caption
+
+This is an example of a callout with a caption.
+:::
+
+:::{.callout-caution collapse="true"}
+## Expand To Learn About Collapse
+
+This is an example of a 'folded' caution callout that can be expanded by the user. You can use `collapse="true"` to collapse it by default or `collapse="false"` to make a collapsible callout that is expanded by default.
+:::
+
+::: {.callout-note icon=false}
+
+## Pay Attention
+
+I'm naked and don't have an icon
+
+:::
+
+::: {.callout-note appearance="simple"}
+
+## Don't Pay Attention
+
+I'm even more minimal
+
+:::
+
+# Test: does R work?
+
+## 1 - Packages
+
+```{r}
+#| warning: false
+library(tidyverse)
+```
+
+## 2 - ggplot
+
+```{r}
+#| fig-cap: !expr paste0("Figure caption for this plot, ", lubridate::today())
+ggplot(mpg, aes(x = hwy, y = cty, color = cyl)) +
+  geom_point(alpha = 0.5, size = 2) +
+  scale_color_viridis_c() +
+  theme_minimal()
+```
+
+# Tabset
+
+::: {.panel-tabset}
+
+## head(mtcars)
+
+```{r}
+head(mtcars)
+```
+
+
+## plot(mtcars)
+
+```{r}
+plot(mtcars)
+```
+
+:::
+
+# R --> ObservableJS
+
+```{r}
+labels <- c("Custom Title from R Object", "Custom Label")
+ojs_define(labels = labels)
+data_processed <- mtcars %>% 
+  tibble::rownames_to_column(var = "brand") 
+```
+
+```{r}
+head(data_processed)
+```
+
+## Expose R --> OJS
+
+> notice the `<script type="ojs-define">` entry in the HTML document's `<head />`
+
+```{r}
+ojs_define(mtcarsJS = data_processed)
+```
+
+```{ojs}
+Object.entries(mtcarsJS)
+```
+
+## OJS: Inputs.table()
+
+> note the `transpose()`
+
+```{ojs}
+Inputs.table(transpose(mtcarsJS))
+```
+
+# Bubble Chart
+
+This example uses a D3 bubble chart imported from Observable HQ to analyze commits to GitHub repositories.
+
+Select a repository to analyze the commits of:
+
+```{ojs}
+//| echo: false
+//| panel: input
+viewof repo = Inputs.radio(
+  [
+    "tidyverse/ggplot2",
+    "sveltejs/kit",
+    "sveltejs/svelte"
+  ], 
+  { label: labels[0], value: "tidyverse/ggplot2"}
+)
+```
+
+Fetch the commits for the specified `repo` using the GitHub API:
+
+```{ojs}
+//| eval: true
+d3 = require('d3')
+contributors = await d3.json(
+  "https://api.github.com/repos/" + repo + "/stats/contributors"
+)
+commits = contributors.map(contributor => {
+  const author = contributor.author;
+  return {
+    name: author.login,
+    title: author.login,
+    group: author.type,
+    value: contributor.total
+  }
+})
+```
+
+Note that the `repo` variable is bound dynamically from the radio input defined above. If you change the input the contributors query will be automatically re-executed.
+
+
+```{ojs}
+Object.entries(commits)
+```
+
+View the commits sorted by most to least:
+
+```{ojs}
+Inputs.table(commits, { sort: "value", reverse: true })
+```
+
+Visualize using a D3 bubble chart imported from Observable HQ:
+
+```{ojs}
+import { chart } with { commits as data } 
+  from "@d3/d3-bubble-chart"
+chart
+```
+
+# Bonus: HTML & reactive CSS Style
+
+```{ojs}
+import {x11colors} from "@observablehq/input-select"
+```
+
+```{=html}
+<details>
+<summary>x11colors fallback</summary>
+<pre><code>
+x11colors = ["aliceblue", "antiquewhite", "aqua", "aquamarine", "azure", "beige", "bisque", "black", "blanchedalmond", "blue", "blueviolet", "brown", "burlywood", "cadetblue", "chartreuse", "chocolate", "coral", "cornflowerblue", "cornsilk", "crimson", "cyan", "darkblue", "darkcyan", "darkgoldenrod", "darkgray", "darkgreen", "darkgrey", "darkkhaki", "darkmagenta", "darkolivegreen", "darkorange", "darkorchid", "darkred", "darksalmon", "darkseagreen", "darkslateblue", "darkslategray", "darkslategrey", "darkturquoise", "darkviolet", "deeppink", "deepskyblue", "dimgray", "dimgrey", "dodgerblue", "firebrick", "floralwhite", "forestgreen", "fuchsia", "gainsboro", "ghostwhite", "gold", "goldenrod", "gray", "green", "greenyellow", "grey", "honeydew", "hotpink", "indianred", "indigo", "ivory", "khaki", "lavender", "lavenderblush", "lawngreen", "lemonchiffon", "lightblue", "lightcoral", "lightcyan", "lightgoldenrodyellow", "lightgray", "lightgreen", "lightgrey", "lightpink", "lightsalmon", "lightseagreen", "lightskyblue", "lightslategray", "lightslategrey", "lightsteelblue", "lightyellow", "lime", "limegreen", "linen", "magenta", "maroon", "mediumaquamarine", "mediumblue", "mediumorchid", "mediumpurple", "mediumseagreen", "mediumslateblue", "mediumspringgreen", "mediumturquoise", "mediumvioletred", "midnightblue", "mintcream", "mistyrose", "moccasin", "navajowhite", "navy", "oldlace", "olive", "olivedrab", "orange", "orangered", "orchid", "palegoldenrod", "palegreen", "paleturquoise", "palevioletred", "papayawhip", "peachpuff", "peru", "pink", "plum", "powderblue", "purple", "rebeccapurple", "red", "rosybrown", "royalblue", "saddlebrown", "salmon", "sandybrown", "seagreen", "seashell", "sienna", "silver", "skyblue", "slateblue", "slategray", "slategrey", "snow", "springgreen", "steelblue", "tan", "teal", "thistle", "tomato", "turquoise", "violet", "wheat", "white", "whitesmoke", "yellow", "yellowgreen"]</code></pre>
+</details>
+```
+
+```{ojs}
+viewof color = Inputs.select(x11colors, {value: "steelblue", label: "Favorite color"})
+```
+
+```{ojs}
+html`<div style="background: ${color}; width: 100%; height: 25px;">`
+```