guided tour of each animint

[tdhock]

https://driverjs.com/

[tdhock]

for a geom like

geom_point(
  help="Each point shows life expectancy, fertility rate, and population, for a given country",
  showSelected="year",
  clickSelects="country"
)

tour info should show

Each point shows life expectancy, fertility rate, and population, for a given country.
Data are shown for the current selection of: year.
Click to change selection of: country.

and

    geom_vline(
      help="Vertical lines show selected prediction for the currently selected problem",
      showSelected=c(selector="mid.thresh", "profile.chrom"),
      clickSelects="model.name")

should show

Vertical lines show selected prediction for the currently selected problem.
Data are shown for the current selection of: selector=mid.thresh, profile.chrom.
Click to change selection of: model.name.

and

    animint2::geom_tallrect(
      help="Each rectangle highlights an interval of thresholds with the same error rate", 
      showSelected="model.name",
      clickSelects=c(selector="mid.thresh"),

should make

Each rectangle highlights an interval of thresholds with the same error rate.
Data are shown for the current selection of: model.name.
Click to change selection of: selector=mid.thresh.

from https://tdhock.github.io/2024-08-bic-learned-details/

[biplab-sutradhar]

@tdhock is this way to do
https://github.com/user-attachments/assets/3eee7be9-80a8-434f-9ba4-9ab6ea38ba1c
here

if I am wrong please help to understand

[tdhock]

I don't understand your screenshot.
Please use backticks

```r 
code
```

etc instead of screenshots.
this issue is about adding a "help" parameter for each geom, which is text that could be shown interactively using DriverJS.
If you have a question, can you please use a question mark?
When you don't use a question mark, it is difficult for me to understand what you want answered.

[biplab-sutradhar]

 <span class="fu"><a href="geom_point.html">geom_point</a></span><span class="op">(</span><span class="fu"><a href="aes.html">aes</a></span><span class="op">(</span></span></span>
<span class="r-in"><span>      <span class="va">fertility.rate</span>, <span class="va">life.expectancy</span>,</span></span>
<span class="r-in"><span>      key<span class="op">=</span><span class="va">country</span>, colour<span class="op">=</span><span class="va">region</span>, size<span class="op">=</span><span class="va">population</span><span class="op">)</span>,</span></span>
<span class="r-in"><span>      showSelected<span class="op">=</span><span class="st">"year"</span>,</span></span>
<span class="r-in"><span>      clickSelects<span class="op">=</span><span class="st">"country"</span>,</span></span>
<span class="r-in"><span>      data<span class="op">=</span><span class="va">WorldBank</span><span class="op">)</span><span class="op">+</span></span></span>
<span class="r-in"><span> 

Would driver.js implement in the above code to create a guided tour on a web ?

[tdhock]

please put backticks by themselves on their own lines, and the code in between:

```r 
code
```

above is ok, below is not

``` some
code ```

[tdhock]

Would driver.js implement in the above code to create a guided tour on a web ?

I don't understand the HTML code you shared. Can you explain where it comes from? And why it is relevant to your question?

The idea of this issue is to use driver.js to show the text of the "help" parameter for each geom, along with interactive parameters.

[biplab-sutradhar]

@tdhock if I create a visualization using animint should I use driverjs to implement the tour in this way?

gif.mp4

[tdhock]

I saw two driverjs boxes, one for each plot.
that looks like a good first try. how did you do that?
the idea would be to do one of those for each geom with showSelected/clickSelects or help parameter.

[biplab-sutradhar]

I saw two driverjs boxes, one for each plot. that looks like a good first try. how did you do that? the idea would be to do one of those for each geom with showSelected/clickSelects or help parameter.

after generating visualization with geom_vline, geom_point when index.html generated then manually implemented driverjs, by the way are you trying to implement something like that shows data when we toggle over element?

[tdhock]

by the way are you trying to implement something like that shows data when we toggle over element?

I don't understand. can you clarify?

the idea for this issue is to show the driverjs boxes when the user clicks a help/tour button

[biplab-sutradhar]

ggplot(data, aes(x = life_expectancy, y = fertility_rate)) +
animint2::geom_point(
aes(size = population, color = country),
help = "Each point represents life expectancy and fertility rate for a given country.",
showSelected = "year",
clickSelects = "country"
)

If I create a visualization with this code, how can I extract those properties like help, showSelceted.. dynamically? I am not getting it and how the size and color are being extracted

I thought I could create a function with driverjs using the id plot_pointPlot, plot_vlinePlot which is in <svg id="plot_pointPlot" height="400" width="400">. However the id was present in the browser but not in the animint.js file

[tdhock]

the showSelected/clickSelects is in plot.json, which is written by R code inside of animint2dir() function. https://github.com/animint/animint2/blob/master/R/z_animint.R#L653
I'm not sure if help will be in JSON or if you need to edit the R code for it to be exported.

[tdhock]

you can add the help/tour button at the bottom next to the other widgets, https://github.com/animint/animint2/blob/master/inst/htmljs/animint.js#L2054

[biplab-sutradhar]

@tdhock

here the tour is happening dynamically and those are the code which I have added

var element = d3.select("body");

  function startTour() {
    const driver = window.driver.js.driver;

    const driverObj = driver({
      showProgress: true,
      steps: steps
    });

    driverObj.drive();
  }

  
   
  element.append("button")
  .text("Start Tour")
   
  .on("click", function() {
    startTour();
  });

var geom = g_info.geom;
    var id = "plot_" + geom + "Plot";
  
    var helpText = g_info.params.help || '';
    var showSelected = g_info.params.showSelected || '';
    var clickSelects = g_info.params.clickSelects || '';
  
    steps.push({
      element: "#" + id,
      popover: {
        title: geom.charAt(0).toUpperCase() + geom.slice(1),
        description: `${helpText} Data are shown for the current selection of: ${showSelected}. Click to change selection of: ${clickSelects}.`
      }
    });

[tdhock]

that looks like a good start, thanks! can you please submit a pr?

also for including code in github comments/markdown you tried

``` some
code ```

above does not work. (code on same line as ``` backticks)

please use below instead (first backticks ``` followed by language name, 
js in this case, and then newline with no code on same line)

```js
some
javascript
code
```