dimple & shiny

dimpleshiny

library(shiny)
library(dplyr)
library(rcdimple)
library(htmltools)

## INTERACTIVE APP 

ex_data <- read.delim(
  "http://pmsi-alignalytics.github.io/dimple/data/example_data.tsv"
)
#eliminate . to avoid confusion in javascript
colnames(ex_data) <- gsub("[.]","", colnames(ex_data))


server <- shinyServer(function(input, output) {
  
  output$distPlot <- renderDimple({
  
    
    dimple(
#      input$ChoiceA~UnitSales,  #cannot get input working
      OperatingProfit~UnitSales,
      groups = c("SKU","Channel"),
      data = ex_data,
      type = "bubble"
    ) %>%
      xAxis( type = "addMeasureAxis" ) %>%
      yAxis( type = "addMeasureAxis" ) %>%
      add_legend()
    
    
  })

  
}
)


ui <- shinyUI(fixedPage(
  
  titlePanel("title-title"),
  
  fixedRow(
    column(width = 2,  
           
           selectInput("ChoiceA", "ChoiceA:", choices = c("OP"="OperatingProfit",  
                                                     "GP"="GrossProfit", 
                                                     "P"="Price"), selected="OperatingProfit")
    ),        
    
    column(width = 10,      
           
           mainPanel(
             dimpleOutput("distPlot", height = 700, width = 700)
           )
    )
  )
  
  
  
)
)


shinyApp(ui = ui, server = server)

Thanks - the above code is great. Another question - Is it possible to adjust font size of the titles of axes ?

Here's some updated code:

library(shiny)
library(dplyr)
library(rcdimple)
library(htmltools)

## INTERACTIVE APP 

ex_data <- read.delim(
  "http://pmsi-alignalytics.github.io/dimple/data/example_data.tsv"
)

colnames(ex_data) <- gsub("[.]","", colnames(ex_data))#eliminate . to avoid confusion in javascript



server <- shinyServer(function(input, output) {

  output$distPlot <- renderDimple({

    #groupvars <- input$checkGroup

    dimple(
      y = input$ChoiceA,
      x = "UnitSales",
      groups = input$checkGroup,
      data = ex_data,
      type = "bubble"
    ) %>%
      xAxis( type = "addMeasureAxis"
             , fontSize = "120%"
             , fontFamily = "monospace") %>%
      yAxis( type = "addMeasureAxis" 
             , fontSize = "120%"
             , fontFamily = "monospace") %>%
      add_legend()


  })


}
)


ui <- shinyUI(fixedPage(

  titlePanel("title-title"),

  fixedRow(
    column(width = 2,  

           selectInput("ChoiceA", "ChoiceA:", choices = c("OP"="OperatingProfit",  
                                                          "GP"="GrossProfit", 
                                                          "P"="Price"), selected="OperatingProfit")

           ,

           checkboxGroupInput("checkGroup", label = h3("Include Group"), 
                              choices = list("1. SKU" = "SKU", "2. Channel" = "Channel", "3. Brand" = "Brand"),
                              selected = c("SKU", "Channel"))



    ),        

    column(width = 10,      

           mainPanel(
             dimpleOutput("distPlot", height = 700, width = 900)
           )
    )
  )



)
)


shinyApp(ui = ui, server = server)

I've tried variations of adding html in to the xAxis parameter:

e.g. html ="<b style = 'font-size:130%;'></b>" but I'm obviously off-target.

This was my other attempt:

ui <- shinyUI(fixedPage(


  tags$head(
    tags$style(HTML("
                    axis-label {
                    font-size: 20px;
                    }
                    "))),
...

I also tried other variations on axis-label in case I wasn't referring accurately, but not getting it

Looking into this further, this is very strange, since the font-size is being applied to the title, but has a different effect. I'm guessing my ignorance of the finer points of CSS is to blame. For now, to fix, you can do something like this.

library(shiny)
library(dplyr)
library(rcdimple)
library(htmltools)

## INTERACTIVE APP 

ex_data <- read.delim(
  "http://pmsi-alignalytics.github.io/dimple/data/example_data.tsv"
)

colnames(ex_data) <- gsub("[.]","", colnames(ex_data))#eliminate . to avoid confusion in javascript



server <- shinyServer(function(input, output) {

  output$distPlot <- renderDimple({

    #groupvars <- input$checkGroup

    d1 <- dimple(
      y = input$ChoiceA,
      x = "UnitSales",
      groups = input$checkGroup,
      data = ex_data,
      type = "bubble"
    ) %>%
      xAxis( type = "addMeasureAxis"
             , fontSize = "120%"
             , fontFamily = "monospace") %>%
      yAxis( type = "addMeasureAxis" 
             , fontSize = "120%"
             , fontFamily = "monospace") %>%
      add_legend()

    d1$x$options$tasks <- list(htmlwidgets::JS(
'
function(){
  d3.select(this).selectAll(".dimple-axis.dimple-title")
    .style("font-size","200%")
}
'
    ))

    d1
  })


}
)


ui <- shinyUI(fixedPage(

  titlePanel("title-title"),

  fixedRow(
    column(width = 2,  

           selectInput("ChoiceA", "ChoiceA:", choices = c("OP"="OperatingProfit",  
                                                          "GP"="GrossProfit", 
                                                          "P"="Price"), selected="OperatingProfit")

           ,

           checkboxGroupInput("checkGroup", label = h3("Include Group"), 
                              choices = list("1. SKU" = "SKU", "2. Channel" = "Channel", "3. Brand" = "Brand"),
                              selected = c("SKU", "Channel"))



    ),        

    column(width = 10,      

           mainPanel(
             dimpleOutput("distPlot", height = 700, width = 900)
           )
    )
  )



)
)


shinyApp(ui = ui, server = server)

Alternately, if you want to use tags$head, you can style with the CSS selector .dimple-axis.dimple-title.