Overview of the youdrawitR Package

Interactive Data Visualization in R

Dillon Murphy, Cal Poly - San Luis Obispo, CA

Google Summer of Code 2023

For those unfamiliar with Google Summer of Code, it is a global program that offers students stipends to write code for open source projects, and aims to bring student developers into the open source community. If you look at the timeline displayed on this slide, it provides a snapshot of how the program is structured.

I had the privilege of developing the youdrawitR package during the Google Summer of Code 2023, under the guidance of my mentors: Emily, Susan, and Heike,

It was a great experience and I highly recommend this opportunity for students passionate about coding and open-source contributions, especially for those who might consider themselves beginner programmers or developers. It’s a great program that taught me lots of practical skills and granted me a decent amount of money.

Overview of the youdrawitR Package

  Interactive Data Visualization in R

 Engaging users with data

Alright, now let’s get into the primary focus of the presentation, the youdrawitR package.

As the name suggests, the primary feature of this package is its interactive nature. youdrawitR presents a method for users to actively engage with data. Instead of just observing static graphs, users can draw and make their own interpretations.

Take a look at the gif on the screen, you’ll see an example in action. The user begins by drawing a boundary for the confidence region and then sketches their guess for the line of best fit. After completion of the guess, the real confidence region and line of best fit is overlayed, which allows for a direct comparison. This hands-on approach encourages active participation in data analysis, and allows us to see how our intuitive perceptions align with actual data trends.

Background for Measuring Trends

• Fitting Trends by Eye – maneuvering a string, black thread, or ruler.

• New York Times ‘You Draw It’ feature (Aisch, Cox, and Quealy, 2015)
• ‘You Draw It’: Implementation of Visually Fitted Trends with r2d3
• Eye Fitting Straight Lines in the Modern Era

Motivations Behind Creating the Package

D3 is not intuitive for us R users

Add additional functionality for broader use

Getting Started with youdrawitR

Using youdrawitR

• Install: devtools::install_github("earobinson95/youdrawitR")

• Load: library(youdrawitR)

• Data generation: customDataGen() and linearDataGen()

• Visualization: drawr()

Package website:https://earobinson95.github.io/youdrawitR/

To get started, the installation process is pretty straightforward. You can install the package directly from GitHub using the devtools package. Once installed, simply load it like any other R package.

The package provides two functions for data generation and preparation: customDataGen() and linearDataGen(). For visualization, use the formatted data from these function and input them into the drawr() function, as seen in the flowchart.

If you’d like to explore more feel free to visit the package website listed here for comprehensive documentation and examples. We will also play around with the package in R later in this presentation, so I recommend keeping that website for then.

Data Generation with youdrawitR

• Using customDataGen and linearDataGen for data preparation.

# Example of using customDataGen
custom_data <- customDataGen(
  df = mtcars,
  xvar = "mpg",
  yvar = "hp",
  regression_type = "linear",
  conf_int = TRUE
)

# Example of using linearDataGen
linear_data <- linearDataGen(
  N = 20,
  slope = 1.5,
  y_int = 0,
  sigma = 2,
  x_min = 0,
  x_max = 20,
  conf_int = TRUE
)

Let’s briefly go over the functions associated with the data preparation process.

On the left, you can see the customDataGen function. This function allows you to take any existing dataset, like the cars dataset in this example and make them suitable for the drawr() function. Some of the parameter option include defining your x and y variables, specifying the type of regression, or deciding if you want to generate a 95% confidence interval.

On the right, we have the linearDataGen function. This function is designed to simulate linear data based on the parameters you provide, like the slope, y-intercept, and standard deviation. It generates the simulated data in a format suitable for the drawr() function.

Visualization with youdrawitR

Visualizing with drawr

• Renders interactive plots
• Users can draw predictions
• Customization options

