![[image]](https://www.kkaneko.jp/info/logo_png.png){kind=logo}
金子邦彦研究室
▶ 研究道具箱と教材
▶ オープンデータ
▶ shiny + HTML
前準備として、shiny パッケージをインストールしておくこと．
R システムで次のように操作する．
install.packages("shiny")
![[image]](../../tools/od/1730.png)
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)
})
})
<?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/")
![[image]](../../tools/od/1124.png)
![[image]](../../tools/od/1123.png)
![[image]](../../tools/od/1731.png)
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)
![[image]](../../tools/od/1732.png)
![[image]](../../tools/od/1733.png)
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>
<input type="text" name="n" value="Write Text Here!" />
![[image]](../../tools/od/1125.png)
<input type="file" name="n" />
![[image]](../../tools/od/1126.png)
<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>
![[image]](../../tools/od/1127.png)
<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>
![[image]](../../tools/od/1128.png)
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)
})
})
<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>
![[image]](../../tools/od/1129.png)