vfinputs
provides visual filter inputs for Shiny apps. The
current version includes color legends that enable users of Shiny apps
to interactively set numeric and categorical filters. Shiny programmers
can use the values returned by the inputs to coordinate filtering across
multiple outputs, using a unified color legend rather than those
rendered by a plotting package.
# Install from CRAN
install.packages("vfinputs")
The inputs should be used as any other Shiny input, added in the UI (or created using renderUI) and accessed in the server function. At the moment, there are two numeric legends (continuous and discrete) and one categorical one. The numeric legends include a brush interaction to select a range of values. The categorical legend includes a click-to-toggle interaction, with single or multiple selections being possible.
library(vfinputs)
ui <- fluidPage(
# Using minValue, maxValue and colors
continuousColorFilter("filter", minValue = 0, maxValue = 200, colors = c("#ad2a2a", "#3f91e8")),
# Using data and colors
continuousColorFilter("filter2", data = mtcars$mpg, colors = c("#ad2a2a", "#3f91e8")),
# Using data and palette
continuousColorFilter("filter3", data = mtcars$mpg, palette = scales::viridis_pal())
# Defining the number of colors through n for a discrete selection
discreteColorFilter("filter4", minValue = 0, maxValue = 200, colors = c("#ad2a2a", "#3f91e8"), n = 5),
# Categorical legend
categoricalColorFilter("filter5", values = c("Yes", "No"), colors = c("#FF0000", "#FF00FF"))
# Single selection
categoricalColorFilter("filter5", values = c("Yes", "No"), colors = c("#FF0000", "#FF00FF"), multiple = FALSE)
)
The numeric legends return start
and end
values of the brushed
interval. The categorical legend returns a list with the selected
values.
server <- function(input, output) {
output$value <- output$selection <- renderPrint({
if (!is.null(input$filter)) {
paste0(input$filter$start, ",", input$filter$end)
}
})
}
For detailed examples of how to use the different arguments see the
visualtests
folder in this repository.
Ticks and labels
Under the hood, the axes and brushes are implemented using
D3.js. The options
argument for the numeric
scales can contain custom "format"
for the labels and "ticks"
for
deciding which/how many ticks to show. For the supported format strings,
please see https://github.com/d3/d3-format#locale_format. Ticks can be
a number or a list with custom tick values to display.
CSS
The style of the legends, including axis and brush, can easily
customized with CSS, just like any other Shiny input. The key classes to
look for are "div.continuous-color-filter"
,
"div.discrete-color-filter"
and "div.categorical-color-filter"
.
Additional elements can be found and customized using the browser
inspecting tool.
Custom axis and interaction
The key purpose of the UI functions is to connect the rendering of the
color legend with the D3-powered interaction. Thus, the package also
exports the base functions that creates the color legends ,
numericLegend()
and categoricalLegend()
, and which can be combined
with custom JavaScript code to re-implement the axes and brushes.
Add the following code to your website.
For more information on customizing the embed code, read Embedding Snippets.