# Example using previously generated custom_data
drawr(custom_data, 
      title = "Horsepower vs Miles per Gallon", 
      subtitle = "For mtcars dataset",
      x_lab = "Miles per Gallon",
      y_lab = "Horsepower",
      conf_int = TRUE)

Now we can briefly discuss the drawr function, which creates the interactive plots. This function allows users to actively engage with the generated data by drawing their predictions and is equipped with several customization features.

Take a look at the sample code presented. We’re visualizing the data we generate in the previous slide with the customDataGen function.

I encourage anyone who is following along on their own device to try playing around with the output on their computer. If you find any latency with the rendering of the output, which seems to be an issue with quarto slides, a quick page refresh should fix the issue.

One feature worth highlighting is the New Line button. This button allows the user to add suplementary lines to their plot which can be used in a variety of ways, for instance drawing the upper and lower bounds of a 95% confidence interval like the gif in the beginning. For this example, we can see that a confidence interval has been generated with the parameter conf_int = TRUE.

In the next slide we will go over a few more example of using the drawr and customDataGen functions with different customizations and regressions.

More Examples:

Logistic Regression

• Code
• Plot

# Generating data with logistic regression
# For this example, we'll need a binary response variable. 
# Let's create a binary variable based on horsepower.
mtcars$high_hp <- ifelse(mtcars$hp > 120, 1, 0)

logistic_data <- customDataGen(
  df = mtcars,
  xvar = "mpg",
  yvar = "high_hp",
  regression_type = "logistic"
)

drawr(logistic_data, 
      title = "Probability High Horsepower vs MPG (Logistic)", 
      subtitle = "For mtcars dataset",
      x_lab = "Miles per Gallon",
      y_lab = "High Horsepower (1 = Yes, 0 = No)")

Here is our first additional example, we’re using a logistic regression. Logistic regression is great for when you have a binary response variable. For our purpose, we’ve created a binary variable high_hp which signifies whether a car has high horsepower based on a threshold of 120.

In the code, we prepare this data using the customDataGen function and then visualize it with drawr. What’s showcased here is the probability of a car having high horsepower versus its miles per gallon.

Now let’s look at the plot. Drawing a logistic regression may prove to be less intuitive than a normal linear regression, and I again encourage to try for yourself.

More Examples:

Polynomial Regression & Customized Plot

• Code
• Plot

# Generating data with polynomial regression of degree 2
poly_data <- customDataGen(
  df = mtcars,
  xvar = "mpg",
  yvar = "hp",
  regression_type = "polynomial",
  degree = 2
)

# Customized drawr output
drawr(poly_data, 
      title = "Horsepower vs Miles per Gallon (Polynomial)", 
      subtitle = "For mtcars dataset",
      x_lab = "Miles per Gallon",
      y_lab = "Horsepower",
      drawn_line_color = "red",
      true_line_color = "rgba(0,255,0,.8)",
      draw_region_color = "#FFFFFF",
      show_tooltip = TRUE,
      aspect_ratio = 1.5)

Now, for the next example we will be using a polynomial regression. Specifically, we’re looking at a polynomial of degree 2. Polynomial regressions allow us to capture more intricate relationships that aren’t strictly linear, and can also be a little harder to predict compared to linear regression.

In our code, we utilize the customDataGen function for data prep, specifying the regression type as “polynomial” and degree as 2.

Additionally, look at the code for the drawr function. This time, we’ve also added a bit more flair to our plot with customized colors and display settings.

Taking a look at the plot you can see the progress region has been removed, a tooltip is now shown, the drawn line is now red,the plot is now wider, and the true line is now green. Such customizations can aid in data interpretation or simply make your visualization more engaging.

More Examples:

Loess Regression

• Code
• Plot

# Generating data with loess regression
loess_data <- customDataGen(
  df = mtcars,
  xvar = "mpg",
  yvar = "hp",
  regression_type = "loess",
  span = 0.75
)

