r - div - tags$style shiny

Deslizador brillante en escala logarítmica

Question

Estoy usando Shiny para crear una aplicación web simple con un slider que controla qué valores de p deben mostrarse en la salida.

¿Cómo puedo hacer que el control deslizante actúe en una escala logarítmica, en lugar de lineal?

En el momento tengo:

sliderInput("pvalue",
"PValue:",
min = 0,
max = 1e-2,
value = c(0, 1e-2)
),

¡Gracias!

Answer 1

En este momento no tengo brillo, he extendido un poco el rango, ¿qué pasará si intentas algo como esto?

sliderInput("pvalue",
"PValue:",
min = 1e-02,
max = 1e+02,
value = -10^seq(-2, 2)
),

su publicación se menciona 1e-2, he usado 1e-02, verifiqué como a continuación

> 1e-2==1e-02
[1] TRUE

Answer 2

La razón por la que la pregunta no ha recibido más atención es que es difícil de responder. Para hacer lo que quiere el autor de la pregunta, debe escribir javascript e inyectarlo en la página web. A continuación se muestra el código que adapté para formatear correctamente un control deslizante shiny como fechas. No he intentado modificarlo por logarítmico porque solo aprendí suficiente javascript para jugar con este único script, y luego lo borré de la memoria para dejar espacio para cosas más importantes como el menú de cerveza de temporada en la barra de la manzana.

Anyhoo:

 output$selectUI <-
renderUI(
list(sliderInput(inputId = "target", label = "Date",
min = 0, max = diff_months(targetEnd(),targetStart()) - 1,
value = diff_months(targetEnd(),targetStart()) - 1,
animate = animationOptions( loop = T)),
singleton(HTML(
''
<script type="text/javascript">
$(document).ready(function() {
var monthNames = [ "Jan.", "Feb.", "Mar.", "Apr.", "May", "June",
"July", "Aug.", "Sept.", "Oct.", "Nov.", "Dec." ];
var endDate = new Date('',
year(Sys.Date()),'','', month(Sys.Date())
,'', 1);
var slider = $("#dates").slider();
var labels = slider.domNode.find(".jslider-label span");
labels.eq(0).text("Jan., 1962");
labels.eq(1).text([monthNames[endDate.getUTCMonth() +1], endDate.getUTCFullYear()].join(", "));
// override the default "nice" function.
slider.nice = function(value) {
alert("hi")
var ref_date = new Date(1962, 1, 1);
var slider_date = new Date(ref_date.setMonth(ref_date.getMonth() + value));
return [monthNames[slider_date.getUTCMonth()], slider_date.getUTCFullYear()].join(", ");
}
$(slider).trigger("slidechange");
})
$(document).ready(function() {
var monthNames = [ "Jan.", "Feb.", "Mar.", "Apr.", "May", "June",
"July", "Aug.", "Sept.", "Oct.", "Nov.", "Dec." ];
var slider = $("#target").slider();
var labels = slider.domNode.find(".jslider-label span");
labels.eq(0).text([monthNames['', month(targetStart()) +1, ''],'', year(targetStart()), ''].join(", "));
labels.eq(1).text([monthNames['', month(targetEnd()) + 1, ''], '', year(targetEnd()), ''].join(", "));
// override the default "nice" function.
slider.nice = function(value) {
alert("hi")
var ref_date = new Date('', year(targetStart()), '', '', month(targetStart()),'',1 );
// each slider step is 4 weeks, translating to 24 * 3600 * 1000 milliseconds
var slider_date = new Date(ref_date.setMonth(ref_date.getMonth() + value - 1));
return [monthNames[slider_date.getUTCMonth()],
slider_date.getUTCFullYear()].join(", ");
}
$(slider).trigger("slidechange");
})
</script>
'')
)
)
)

Answer 3

No estaba seguro de lo que quería como salida, pero lo que hice fue que los posibles valores de p fueran [0, 0.00001, 0.0001, 0.001, 0.01]. Si quieres algo un poco diferente, espero que esta respuesta sea un buen punto de partida.

