-
Notifications
You must be signed in to change notification settings - Fork 0
/
README.Rmd
130 lines (99 loc) · 3.7 KB
/
README.Rmd
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
---
output: github_document
---
<!-- README.md is generated from README.Rmd. Please edit that file -->
```{r, include = FALSE}
knitr::opts_chunk$set(
collapse = TRUE,
comment = "#>",
fig.path = "man/figures/README-",
out.width = "100%"
)
```
# bhhicharts
<!-- badges: start -->
[](https://app.codecov.io/gh/ucsf-bhhi/bhhicharts?branch=main)
[](https://github.com/ucsf-bhhi/bhhicharts/actions/workflows/R-CMD-check.yaml)
<!-- badges: end -->
bhhicharts helps create interactive charts and provides infrastructure for embedding them on the BHHI website.
It can take a single chart or set of related charts and render them on a simple webpage that can then be embedded on the BHHI Drupal site.
## Installation
You can install bhhicharts from [GitHub](https://github.com/ucsf-bhhi/bhhicharts) with:
``` r
# install.packages("remotes")
remotes::install_github("ucsf-bhhi/bhhicharts")
```
## Use
bhhicharts relies on the [highcharter](https://jkunst.com/highcharter/) package to create the charts.
### Single chart
After creating a chart:
```{r}
library(highcharter)
scatter_chart = hchart(mtcars, "scatter", hcaes(x = wt, y = mpg, group = cyl)) |>
hc_xAxis(title = list(text = "Weight")) |>
hc_yAxis(title = list(text = "MPG")) |>
hc_legend(title = list(text = "Cylinders"))
```
It can be rendered in a simple webpage with the BHHI theme and logo applied. The webpage can then be embedded into the BHHI Drupal site.
```{r, eval=FALSE}
dir = tempdir()
bhhicharts::create_webpage(
scatter_chart, html_filename = "scatter-chart.html", root_dir = dir
)
```
```{r, echo=FALSE, include=FALSE, eval=FALSE}
webshot::webshot(
fs::path(dir, "scatter-chart.html"),
delay = 1,
zoom = 2,
selector = "body",
"readme-img/scatter-chart.png"
)
#### Screenshot of rendered webpage
# 
```
### Multiple charts
bhhicharts can also render a webpage with a chart picker that allows the viewer to choose between multiple charts. This can be useful, for example, to show different visualizations of the data or different demographic groupings.
After creating another chart and putting the charts in a named list:
```{r}
column_chart = mtcars |>
dplyr::count(cyl, gear) |>
hchart("column", hcaes(x = cyl, y = n, group = gear)) |>
highcharter::hc_plotOptions(column = list(stacking = "normal")) |>
highcharter::hc_xAxis(title = list(text = "Cylinders")) |>
highcharter::hc_yAxis(title = list(text = "Count")) |>
highcharter::hc_legend(title = list(text = "Gears"))
charts = list("Column" = column_chart, "Scatter" = scatter_chart)
```
The set of charts can be rendered into a webpage:
```{r, eval=FALSE}
bhhicharts::create_webpage(
charts, html_filename = "multiple-charts.html", root_dir = dir
)
```
```{r, echo=FALSE, include=FALSE, eval=FALSE}
webshot::webshot(
fs::path(dir, "multiple-charts.html"),
delay = 2,
zoom = 2,
selector = "body",
"readme-img/multiple-charts-column.png"
)
webshot::webshot(
url = fs::path(dir, "multiple-charts.html"),
selector = "body",
delay = 10,
zoom = 2,
file = "readme-img/multiple-charts-scatter.png",
eval = "casper.then(function() {
this.evaluate(function() {
Highcharts.chart('chart-container', chartData['Scatter']);
document.getElementById('chart-picker')[1].selected = 'selected';
});
});"
)
#### Screenshot of first chart
# 
#### Screenshot of second chart
# 
```