Last active
August 29, 2015 14:01
-
-
Save annoporci/df4af9d97733a41b9e3f to your computer and use it in GitHub Desktop.
shiny app with dimple plots and highcharts - problem formatting axes data and labels
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html><head> | |
| <meta http-equiv="content-type" content="text/html; charset=UTF-8"><script type="text/javascript"> | |
| $(document).ready(function(){ | |
| draw{{chartId}}() | |
| }); | |
| function draw{{chartId}}(){ | |
| var opts = {{{ opts }}}, | |
| data = {{{ data }}} | |
| var data = d3.nest() | |
| .key(function(d){ | |
| return opts.group === undefined ? 'main' : d[opts.group] | |
| }) | |
| .entries(data) | |
| nv.addGraph(function() { | |
| var chart = nv.models[opts.type]() | |
| .x(function(d) { return d[opts.x] }) | |
| .y(function(d) { return d[opts.y] }) | |
| .width(opts.width) | |
| .height(opts.height) | |
| {{{ chart }}} | |
| {{{ xAxis }}} | |
| {{{ x2Axis }}} | |
| {{{ yAxis }}} | |
| d3.select("#" + opts.id) | |
| .append('svg') | |
| .datum(data) | |
| .transition().duration(500) | |
| .call(chart); | |
| nv.utils.windowResize(chart.update); | |
| return chart; | |
| }); | |
| //add our title with html | |
| //might be better with svg | |
| d3.select("#" + opts.id).insert("h3","svg") | |
| .text(opts.title) | |
| //if desired, could change styling with css or with d3 | |
| //some examples here http://tympanus.net/codrops/2012/11/02/heading-set-styling-with-css/ | |
| //.style("float","right") | |
| //.style("text-shadow", "0 -1px 1px rgba(0,0,0,0.4)") | |
| //.style("font-size","22px") | |
| //.style("line-height", "40px") | |
| //.style("color", "#355681") | |
| //.style("ext-transform", "uppercase") | |
| //.style("border-bottom", "1px solid rgba(53,86,129, 0.3)") | |
| .style("padding-left", "4em").style("padding-bottom", "0") | |
| ; | |
| }; | |
| </script> | |
| </head><body></body></html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| # server.R | |
| library("shiny") | |
| library("plyr") | |
| library("rCharts") | |
| df <- read.csv("ps-income-shares.csv") | |
| shinyServer(function(input, output, session) { | |
| # Select Data: | |
| output$dataSelect <- renderUI({ | |
| selectInput( | |
| 'inputId' = "dataset", | |
| 'label' = "Select/Remove Fractiles:", | |
| 'choices' = levels(df$Fractile), | |
| 'selected' = levels(df$Fractile), | |
| 'multiple' = TRUE | |
| ) | |
| }) | |
| # Return Data: | |
| Data <- reactive({ | |
| if (is.null(input$dataset) || !nzchar(input$dataset)) { | |
| df <- read.csv("ps-income-shares.csv") | |
| } else { | |
| df <- read.csv("ps-income-shares.csv") | |
| df <- subset(df, Fractile == input$dataset) | |
| } | |
| # convert dates to factors | |
| df$Year <- as.factor(df$Year) | |
| return(df) | |
| }) | |
| # Dimple chart: | |
| # Fix Dates + visible height | |
| output$p1 <- renderChart({ | |
| df <- Data() | |
| p1 <- dPlot( | |
| data = df, | |
| value ~ Year, | |
| groups = c("Fractile"), | |
| type = "line", | |
| bounds = list(x = 50, y = 50, height = 300, width = 600) | |
| ) | |
| p1$set(dom = "p1") | |
| p1$xAxis(inputFormat = '%Y', outputFormat = '%Y') | |
| p1$yAxis(outputFormat = "%") | |
| p1$setTemplate(afterScript = " | |
| <script> | |
| x.timeField = 'Year' | |
| x.timePeriod = d3.time.years | |
| x.timeInterval = 10 | |
| myChart.draw() | |
| myChart.axes[0].titleShape.remove() // remove x label | |
| myChart.axes[1].titleShape.remove() // remove y label | |
| myChart.svg.append('text') // chart title | |
| .attr('x', 40) | |
| .attr('y', 20) | |
| .text('U.S. top income shares (%)') | |
| .style('text-anchor','beginning') | |
| .style('font-size', '100%') | |
| .style('font-family','sans-serif') | |
| </script> | |
| ") | |
| p1$legend(x = 670, y = 40, width = 50, height = 100, horizontalAlign = "left") | |
| return(p1) | |
| }) | |
| # Highcharts: | |
| # Fix: dates + width/height | |
| output$h1 <- renderChart({ | |
| df <- Data() | |
| h1 <- hPlot( | |
| value ~ Year, | |
| data = df, | |
| type = input$plotType, | |
| group = 'Fractile', | |
| radius = 3 | |
| ) | |
| h1$xAxis(title = list(text = "Year"), labels = list(rotation = -30, align = 'right')) | |
| h1$legend(symbolWidth = 50) | |
| h1$chart(title = "U.S. top income shares (%)") | |
| h1$set(dom = "h1") | |
| return(h1) | |
| }) | |
| # Select Plot Type: | |
| output$plotType <- renderUI({ | |
| selectInput( | |
| 'inputId' = "plotType", | |
| 'label' = "Select Plot Type:", | |
| 'choices' = c('Line Plot' = 'line', 'Scatter Plot' = 'scatter', 'Bar Chart' = 'bar', 'Column Display' = 'column'), | |
| 'selected' = 'Line' # pick first choice # not implemented yet: 'Bubble Plot' = 'bubble', 'Pie Chart' = 'pie' | |
| ) | |
| }) | |
| # nvd3: | |
| output$n1 <- renderChart({ | |
| df <- Data() | |
| n1 <- nPlot( | |
| value ~ Year, | |
| data = df, | |
| type = 'lineChart', | |
| group = 'Fractile', | |
| radius = 3 | |
| ) | |
| n1$yAxis(tickFormat = "#! function(d) {return d3.format('.0%')(d)} !#") | |
| n1$chart(margin = list(left = 80)) # show yAxis label | |
| n1$chart(margin = list(right = 80)) # show yAxis labels | |
| n1$yAxis(axisLabel = "Income Share") | |
| n1$xAxis(axisLabel = "Year") | |
| n1$xAxis(tickValues = c(1920, 1930, 1940, 1950, 1960, 1960, 1970, 1980, 1990, 2000, 2010)) | |
| n1$chart(useInteractiveGuideline = TRUE) | |
| n1$templates$script <- "chartTemplate.html" | |
| n1$set(title = "U.S. top income shares (%)") | |
| n1$set(dom = "n1") | |
| return(n1) | |
| }) | |
| # Test | |
| output$test <- renderPrint({ | |
| str(Data()) | |
| }) | |
| # Generate a summary of the dataset | |
| output$summary <- renderDataTable({ | |
| if(is.null(Data())) return() | |
| summary(Data()) | |
| }, options = list(iDisplayLength = 10) | |
| ) | |
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| # ui.R | |
| library("rCharts") | |
| shinyUI( | |
| navbarPage("Piketty & Saez Top Incomes in the U.S." | |
| , | |
| tabPanel("Dimple", | |
| sidebarLayout( | |
| sidebarPanel( | |
| uiOutput("dataSelect") | |
| ), | |
| mainPanel( | |
| showOutput("p1", "dimple") | |
| ) | |
| ) | |
| ) | |
| , | |
| tabPanel("Highchart", | |
| sidebarLayout( | |
| sidebarPanel( | |
| uiOutput("plotType") | |
| ), | |
| mainPanel( | |
| showOutput("h1", "highcharts") | |
| ) | |
| ) | |
| ) | |
| , | |
| tabPanel("NVD3", | |
| sidebarLayout( | |
| sidebarPanel( | |
| # uiOutput("plotType") | |
| ), | |
| mainPanel( | |
| showOutput("n1", "nvd3") | |
| ) | |
| ) | |
| ) | |
| , tabPanel("Summary", | |
| sidebarLayout( | |
| sidebarPanel( | |
| h4("Testing Zone (Please ignore)"), | |
| uiOutput("test") | |
| ), | |
| mainPanel( | |
| dataTableOutput("summary") | |
| ) | |
| ) | |
| ) | |
| ) | |
| ) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Reference:
http://stackoverflow.com/questions/23462320/r-interactive-plots-tooltips-rcharts-dimple-plot-formatting-axis