Básicamente, primero creé una matriz que contiene los valores de los números (0, 0.0000.1, ...), y luego solo uso la función de actualización especial de la API del control deslizante para hacer que estos valores se adhieran al control deslizante. Es bastante simple una vez que descubres cómo usar la API del control deslizante. Además, por alguna razón, ejecutar esto dentro de RStudio parece extraño, pero en un navegador está bien. Además, tenga en cuenta que tengo un retraso de 5 ms porque quiero asegurarme de que esto se ejecute después de que se inicialice el control deslizante. No es la solución más limpia, probablemente hay una mejor manera de hacerlo, pero funciona.

library(shiny)
JScode <-
"$(function() {
setTimeout(function(){
var vals = [0];
var powStart = 5;
var powStop = 2;
for (i = powStart; i >= powStop; i--) {
var val = Math.pow(10, -i);
val = parseFloat(val.toFixed(8));
vals.push(val);
}
$(''#pvalue'').data(''ionRangeSlider'').update({''values'':vals})
}, 5)})"
runApp(shinyApp(
ui = fluidPage(
tags$head(tags$script(HTML(JScode))),
sliderInput("pvalue",
"PValue:",
min = 0,
max = 1e-2,
value = c(0, 1e-2)
)
),
server = function(input, output, session) {
}
))

Answer 4

No estoy seguro de que este hilo aún esté activo, pero en caso de que quiera agregar una forma más genérica de "registrar" un inputSlider utilizando el atributo de función de prettify del ionRangeSlider en lugar de sobrescribir los valores con la ventaja de que puede definir el mínimo, máximo, El valor de paso y predeterminado de inputSlider como de costumbre y luego todo lo que sucede en el lado de Javascript es un cambio de los valores mostrados (dos opciones presentadas, una para salida numérica, una para notación científica):

library(shiny)
# logifySlider javascript function
JS.logify <-
"
// function to logify a sliderInput
function logifySlider (sliderId, sci = false) {
if (sci) {
// scientific style
$(''#''+sliderId).data(''ionRangeSlider'').update({
''prettify'': function (num) { return (''10<sup>''+num+''</sup>''); }
})
} else {
// regular number style
$(''#''+sliderId).data(''ionRangeSlider'').update({
''prettify'': function (num) { return (Math.pow(10, num)); }
})
}
}"
# call logifySlider for each relevant sliderInput
JS.onload <-
"
// execute upon document loading
$(document).ready(function() {
// wait a few ms to allow other scripts to execute
setTimeout(function() {
// include call for each slider
logifySlider(''log_slider'', sci = false)
logifySlider(''log_slider2'', sci = true)
}, 5)})
"
ui <- fluidPage(
tags$head(tags$script(HTML(JS.logify))),
tags$head(tags$script(HTML(JS.onload))),
sliderInput("log_slider", "Log Slider (numbers):",
min = -5, max = 3, value = -4, step = 1),
sliderInput("log_slider2", "Log Slider (sci. notation):",
min = -5, max = 3, value = 1, step = 0.5),
br(),
textOutput("readout1"),
textOutput("readout2")
)
server <- function(input, output, session) {
output$readout1 <- reactive({
paste0("Selected value (numbers): ", input$log_slider, " = ", 10^input$log_slider)
})
output$readout2 <- reactive({
paste0("Selected value (sci. notation): ", input$log_slider2, " = ", 10^input$log_slider2)
})
}
shinyApp(ui, server)

Answer 5

ACTUALIZACIÓN (mayo de 2018):

Esto ahora es posible a través del shinyWidgets::sliderTextInput() . Puede especificar pasos personalizados (por ejemplo, intervalos logarítmicos), y el control deslizante sigue estos pasos. El inconveniente es que necesita especificar cada paso, en lugar de un máximo y un mínimo, y hacer que el control deslizante calcule los pasos, pero funciona bien para este tipo de aplicación.

Pequeño ejemplo:

library(shiny)
ui <- fluidPage(
shinyWidgets::sliderTextInput("pvalue2","PValue:",
choices=c(0, 0.0001, 0.001, 0.01),
selected=0, grid = T)
)
server <- function(input, output) {}
shinyApp(ui, server)