shiny + HTML

前準備

前準備として、shiny パッケージをインストールしておくこと．

R システムで次のように操作する．

install.packages("shiny")

Shiny を使ってみる

/tmp/server.r のサンプル

renderPrint と renderTable を使ってみる．

require(data.table)
require(shiny)

# Define server logic for random distribution application
shinyServer(function(input, output) {
  output$summary <- renderPrint({
    paste("<strong>n =", input$n, "</strong>")
  })
  output$table <- renderTable({
    data.table(iris) 
  })
})

/tmp/www/index.html のサンプル

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>

        <meta http-equiv="Content-Type" content="text/html; initial-scale=1.0; charset=UTF-8" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="MSThemeCompatible" content="yes" />

        <link rel="stylesheet" type="text/css" href="shared/shiny.css"/> 

        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery.ui.all.css" />
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js/"></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script> 
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script>
        <script src="shared/jquery.js" type="text/javascript"></script>
        <script src="shared/shiny.js" type="text/javascript"></script>
        <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

        <title>
            JavaScript Sample
        </title>
    
    </head>
 
<body>
  <h1>HTML UI</h1>
 
  <p>
    <input type="number" name="n" value="500" min="1" max="1000" />
  </p>
 
  <div id="summary" class="shiny-html-output"></div> 

  <div id="table" class="shiny-html-output"></div> 
 </body>

</html>

実行してみる
R システムで次のように操作する．
library(shiny) runApp("/tmp/")
Web ブラウザで表示してみる

drawing graph

d3Network を使い tree や graph を HTML や SVG に描画 install.packages("d3Network") https://christophergandrud.github.io/d3Network/#forceDirect に記載 library(d3Network) Source <- c("A", "A", "A", "A", "B", "B", "C", "C", "D") Target <- c("B", "C", "D", "J", "E", "F", "G", "H", "I") NetworkData <- data.frame(Source, Target) # Create graph d3SimpleNetwork(file="hoge.html", NetworkData, height = 300, width = 700, fontsize = 15) library(shiny) shinyUI(fluidPage( # Load D3.js tags$head( tags$script(src = 'http://d3js.org/d3.v3.min.js') ), # Application title titlePanel('d3Network Shiny Example'), p('This is an example of using', a(href = 'https://christophergandrud.github.io/d3Network/', 'd3Network'), 'with', a(href = 'http://shiny.rstudio.com/', 'Shiny', 'web apps.') ), # Sidebar with a slider input for node opacity sidebarLayout( sidebarPanel( sliderInput('slider', label = 'Choose node opacity', min = 0, max = 1, step = 0.01, value = 0.5 ) ), # Show network graph mainPanel( htmlOutput('networkPlot') ) ) )) And the server.R: # Load packages library(RCurl) library(d3Network) # Load data once URL <- "https://raw.githubusercontent.com/christophergandrud/d3Network/master/JSONdata/miserables.json" MisJson <- getURL(URL, ssl.verifypeer = FALSE) # Convert JSON arrays into data frames MisLinks <- JSONtoDF(jsonStr = MisJson, array = "links") MisNodes <- JSONtoDF(jsonStr = MisJson, array = "nodes") # Create individual ID MisNodes$ID <- 1:nrow(MisNodes) #### Shiny #### shinyServer(function(input, output) { output$networkPlot <- renderPrint({ d3ForceNetwork(Nodes = MisNodes, Links = MisLinks, Source = "source", Target = "target", Value = "value", NodeID = "name", Group = "group", width = 400, height = 500, opacity = input$slider, standAlone = FALSE, parentElement = '#networkPlot') }) })

フォームの種類

/tmp/www/index.html の次の部分を書き換えて実行してみる

  <p>
  <form>
    <input type="number" name="n" value="500" min="1" max="1000" />
  </form>
  </p>

1行テキスト

    <input type="text" name="n" value="Write Text Here!" />

ファイル
<input type="file" name="n" />

チェックボックス

    <input type="checkbox" name="n" value="red">red</input>
    <input type="checkbox" name="n" value="green">green</input>
    <input type="checkbox" name="n" value="blue">blue</input>

ラジオボタン

    <input type="radio" name="n" value="L">L</input>
    <input type="radio" name="n" value="M">M</input>
    <input type="radio" name="n" value="S">S</input>

jQuery との連携

フォーム部品にフォーカスされたとき色付け

/tmp/server.r のサンプル

require(data.table)
require(shiny)

# Define server logic for random distribution application
shinyServer(function(input, output) {
  output$summary <- renderPrint({
    paste("<strong>x =", input$x, "</strong>", 
          "<strong>y =", input$y, "</strong>")
  })
  output$table <- renderTable({
    data.table(iris) 
  })
})

www/index.html の一部分

<script type="text/javascript">
      <!-- 
	   jQuery( function(){
  $("input").css("background-color","#efefef")
  $("input").focus(function(){
     $(this).css("background-color","#eff8f8")
  });
  $("input").blur(function(){
     $(this).css("background-color","#efefef")
  });
});
	   //-->  
</script>

</head>

<body>
  <h1>HTML UI</h1>


    <from>
  <p>
    x = 
    <input type="text" name="x" value="100"/>
  </p>
  <p>
    y = 
    <input type="text" name="y" value="A"/>
  </p>
    </form> 

 
  <div id="summary" class="shiny-html-output"></div> 
  <div id="table" class="shiny-html-output"></div> 
 </body>

実行結果の例

参考Webページ

https://shiny.rstudio.com/tutorial