drawr(loess_data, 
      title = "Horsepower vs Miles per Gallon (Loess)", 
      subtitle = "For mtcars dataset",
      x_lab = "Miles per Gallon",
      y_lab = "Horsepower")

Our last example includes the final regression type currently offered in the youdrawitR package, loess regression. Loess regression is great for capturing local patterns in data.

In our code, we generate the data using the customDataGen function and define the regression type as “loess”. We’ve also chosen a span parameter which dictates the degree of smoothing.

The resulting drawr visualization presents horsepower against miles per gallon. Lets take a look at the plot and try for ourselves. As Emily has described it to me before, drawing loess regression is like giving a child a crayon and asking them to draw a line between the points on a graph.

Your Turn 1: Using drawr

https://earobinson95.github.io/youdrawitR/articles/customDataGen.html

1. Install and load youdrawitR

2. Generate data using the customDataGen function and your favorite R data set

3. Pass your generated data into the drawr function to create your interactive graphic

4. Using the documentation help(drawr) make changes to your graphic such as: changing colors, hiding the true line, or adjusting the start of the drawn line (Hint: look at the example in documentation).

Embedding youdrawitR into HTML

• Quarto

# Render with quarto/Rmarkdown  
## For quarto: use quarto >= 1.3.450 or knitr <1.43
drawr(linear_data)

• Direct Save as HTML

# Save into an html
drawr(linear_data, 
      save_html_file_path = "myViz.html")

## Embedded HTML below

An advantage of using youdrawitR is the ease with which you can embed and share the interactive outputs.

On the left, you’ll see the integration using either Quarto or RMarkdown. Simply create your plot using the drawr function and then render it within your document. Just a heads-up for compatibility: If you’re using Quarto, ensure you’re using the latest version.

On the right, provided is a straightforward method to save your visualization directly as an HTML file. This comes in handy if you’re looking to quickly archive your visualization or share it as a standalone file. With the drawr function, just specify your desired file path, and it will handle the rest for you. Specifying just the name of the file will save it to your current working directory. Once saved, this visualization can be opened and interacted with in any standard web browser.

Using youdrawitR with Shiny

‘Can You Draw It?’ Shiny App

• Real time interaction with plot:
  • Change data sources: Input, Simulate, or Use R Dataset
  • Drawing, saving users drawn lines, and resetting functionalities
  • Customization: Color changes, tooltips, confidence intervals.
• Access:
  • Open in Browser or run locally

shiny::runApp(system.file("shinyapp/youdrawit", package = "youdrawitR"))

Now, let me introduce the ‘Can You Draw It?’ Shiny App, which is integrated within the youdrawitR package and provides an easy way to use all of the packages features. This app provides real-time interaction with youdrawitR plots.

There are multiple ways to access the app. If you’re looking to check it out on your browser, simply click on the ‘Open in Browser’ link. If you have the youdrawitR package installed, you can run it locally using the R command provided. The shiny app is also embedded into the next slide, so you can use it by following along on the presentation as we continue. I will go over all of the buttons, features, and customization options on the next slide using the embedded shiny app and I encourage you all to use it alongside me and provide any suggestions you may have for improvements.

Try For Yourself

Alright, so here is the Can You Draw It Shiny App. As you can see we load in with some randomly generated data. If you would like to generate more random data you can click here on the button with the dice icon.

If you would like to input data manually that isn’t random you can click on the Change Data button up here, and either input, simulate, or use an R dataset. I’ll use an R dataset since it’s an easy one to showcase…

There are also tons of customization options, here I can show the tooltip. Also can change the colors of the graph. In the next slide we will be having a drawing a cat competition so changing the color of the drawn line may come in handy then.

You can add new lines using this button just like in R.

The data is captured upon completion of the line, and then you can save it using the save data button or copy data button. The new lines will be shown in the order that they were drawn.

Your Turn 2: Drawing Cat Competition

