Commit e15ea32d authored by Walmes Marques Zeviani's avatar Walmes Marques Zeviani
Browse files

Merge branch 'issue#14' into 'master'

Issue#14

Adiciona informações complementares ao `README.md` e reorganiza/descreve estrutura do repositório.

See merge request !15
parents c860628c ea1ba985
<img src="http://200.17.213.89/~iguir/iguir2.svg"
width=100px align="right" display="block">
Explorando Interfaces Gráficas com o R
======================================
Eduardo E. Ribeiro Jr, PET-Estatística UFPR
[Eduardo E. Ribeiro Jr](https://gitlab.c3sl.ufpr.br/u/eerj12), PET-Estatística UFPR
[Prof. Walmes M. Zeviani](http://www.leg.ufpr.br/~walmes/), LEG UFPR
O R é um programa para computação estatística e gráficos ... TODO
Projeto desenvolvido no serviço [GitLab do C3SL] (Centro de Computação
Científica e Software Livre) e mantido também como repositório da
organização [PET Estatística no GitHub]. Todas as contribuições para o
projeto são bem vindas.
- [Motivação](#motivacao)
- [Como visualizar o material](#como-visualizar-o-material)
- [Organização do repositório](#organizacao-do-repositorio)
Nesse Curso consideramos pacotes do R para produzir ... TODO
O pacote [`animation`] serve para gerar animações em diversos formatos,
como *gif* e animações em *javascript* dentro de páginas web. O [`rgl`]
permite explorar o espaço tridimensional .. O pacote [`googleVis`] faz
gráficos da galeria Google Charts a partir de objetos do R. Com os
pacotes [`rpanel`] e [`gWdigets`] é possível fazer interfaces gráficas e
até mini aplicativos baseados em Tcl/Tk ou Gtk+. Por fim, o pacote
[`shiny`] possibilita construir aplicações Web com o R baseadas em
*javascript*.
****
O que todos esses pacotes têm em comum é permitir uma visualização
dinâmica e/ou interativas. Com eles podemos produzir gráficos que exibem
uma sequência de estados - como os gifs - com os quais podemos
rotacionar - rgl - TODO
## Motivação ##
Tais recursos interativos são usados para ensino de estatística e
exibição de dados ... TODO
O R é um programa para computação estatística e gráficos muito utilizado
por estatísticos e cientistas de dados, possivelmente o mais
utilizado. Seu uso é essencialmente via _CLI (Command Line Interface)_,
com resultados textuais exibidos em um _console_ e gráficos em uma
janela do sistema operacional. Porém, utilizado desta forma, o programa
desencoraja usuários não acostumados com programação e os que tem
familiaridade ainda obtém resultados estáticos.
Os arquivos `Rmd` precisam ser compilados com `markdown::render()` ou
`markdown::run()`.
Nesse material consideramos ferramentas em R para produzir resultados de
forma interativa ou não-estática. Estes resultados se caracterizam pela
interação proporcionada ao usuário, quando o objetivo é a criação de
interfaces com _widgets_ (controladores como botões, deslizadores etc.)
e pelo dinamismo dos gráficos, quando o objetivo é apenas
visualização. Em nossas experiências o uso potencial destas ferramentas
de dá como:
As aplicações Shiny estão ativas no servidor RStudio/Shiny do LEG/PET:
<http://shiny.leg.ufpr.br/iguir/>.
* **Instrumento de ensino:** Muitos conceitos e resultados em
Estatística, são apresentados nos cursos de graduação e pós-graduação
a partir de axiomas e teoremas, porém muitos deles também podem ser
visualizados de forma gráfica o que acelera a compreensão e
assimilação do conteúdo;
****
## Organização do repositório
* **Construção de aplicativos:** A elaboração de mini-aplicativos
principalmente para coleta de dados torna o trabalho, inerente a um
experimento planejado, menos árduo no sentido de que não se é mais
necessário a transferência dos resultados do papel para o computador;
* **Exibição de relatórios:** Relatórios técnicos em Estatística ainda
tem a característica estática, geralmente os resultados obtidos são
apresentados no formato PDF. Porém com as ferramentas apresentadas
podemos exibir nossos resultados de forma _web_ interativa, onde o
leitor pode até trocar os valores que são utilizados para gerar os
resultados e ter uma visão mais ampla do trabalho.
* **Interfaces para pacotes:** Muitas bibliotecas do R, chamadas de
pacotes já utilizam os recursos gráficos para criar interfaces
interativas. No contexto de pacotes R essas interfaces objetivam
principalmente a explicação funções exibindo, interativamente, a
influências dos argumentos da função sobre os resultados.
Este repositório explora sete pacotes R, que possibilitam alguma forma
de interação com o usuário. Os pacotes abordados que se encaixam na
geração de gráficos dinâmicos são: [`animation`] que serve para gerar
animações em diversos formatos, como *gif* e animações em *javascript*
dentro de páginas web; [`rgl`] que permite explorar o espaço
tridimensional também com a possibilidade de geração de _gifs_ e páginas
_web_ com _WebGL_; [`googleVis`] proporcionando a elaboração de gráficos
da galeria Google Charts a partir de objetos do R;e [`rCharts`] pacote
ainda em desenvolvimento que possibilita criar, customizar e publicar
visualizações interativas _JavaScript_ com o R, utilizando a sintaxe
_lattice_. Para criação de interfaces com _widgets_ consideramos os
pacotes [`rpanel`] e [`gWdigets`], com eles é possível fazer interfaces
gráficas e até mini aplicativos baseados em Tcl/Tk ou Gtk+. Por fim,
nesta categoria, o pacote [`shiny`] que possibilita construir aplicações
Web com o R baseadas em *javascript* também ganha destaca no nosso
material.
## Como visualizar o material ##
Primeiramente certifique-se que todos as bibliotecas abordadas estão
instaladas no seu computador:
```r
## Verificando e instalando, se necessário, todos os pacotes abordados
## CRAN
pkg <- c("animation", "googleVis", "gWidgets", "rgl", "rpanel", "shiny")
sapply(pkg, FUN = function(x) {
if (!require(x, quietly = TRUE, character.only = TRUE))
install.packages(x, dep = TRUE, repos = repos, lib = lib)
else TRUE
})
## GITHUB
if (!require("rCharts", quietly = TRUE, character.only = TRUE))
devtools::install_git("rCharts", "ramnathv")
```
Para este projeto foram elaborados vários exemplos que podem ser
explorados a partir de seu código-fonte em R. Porém como opção de
apresentação das biliotecas exploradas, elaboramos também galerias de
exemplos, escritas em [RMarkDown]. Estas galerias devem ser compiladas
para que se possa visualizar seu resultado em formato HTML. Abaixo
temos os códigos em R para compilar e visualizar os materiais:
```r
## Lista o estado do diretório iguir2
files0 <- list.files(recursive = TRUE)
dirs0 <- list.dirs(recursive = TRUE)
TODO
## Encontra todos os arquivos RMarkdown do diretório
rmdAll <- list.files(pattern = "*.Rmd$", recursive = TRUE)
## Separa os que Rmd Shiny, que devem ser executados com run
rmdShiny <- grepl("^shiny", rmdAll)
rmdFiles <- rmdAll[!rmdShiny]
rmdShiny <- rmdAll[rmdShiny]
## Compila os arquivos Rmd e abre no navegador padrão
library(rmarkdown)
sapply(rmdFiles, FUN = function(x) {
path <- render(x, quiet = TRUE)
browseURL(path)
})
## Para as aplicações Rmd shiny deve-se compilá-las uma a uma, pois elas
## utilizam na sessão R. Certifique-se de parar o processo atual para
## executar a próxima aplicação
run(rmdShiny[1])
run(rmdShiny[2])
run(rmdShiny[3])
browserURL("http://shiny.leg.ufpr.br/iguir/") ## online
## Abrindo o pdf no visualizador padrão. Agora os links funcionam :)
file <- "./slides/slides.pdf"
switch(.Platform$OS.type,
"windows" = shell.exec(file),
"unix" = system(paste(getOption("pdfviewer"), file)))
## Limpa o diretório. Para compilar as galerias de exemplos muitos
## arquivos adicionais são criados (principalmente no animation). Veja
## os objetos *Creates.
files1 <- list.files(recursive = TRUE)
dirs1 <- list.dirs(recursive = TRUE)
filesCreates <- setdiff(files1, files0)
dirsCreates <- setdiff(dirs1, dirs0)
file.remove(filesCreates, dirsCreates)
```
Executando o cógido descrito vc terá todos os arquivos gerados e poderá
usufruir dos _links_ incluídos na apresentação PDF elaborada.
Obs.: As aplicações Shiny produzidas para este projeto estão ativas no
servidor RStudio/Shiny do LEG/PET: <http://shiny.leg.ufpr.br/iguir/>.
****
## Como citar esse material
TODO
## Organização do repositório ##
Como organização do material produzido adotamos no repositório um
diretório dedicado a cada pacote abordado. Cada repositório tem suas
particularidades devido às particularidades dos pacotes, porém, com
exceção do `shiny/`, temos uma galeria com exemplos para toda biblioteca
cujo nomeamos de `package.Rmd`, este arquivo `.Rmd` deve ser compilado
conforme procedimento descrito anteriormente. Também dedicamos um
diretório para a criação dos slides utilizados em cursos, os slides
são elaborados em LaTeX e cada pacote ganhou um arquivo para que a
elaboração pudesse ser realizada de forma paralela.
A estrutura geral dos diretórios dentro deste repositório é representada
pelo diagrama abaixo.
```
.
├── README.md ## Visão geral do projeto
├── plano.org ## Plano de trabalho adotado
├── galery.css ## Arquivo de estilo das galerias
├── animation
│   ├── animation.Rmd ## Galeria de exemplos
│   ├── anima.R ## Animações elaboradas
│   └── ...
├── googleVis
│   └── googleVis.Rmd ## Galeria de exemplos
├── gWidgets
│   ├── gWidgets.Rmd ## Galeria de exemplos
│   ├── gifs
│   │   ├── interface.gif ## Gif das interfaces elaboradas
│   │   └── ...
│   ├── interfaces.R ## Interfaces elaboradas
│   └── ...
├── rCharts
│   ├── rCharts.Rmd ## Galeria de exemplos
│   └── pajero-dakar.csv ## Dataset utilizado
├── rgl
│   ├── rgl.Rmd ## Galeria de exemplos
│   └── setup.R ## Necessário geração do arquivo com _WebGL_
├── rpanel
│   ├── rpanel.Rmd ## Galeria de exemplos
│   ├── gifs
│   │   ├── interface.gif ## Gif das interfaces elaboradas
│   │   └── ...
│   ├── interfaces.R ## Interfaces elaboradas
│   └── ...
├── shiny
│   ├── shiny-pres.Rmd ## Apresentação detalhada do pacote
│   ├── images ## Imagens utilizadas na apresentação
│   │   ├── figures.svg
│   │   └── ...
│   ├── aplicação ## Arquivos necessários para a aplicação shiny
│   │   ├── ui.R
│   │   ├── server.R
│   │   └── aux_files.[dat, Rnw, md, ...]
│   ├── insertTemplate ## Shell script para inserção do cabeçalho iguir2
│   ├── shinyApp ## Shell script para criação automática de apps
│   └── template.R ## Cabeçalho das interfaces
└── slides
├── images
│   ├── files.[png, jpg, gif]
│   └── ...
├── secoes.tex ## Seções dos slides
├── slides.tex ## Agregação das seções em arquivo único
├── slides.pdf ## Resultado da compilação dos slides
└── tikz
├── imagem.pgf ## Código da imagem em Tikz
├── imagem.pdf ## Compilação do Tikz
└── ...
49 directories, 300 files
```
<!------------------------------------------------------------------ -->
[GitLab do C3SL]: https://gitlab.c3sl.ufpr.br/pet-estatistica/iguir2
[PET Estatística no GitHub]: https://github.com/pet-estatistica/iguir2
[`animation`]: http://yihui.name/animation/
[`rgl`]: http://rgl.neoscientists.org/about.shtml
[`googleVis`]: https://cran.r-project.org/web/packages/googleVis/index.html
[`rpanel`]: https://cran.r-project.org/web/packages/rpanel/index.html
[`gWdigets`]: https://cran.r-project.org/web/packages/gWidgets/index.html
[`shiny`]: http://shiny.rstudio.com/
[`rCharts`]: http://ramnathv.github.io/rCharts/
[RMarkDown]: http://rmarkdown.rstudio.com/
......@@ -170,13 +170,16 @@ while(i<100 & dif>tol){
## Demostração do algoritmo Newton-Raphson para otimização de função
saveHTML({
for(j in 2:i){
curve(fx0, -10, 10, main=paste("passo ", j-1, ", (x = ",
round(x[j],2), ")", sep=""))
abline(h=0, lty=2)
arrows(x[j-1], fx0(x[j-1]), x[j], fx0(x[j]), length=0.1, col=3, lwd=2)
abline(v=x[j], h=fx0(x[j]), lty=3, col=2)
}
for(j in 2:i){
suppressWarnings({
curve(fx0, -10, 10, main=paste("passo ", j-1, ", (x = ",
round(x[j],2), ")", sep=""))
abline(h=0, lty=2)
arrows(x[j-1], fx0(x[j-1]), x[j], fx0(x[j]),
length=0.1, col=3, lwd=2)
abline(v=x[j], h=fx0(x[j]), lty=3, col=2)
})
}
abline(v=x[i], h=fx0(x[i]), col=2, lwd=2)
text(0, -3, label="CONVERGIU!", cex=2)
ani.pause() },
......
This diff is collapsed.
......@@ -298,6 +298,7 @@ rsconnetc::deployApp("./apps/")
* `shiny + rCharts`
* `shiny + DT`
##
### Dever de casa
* [Tutorial shiny - RStudio](http://shiny.rstudio.com/tutorial/)
- Lessons
......@@ -311,7 +312,8 @@ rsconnetc::deployApp("./apps/")
* [Lista *Shiny - Web Framework for Shiny*](https://groups.google.com/forum/#!forum/shiny-discuss)
* [Google](https://www.google.com/)
# Vamos à galeria IGUIR2
# Vamos à galeria IGUIR2 <br><br> [shiny.leg.ufpr.br/iguir]
# Obrigado!
[shiny.leg.ufpr.br/iguir]: http://shiny.leg.ufpr.br/iguir/
This diff is collapsed.
.irs-min, .irs-max {
color: rgba(0, 0, 0, 0);
background: rgba(0, 0, 0, 0) none repeat scroll 0% 0%;
font-size: 10px;
line-height: 1.333;
text-shadow: none;
top: 0px;
padding: 1px 3px;
border-radius: 3px;
}
.irs-from, .irs-to, .irs-single {
color: rgba(255, 255, 255, 0);
background: transparent none repeat scroll 0% 0%;
font-size: 11px;
line-height: 1.333;
text-shadow: none;
padding: 1px 3px;
border-radius: 3px;
}
.irs-bar-edge {
height: 3px;
top: 25px;
width: 14px;
border-width: 1px 0px 1px 1px;
border-style: solid none solid solid;
border-color: rgba(66, 139, 202, 0) -moz-use-text-color rgba(66, 139, 202, 0) rgba(66, 139, 202, 0);
-moz-border-top-colors: none;
-moz-border-right-colors: none;
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
border-image: none;
background: rgba(66, 139, 202, 0) none repeat scroll 0% 0%;
border-radius: 16px 0px 0px 16px;
}
.irs-bar {
height: 8px;
top: 25px;
border-top: 1px solid rgba(66, 139, 202, 0);
border-bottom: 1px solid rgba(66, 139, 202, 0);
background: rgba(66, 139, 202, 0) none repeat scroll 0% 0%;
}
##-------------------------------------------
## server.R
library(shiny)
## Carrega template das aplicações elaboradas pelo projeto iguiR2
source("../template.R")
gradColor <- colorRampPalette(c("red", "yellow", "green"))
server <- function(input, output) {
## Cabeçalho IGUIR2
output$header <- renderPrint({
template("TEMA")
})
##-------------------------------------------
## Paleta de cores para a escala (opcional)
output$escala <- renderPlot({
x <- seq(from = 1, to = 9, by = 0.01)
fx <- rep(1, length(x))
par(mar = c(0, 0, 0, 0))
plot(fx ~ x, type = "n",
ylim = c(-0.15, 1),
bty = "n",
axes = FALSE,
xlab = "",
ylab = "")
segments(x, rep(0, length(x)),
x, fx,
col = gradColor(length(x)),
lwd = 3)
points(input$nota, -0.15, pch = 17, cex = 2)
abline(v = input$nota)
}, bg = "transparent")
##-------------------------------------------
## Valores reativos para salvar as respostas
v <- reactiveValues(pos = 1,
da = list(
nome = vector("character", len = 30),
prod = vector("character", len = 30),
nota = vector("numeric", len = 30)))
##-------------------------------------------
## Salva as respostas
observeEvent(input$confirm, {
if(v$pos == 1) {
v$da$nome[1] <- input$avaliador
v$da$prod[1] <- input$produto
v$da$nota[1] <- input$nota
} else {
v$da$nome[v$pos] <- input$avaliador
v$da$prod[v$pos] <- input$produto
v$da$nota[v$pos] <- input$nota
}
v$pos <- v$pos + 1
})
##-------------------------------------------
## Atribui NA a nota confirmada se `input$undo`
observeEvent(input$undo, {
if(v$pos != 1) {
v$pos <- v$pos - 1
v$da$nota[v$pos] <- NA
}
})
##-------------------------------------------
## Exibe as respostas
output$resp <- renderPrint({
as.data.frame(v$da)
})
##-------------------------------------------
## Cria os botões apenas para valores válidos
output$buttons <- renderUI({
if (v$pos > 0 & v$pos < 31) {
tagList(
column(width = 6, offset = 1,
actionButton("confirm", "Confirmar Nota",
icon = icon("fa fa-check"))
),
column(width = 5,
actionButton("undo", "Desfazer",
icon = icon("fa fa-undo"))
)
)
} else {
HTML("Obrigado pelas avaliações!")
}
})
}
##-------------------------------------------
## ui.R
library(shiny)
ui <- fluidPage(
## Cabeçalho IGUIR2
htmlOutput("header"),
includeCSS("invisible_slider.css"),
sidebarLayout(
sidebarPanel(
h4("Escala de avaliação"),
hr(),
textInput("avaliador", "Seu Nome", ""),
selectInput("produto", "Produto Avaliado",
choices = paste0("arvore", 0:10)),
hr(),
plotOutput("escala", height = "50px"),
sliderInput("nota", "",
min = 1, max = 9, value = 5, step = 0.01,
ticks = FALSE),
hr(),
uiOutput("buttons"),
hr()
),
mainPanel(
verbatimTextOutput("resp")
)
)
)
......@@ -56,11 +56,11 @@ h2.iguir {
<h1 class = 'iguir'>
Interactive Graphical User Interface with R - IGUIR
</h1>
<h2 class = 'iguir'>", title, "
<h2 class = 'iguir'>", "", "
</h2>
</td>
<td class = 'iguir' align='right'>
<img src = 'http://200.17.213.89/~eduardo/images/iguir2.svg' height = '128' width = '128'> </img>
<img src = 'http://200.17.213.89/~iguir/iguir2.svg' height = '96' width = '96'> </img>
</td>
</table>", sep = "\n")
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment