Shiny Application on rdata.lu Blog | Data science with R

BIKE SERVICES API + SHINY = NICE APP

Tue, 20 Feb 2018 00:00:00 +0000

Hi everyone,

In this blog post, I will be short and I will introduce our shiny application on bike self-service stations.

Your browser does not support the video tag.

The code is in 2 parts, the ui.R file for the interface and the server.R file for the backend. You can check the code on GitHub if you want to download the code and run it on your computer.

JCDecaux provides an API that gives us real time information on each bike self-service station. This infomation is:
•Station id
•Station name
•Address
•Position latitude/longitude
•Presence of a payment terminal
•Presence of a bonus station
•If the station is open
•How many bike stands are in the station
•how many bike stands are available in the station (no bikes on the stand)
•How many bikes are available
•Time of the last api update

The JCDecaux API gives the data under the following format:

{
  "number": 123,
  "contract_name" : "Paris",
  "name": "stations name",
  "address": "address of the station",
  "position": {
    "lat": 48.862993,
    "lng": 2.344294
  },
  "banking": true,
  "bonus": false,
  "status": "OPEN",
  "bike_stands": 20,
  "available_bike_stands": 15,
  "available_bikes": 5,
  "last_update": <timestamp>
}

Hence, our shiny application gets real time information on bike stations in 27 cities.

We also used the modern open-source library leaflet to display city map (open street map).

This application works better on computer than on smartphone because shiny is not fully smartphone friendly. However, Shiny has a user-friendly interface.

If you want to try your own Shiny app, I advice you to check this gallery. It contains a lot of examples that will serve as a good introduction.

Don’t hesitate to follow us on twitter @rdata_lu and to subscribe to our youtube channel.
You can also contact us if you have any comments or suggestions. See you for the next post!

Launching your shiny app in 2 clicks

Tue, 26 Dec 2017 00:00:00 +0000

Hello everyone,

Why we always want to take the red pill when we can take the blue one? That’s the question!
In this post I will explain how to launch a shiny application from a shortcut. Just like that:

It’s fast and useful if you work with colleagues that don’t have a clue about R and just want to use your shiny app.

If you are on macOS:

Open a text editor and write the following lines :

 Rscript '&FullPath/&file.R' &
 open http://127.0.0.1:&PortNumber/;

& allows you to write more command lines even if the shell is still busy with the previous line. The second line opens your web browser with the chosen address. A concrete example gives this:

Rscript '/Users/user/Desktop/Clef_USB/data_science/fret_dashboard.R' &
open http://127.0.0.1:7990/;

On the second line, 7990 refers to the chosen port in your shiny app. If you didn’t choose one, add the following to your shinyApp: options = list(port= 7990), just like that:
shinyApp(ui=ui,server=server, options = list(port=7990))

If you use a .Rmd document, you should write this:

 Rscript -e  "rmarkdown::run('&FullPath/&file.Rmd', shiny_args = list(port=&PortNumber))" &
 open http://127.0.0.1:&PortNumber/&file.Rmd;

Replace &FullPath, &file and &PortNumber by the file path, the file name and the chosen port.

Then save it with the “.command” extension and try to launch your shiny application from the shortcut. If you have a message saying that the file could not be executed because you do not have appropriate access privileges, open your terminal and write the following line:

chmod u+x &FullPath/&file.command

Then it should work :)
We are almost done, now we have to add another shortcut icon to make it look more friendly. For that, go on google and download free .icns icons. I have download some icons on easyicon. To change the icon you just need to go in “get info” and drag your new icon to the previous one, just like below:

If you are on Windows:

Open a text editor and write the following lines:

start "" "&FullPath1\Rscript.exe" &FullPath2\&file.R  /k
start "Name" "http://127.0.0.1:&PortNumber/"

/k allows you to write something in the command prompt even if the Prompt is busy with the previous line. A concrete example gives that :

start "" "C:\Program Files\R\R-3.3.3\bin\Rscript.exe" C:\Users\CGP462\Documents\Shiny_app\iris.R  /k
start "iris" "http://127.0.0.1:7924/"

Then you can save your file with a .bat extension.
Be carefull, if you want to launch a .Rmd you should use this code instead :

start "&FullPath1\R.exe" -e "Sys.setenv(RSTUDIO_PANDOC='C:/Program Files/RStudio/bin/pandoc'); rmarkdown::run('&FullPath2/&file.Rmd', shiny_args = list(port =&PortNumber, launch.browser = FALSE))" /k
start "&file" "http://127.0.0.1:7924/&file.Rmd"

if it doesn’t work, check your pandoc location.

It’s almost done. Now we have to change the icon. First you have to download an icon with the .ico extension. Then you have to act in 4 steps :
1. Right click on your file and go in Properties.
2. Choose the Shortcut tab.
3. Then go in Change Icon….
4. In Browse, select the icon you want to see instead.

And now it’s done!

Don’t hesitate to follow us on twitter @rdata_lu and to subscribe to our youtube channel.
You can also contact us if you have any comments or suggestions. See you for the next post!

Communication between R and d3js

Sat, 16 Sep 2017 00:00:00 +0000

Hello everyone,

In this post we will focus on how to send a message from R to javascript. More precisely, we will focus on the basic keywords and knowledge to integrate a d3.js graph into shiny, just like here. If you have any issue to make shiny and javascript communicate after reading this post, I suggest you to go back to this simple shiny app from Rstudio.

First of all, create a folder where you will put your data file (.csv, .txt, etc..) and your app.R (or ui.R and server.R). In this folder, you will create a new folder that you will name “www”. Put your .css and .js file inside the www folder.

To make R and d3.js communicate, you will have to put some keywords in the server part, the ui part and the .js file.

In the server.R file, write which data you want to send to javascript in an observe({ }) function. Just like below:

function(input, output, session) {
    observe({
        dataSendToJs = "Hello World"
        session$sendCustomMessage(type = 'nameOfTheMessage',dataSendToJs)
    })
}

session$sendCustomMessage( ) allows you to send your data from shiny to javascript.

In the ui.R file, source the javascript document with a tag function.

fluidPage(
  titlePanel("Example"),
  fluidRow(
  #Shiny way to integrate html code in the web page
  tags$head(tags$script(src = "message.js"))
  )
)

Your .js file has to begin with Shiny.addCustomMessageHandler("nameOfTheMessage", function(message) { like in the following example. Don’t forget that the message represents data from R that javascript will read so it’s better to transform the data to json data. You can do it in R via the function jsonlite::toJSON().

Shiny.addCustomMessageHandler("nameOfTheMessage",
                                      function(message) {
                                              alert(JSON.stringify(message));
                                      });

Now it should work! You can find the whole process in this repository. We started with something simple but you can do more complex things by applyng the same logic.

Be careful, if you’re working locally, you have to make some changes: First, you need to have a webserver. I use web server for chrome. If you choose to use the same web server, it’s very simple.

First, in “CHOOSE FOLDER”, you have to choose the www folder that you made previously, then a web server url will appear. Click on it, then a new web page with the different files from www should pop-up.

In ui.R (or the ui part of your single-file shiny app), source d3.min.js and all .css and .js files as follow:

#http://127.0.0.1:8887 represents the web server URL
tags$head(tags$script(src = "http://127.0.0.1:8887/d3.min.js"))

The following video may help you if you have issues to make your application run locally:

Now it should work :)

You can see a complete and reproducible example over here.

Don’t hesitate to follow us on twitter @rdata_lu and to subscribe to our youtube channel.
You can also contact us if you have any comments or suggestions. See you for the next post!