Add your cat to the slide deck at https://docs.google.com/presentation/d/1prNX34FKP45x9FkRH_f35ejHhDUAdrfRHWAjY_hacQU/edit?usp=sharing

Integrating Into Shiny

• Displaying Visualizations

# ui 
r2d3::d3Output("shinydrawr", height = "500px", width = "800px")

# server
output$shinydrawr <- r2d3::renderD3({ drawr(data, hide_buttons = T )})

• Retrieving Drawn Data

# Drawn data is sent to shiny from the 
# js file upon completion of the original line.

# Fetch the original line data
jsonlite::fromJSON(input$completedLineData)

# Fetch any additional lines drawn
jsonlite::fromJSON(input$newLineData)

• Adding Button Functionality

# Send message to js file
session$sendCustomMessage("resetAction", "true")
session$sendCustomMessage("newLine", "true")

Now, let’s quickly dicuss how to integrate youdrawitR into your own shiny app’s and then in the next slide we will try making a very basic shiny app using the package for ourselves.

To display the interactive visualizations in a Shiny application, there are just a few steps. In the user interface, the function r2d3::d3Output creates a placeholder for our interactive plot and then on the server side, we use r2d3::renderD3 to generate and render the interactive plot using our drawr function and whatever user provided data we have. Here, the hide_buttons parameter ensures a cleaner user experience by removing additional buttons from the visualization. These buttons can be recreated as shiny buttons in the shiny app with the sendCustomMessage function which gives the application a consistent and cleaner look, however hiding and recreating the buttons is optional.

Lastly, an important feature of the youdrawitR package is the ability to save the user drawn data for future use. In R it can be simply downloaded with the download data button at any point, but in Shiny the data is sent to Shiny upon completion of the line, where it can then be captured and saved.

Your Turn 3: Create a Shiny App

1. File > New File > Shiny Web App (multiple files)
2. Copy the ui.R and server.R code from the next two slides
3. Add your generated data and interactive plot from Your Turn 1
4. Print out the user original line

Now you all can try to make your own basic shiny app using youdrawit interactive plots. If you are unfimiliar with shiny just click on file, new file, shiny web app. Personally, I like multiple files for ui and server but that is up to you. In the next 2 slides, I made a small template to create a basic shiny app with your generated data from earlier.

Your Turn 3: ui.R

library(shiny)

# Define UI
fluidPage(
  # Application title
  titlePanel("My drawr plot"),
      mainPanel(
        # Show the interactive plot of the generated data
        r2d3::d3Output("shinydrawr"),
        
        fluidRow(
          column(
            width = 4,
            # Add the reset button
            actionButton("resetBtn", "Reset")
          ),
          column(
            width = 4,
            # Add the checkbox for confidence interval
            checkboxInput("confInterval", "Show Confidence Interval", value = TRUE)
          ),
          column(
            width = 4,
            # Show the user data
            tableOutput("user_data")
          )
        )
      )
)

Your Turn 3: server.R

library(shiny)
library(youdrawitR)

function(input, output, session) {
  custom_data <- reactive({
    customDataGen(
      # Paste your previously written code for data generation here!
      conf_int = input$confInterval
    )
  })
  
  observeEvent(input$completedLineData, {
    # This block will be executed whenever completedLineData is updated from the JS side
    output$user_data <- renderTable({
      jsonlite::fromJSON(input$completedLineData)
    })
  })
  
  observeEvent(input$resetBtn, {
    session$sendCustomMessage("resetAction", "true")
  })

  output$shinydrawr <- r2d3::renderD3({ drawr(custom_data(), 
                                              hide_buttons = T, 
                                              conf_int = input$confInterval) })
}

Importance & Uses of youdrawitR

Potential Applications

• Engaging educational tool.
• Personal data visualization projects.
• Encouraging active participation in data interpretation.
• Testing graphics for perception.

Future Directions for youdrawitR

• Continuous development.
• Potential enhancements based on feedback.
• Expansion of features and functionalities.