Shiny to HTML and JavaScript

shiny
1

Hi.

I was using Shiny, ggplot and plotly to visualize my data, which will be called graphics.

Now, I have a new task, but I am not very clear about the meaning or content of the task.

List of Graphics that can be transformed to pure java script

:money_mouth_face::money_mouth_face::money_mouth_face:

How does Shiny work? Or how does Shiny convert the code into HTML and JavaScript?

My idea behind this question is: I need to refactor all graphics done by plotly into Javascript. I would like to reuse all the graphics!

Best regards,
Song

2

As far as how shiny code is translated to HTML, all of the shiny ui functions output HTML. For example, if you type shiny::selectInput("test", label = "test label", choices = c(1, 2, 3)) into your console, you will get this output:

<div class="form-group shiny-input-container">
  <label class="control-label" for="test">test label</label>
  <div>
    <select id="test"><option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option></select>
    <script type="application/json" data-for="test" data-nonempty="">{}</script>
  </div>
</div>

So if you want to create a specific element from a shiny ui function, I would recommend running the code to generate that element in your console and then using the HTML code it generates.

As for turning your graphics into javascript, I would recommend looking at the plotly.js javascript library. The plotly package in R is just an API for the javascript library. So you should be able to create a lot of your visualizations there.

As for just taking the code to generate them from shiny, that may be a little more difficult. If you run an app that is using ggplotly and plotly to generate a graphic and then look through the pages elements in your browser's developer's tools (F12 for google chrome), you will see that an svg is created so it is not javascript that is creating the graphic in the browser but rather the R session on the server that is generating an svg image of the graphic that allows for interaction.

3

Hey Tbradley.

Thank you so much for the second help. It is really helpful, and now I get the concept.

I owe you a beer if you come to Berlin. I buy you one.

Best regards,
Song