✏️ fixes based on review comments

DESCRIPTION

@@ -25,8 +25,11 @@ Roxygen: list(markdown = TRUE)
 Suggests: 
     testthat (>= 3.0.0),
     crosstalk,
-    shiny
+    shiny,
+    liminal
 Config/testthat/edition: 3
 VignetteBuilder: knitr
 URL: https://casperhart.github.io/detourr/
 BugReports: https://github.com/casperhart/detourr/issues
+Depends: 
+    R (>= 2.10)

srcts/display_scatter/controls.ts

@@ -103,10 +103,10 @@ export class ScatterControls {
     icon: string,
     buttonCallback: Function
   ) {
-    let button = document.createElement("button");
+    const button = document.createElement("button");
     button.innerHTML = icon;
     button.title = hoverText;
-    button.className = className;
+    button.className = `detourrButton ${className}`;
     button.onclick = () => buttonCallback();
     this.container.appendChild(button);
     return button;
@@ -125,7 +125,7 @@ export class ScatterControls {
 
   private addColourSelector() {
     // add colour picker
-    let colourSelector = document.createElement("input");
+    const colourSelector = document.createElement("input");
     colourSelector.setAttribute("type", "color");
     colourSelector.className = "colourSelector";
     colourSelector.setAttribute("value", "#619CFF");

srcts/display_scatter/style.css

@@ -1,4 +1,4 @@
-button {
+button.detourrButton {
   background-color: transparent;
   position: absolute;
   color: rgb(0, 0, 0);
@@ -7,42 +7,44 @@ button {
   height: 30px;
   border-color: transparent;
   left: 10px;
+  padding-top: 0px;
+  padding-right: 6px;
 }
 
-button:hover {
+button.detourrButton:hover {
   color: rgb(56, 56, 56);
 }
 
-button.resetButton {
+button.detourrButton.resetButton {
   top: 15px;
   border: 5px;
 }
 
-button.panButton {
+button.detourrButton.panButton {
   top: 50px;
   border: 5px;
 }
 
-button.orbitButton {
+button.detourrButton.orbitButton {
   top: 85px;
   border: 5px;
 }
 
-button.selectButton {
+button.detourrButton.selectButton {
   top: 120px;
   border: 5px;
 }
 
-button.brushButton {
+button.detourrButton.brushButton {
   top: 155px;
   border: 5px;
 }
 
-button.unselected {
+button.detourrButton.unselected {
   color: rgb(75, 75, 75);
 }
 
-button.selected {
+button.detourrButton.selected {
   color: rgb(44, 44, 240);
 }
 

srcts/display_scatter/timeline.ts

@@ -68,7 +68,7 @@ export class Timeline {
     const button = document.createElement("button");
     button.innerHTML = icon;
     button.title = hoverText;
-    button.className = `${name}Button`;
+    button.className = `detourrButton ${name}Button`;
     button.onclick = () => buttonCallback();
     return button;
   }

vignettes/display_scatter_interactivity/display_scatter_interactivity.Rmd

@@ -1,11 +1,14 @@
 ---
-title: "Interacting with display_scatter"
+title: "Introducing and interacting with `display_scatter()`"
 output: 
   rmarkdown::html_vignette:
 vignette: >
-  %\VignetteIndexEntry{Interacting with display_scatter}
+  %\VignetteIndexEntry{Introducing and interacting with `display_scatter()`}
   %\VignetteEngine{knitr::rmarkdown}
   %\VignetteEncoding{UTF-8}
+bibliography: references.bib
+nocite: |
+  @wang2018mapping, @cook2018dynamical
 ---
 
 ```{r, include = FALSE}
@@ -17,123 +20,122 @@ knitr::opts_chunk$set(
 )
 ```
 
-The detourr package consists of two very similar scatterplot displays; there's a 2D variant and a 3D variant, and both are produced using the `display_scatter` display method. Both of these have similar capabilities for user interaction, including point selection, brushing, orbit controls and more. In this vignette, we'll go through each of these in turn and describe how they can be used and configured.
+The `{detourr}` package consists of two very similar scatterplot displays; there's a 2D variant and a 3D variant, and both are produced using the `display_scatter()` display method. Both of these have similar capabilities for user interaction, including point selection, brushing, orbit controls and more. 
+In this vignette, we'll go through each of these in turn and describe how they can be used and configured.
 
-## Examples
+---
 
-For the following examples, the `pdfsense` dataset will be used, with the tour path set to `grand_tour`. 
-All of the interactivity described in this vignette can be demonstrated in these two examples, and the code that produced these visuals can be found in the [appendix](#appendix).
+## Data
 
-Below is the 2D variant of `display_scatter`:
-
-```{r 2d-scatter, message=FALSE, echo=FALSE}
-set.seed(1)
+For the following examples, the `pdfsense` dataset from the `{liminal}` package will be used. [@liminal]. 
 
+```{r, message=FALSE}
 library(detourr)
 library(dplyr)
-data(pdfsense)
+data(pdfsense, package = "liminal")
+
+pcs <- pdfsense %>%
+  select(X1:X56) %>%
+  prcomp()
 
-plot_data <-
-  pdfsense %>%
+pcs <- as_tibble(pcs$x) %>%
+  select(PC1:PC6)
+
+plot_data <- pdfsense %>%
+  select(-(X1:X56)) %>%
   mutate(Type = as.character(Type)) %>%
-  select(-(X11:X56))
+  bind_cols(pcs)
+```
+
+## Examples
 
+All of the interactivity described in this vignette can be demonstrated in these two examples.
+
+Below is the 2D variant of `display_scatter()`:
+
+```{r 2d-scatter, message=FALSE}
+set.seed(1)
 
 animate_tour(
   plot_data,
+  cols = starts_with("PC"),
   grand_tour(2),
   display_scatter(tour_aes(
     colour = Type,
     label = I(ID)
   ),
   axes = FALSE,
-  alpha = 1,
-  size = 0.5
+  size = 0.5,
+  alpha = 0.7
   )
 )
 ```
 
 And the 3D variant:
 
-```{r 3d-scatter, message=FALSE, echo=FALSE}
+```{r 3d-scatter, message=FALSE}
 set.seed(1)
 
-library(detourr)
-library(dplyr)
-data(pdfsense)
-
-plot_data <-
-  pdfsense %>%
-  mutate(Type = as.character(Type)) %>%
-  select(-(X11:X56))
-
-
 animate_tour(
   plot_data,
+  cols = starts_with("PC"),
   grand_tour(3),
   display_scatter(tour_aes(
     colour = Type,
     label = c(InFit, Type, ID, pt, x, mu)
   ),
   axes = FALSE,
-  alpha = 1,
-  size = 0.5
+  size = 0.5,
+  alpha = 0.7
   )
 )
 ```
 
-----
-
-## Controls
-
-The following is a brief breakdown of the controls found on the left side of the visual
-
-### Orbit controls
-
-```{r, echo=FALSE, out.width="25%"}
-knitr::include_graphics("images/orbit_control_button.png")
-```
-
-When the `display_scatter` widget is generated, orbit controls will be enabled by default. This allows click and drag to rotate the visual, and scrolling to zoom. Note that orbit controls for the 2D variant work best if dragging from left to right, not up and down. 
+---
 
+## Label aesthetics
 
-### Panning
+In the above example, labels are defined within the call to `tour_aes`, which contains all of the aesthetic mappings for the tour. The `label` aesthetic produces a tooltip which is shown whenever the mouse is hovered over the data point:
 
-```{r, echo=FALSE, out.width="25%"}
-knitr::include_graphics("images/pan_button.png")
+```{r, echo = FALSE}
+knitr::include_graphics("images/hover_tooltip.gif")
 ```
 
-The pan control also allows scrolling to zoom, and click and drag to pan.
-
-### Point selection and brushing
-
-The last three controls work together to allow for point selection and brushing.
+By default, the text in the tooltip will have the format `column_name: value`, with each specified column on a new line.
+If you want more control over what appears in the tooltip, you can use the `I()` function so that the values in the aesthetic column appear as-is.
+For example in the [2D scatter plot example](#examples), the `ID` column is specified as-is by using `tour_aes(label = I(ID))`:
 
-```{r, echo=FALSE, out.width="25%"}
-knitr::include_graphics("images/select_button.png")
+```{r, echo = FALSE}
+knitr::include_graphics("images/hover_tooltip_asis.png")
 ```
 
-The selection control above allows for box selection by clicking and dragging. Holding the `shift` key will allow for multiple selection, and points outside of the selection will be indicated by increased transparancy. There is currently a limitation where only visible points can be selected. If a point is completely obscured by other points, it will not be selected.
+When using the `I()` function for the label aesthetic, only one column can be specified at a time.
+To split text in the tooltip over multiple line, you will need to use `<br>` as the line break instead of `\n`.
 
-```{r, echo=FALSE, out.width="25%"}
-knitr::include_graphics("images/brush.png")
-```
+---
 
-The brush button will apply the current colour to the selected points.
+## Controls
 
+The following is a brief breakdown of the controls found on the left side of the visual. Note that the icon for the currently selected control will be highligted blue; otherwise it will be black. 
+When you hover over the icons in the `display_scatter()` widget, alternative text will be shown.
 
-```{r, echo=FALSE, out.width="25%"}
-knitr::include_graphics("images/colour_selector.png")
-```
+| Control | Icon| Description |
+| - | - | --- |
+| Orbit | ![](images/orbit_control_button.png) | When the `display_scatter()` widget is generated, orbit controls will be enabled by default. This allows click and drag to rotate the visual, and scrolling/pinching to zoom. Note that orbit controls for the 2D variant work best if dragging from left to right, not up and down. Also note that the icon for the currently selected control will be highligted blue; otherwise it will be black.|
+| Pan | ![](images/pan_button.png) | The pan control also allows scrolling to zoom, and click and drag to pan. |
+| Box Selection | ![](images/select_button.png) | The selection control allows for transitory box selection by brushing. Holding the `shift` key will allow for persistent selection, and points outside of the selection will be indicated by increased transparency. There is currently a limitation where only visible points can be selected. If a point is completely obscured by other points, it will not be selected. |
+| Brush | ![](images/brush.png) | The brush button will apply the current colour to the selected points. |
+| Colour Selector | ![](images/colour_selector.png) | The colour selector will look slightly different depending on the browser being used. When the colour selection is changed, the selected points will be updated immediately. |
 
-The colour selector will look slightly different depending on the browser being used. When the colour selection is changed, the selected points will be updated immediately.
 
-Putting these selection tools together, we might use them like so:
+Below is an example of using the box selection control, brush control, and colour selector together:
 
 ```{r, echo=FALSE, out.width="80%"}
 knitr::include_graphics("images/selection_example.gif")
 ```
 
+---
+
 ## Timeline controls
 
 The timeline at the bottom of the widget controls play and pause, and allows for scrubbing to a specific point in the tour. 
@@ -145,38 +147,11 @@ This funcionality is shown below:
 knitr::include_graphics("images/timeline_interaction.gif")
 ```
 
-## Label aesthetics
-
-In the above example, labels are defined within the call to `tour_aes`, which contains all of the aesthetic mappings for the tour. The `label` aesthetic produces a tooltip which is shown whenever the mouse is hovered over the data point:
-
-```{r, echo = FALSE}
-knitr::include_graphics("images/hover_tooltip.gif")
-```
-
-By default, the text in the tooltip will have the format `column_name: value`, with each specified column on a new line.
-If you want more control over what appears in the tooltip, you can use the `I()` function so that the values in the aesthetic column appear as-is.
-For example in the [2D scatter plot example](#examples), the `ID` column is specified as-is by using `tour_aes(label = I(ID))`:
-
-```{r, echo = FALSE}
-knitr::include_graphics("images/hover_label_asis.png")
-```
-
-When using the `I()` function for the label aesthetic, only one column can be specified at a time.
-To split text in the tooltip over multiple line, you will need to use `<br>` as the line break instead of `\n`.
+---
 
 ## Conclusion
 
-In this vignette we've demonstrated the interactivity of the `display_scatter` display method in the {detourr} package.
+In this vignette we've demonstrated the interactivity of the `display_scatter()` display method in the `{detourr}` package.
 If you have any issues or suggestions, please open an issue on [github](https://github.com/casperhart/detourr/issues).
 
-## Appendix
-
-### 2D Scatter Plot
-```{r, ref.label="2d-scatter", echo=TRUE, eval=FALSE}
-```
-
-### 3D Scatter Plot
-
-```{r, ref.label="3d-scatter", echo=TRUE, eval=FALSE}
-```
-
+---

vignettes/display_scatter_interactivity/references.bib

@@ -0,0 +1,29 @@
+@Manual{liminal,
+  title = {liminal: Multivariate Data Visualization with Tours and Embeddings},
+  author = {Stuart Lee},
+  year = {2021},
+  note = {R package version 0.1.2},
+  url = {https://CRAN.R-project.org/package=liminal},
+}
+
+@article{wang2018mapping,
+  title={Mapping the sensitivity of hadronic experiments to nucleon structure},
+  author={Wang, Bo-Ting and Hobbs, TJ and Doyle, Sean and Gao, Jun and Hou, Tie-Jiun and Nadolsky, Pavel M and Olness, Fredrick I},
+  journal={Physical Review D},
+  volume={98},
+  number={9},
+  pages={094030},
+  year={2018},
+  publisher={APS}
+}
+
+@article{cook2018dynamical,
+  title={Dynamical projections for the visualization of PDFSense data},
+  author={Cook, Dianne and Laa, Ursula and Valencia, German},
+  journal={The European Physical Journal C},
+  volume={78},
+  number={9},
+  pages={1--18},
+  year={2018},
+  publisher={Springer}
+}