-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path00-quarto-observable-basics.qmd
217 lines (155 loc) · 5.75 KB
/
00-quarto-observable-basics.qmd
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
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;">`
```