-
Notifications
You must be signed in to change notification settings - Fork 0
Interactive graphics with ‘You Draw It’
‘You Draw It’ is a feature that allows users to interact with a chart directly by drawing a line on their computer screen with a mouse. Originally introduced by the New York Times in 2015 for the purpose of interactive reading, we aimed to adapt and demonstrate the use of the 'You Draw It' method as a tool for interactive testing of graphics.
The following publications provide further background of our prior work with this feature:
- Eye Fitting Straight Lines in the Modern Era - original validation study of the modern 'You Draw It' tool.
-
‘You Draw It’: Implementation of visually fitted trends with r2d3 (currently In Press) - provides technical details of the software
development, utilizing interactive graphics in
R.
Test out the development applet at https://emily-robinson.shinyapps.io/can-you-draw-it/.
Our initial work implementing the 'You Draw It' feature for user testing was based on the following:
- In 2015, the New York Times (NYT) introduced the 'You Draw It' interactive feature where readers input their own assumptions about various metrics of news interest and compare these assumptions to reality.
- Original code framework can found at https://github.com/BenoitFuric/you-draw-it-graph. We adapted and added functionality such as the inclusion of points, visual cues, and storage of user provided data.
Additional pacakges related to user interaction include:
- Toby Hocking incorporates interactive functionality to ggplot2 through the use of D3 in animate2. This package currently allows for interaction through clicking, but does not have the capability for users to freely draw their own lines.
The r2d3 Rpackage easily integrates D3 visuals into existing formats in R, such as shiny.
The goal of this GSOC project is to bundle the 'You Draw It' feature into an Rpackage and to add additional functionality to the tool.
An ideal contributor project will also plan to write some tests and documentation (vignette, web page, blog). Some important items from the TODO list:
- Package the 'You Draw It' tool for flexible use with any real or simulated one-to-one data sets.
- Set up axes scales automatically from the provided data.
- Add tool tips to the shiny applet for user training of the task.
We encourage contributors to share any other ideas for the improvement of 'You Draw It', as long as they can fit in the 3-month coding time frame. Some additional ideas which are not of high priority:
- Include the ability to handle more than a one-to-one function (e.g. Add a mode selection to draw confidence interval boundaries).
- Provide an option to show vertical residuals between points and the user's drawn line to demonstrate least squares regression in an educational setting.
The development and improvement of this R package will facilitate user experiments and provide an interactive tool for training purposes both within a classroom setting and for those in the workforce, making the 'You Draw It' technique available to other researchers who may not be willing to tinker with JavaScript directly.
Contributors, please contact mentors below after completing at least two of the tests below.
-
EVALUATING MENTOR: Emily Robinson [email protected] is an Assistant Professor at California Polytechnic State University - San Luis Obispo. Her recent research implemented 'You Draw It' as a graphical test to evaluate the choice of scale in data visualizations.
-
Susan VanderPlas [email protected] is an Assistant Professor at University of Nebraska - Lincoln. She studies the perception of statistical graphics and has previous GSOC participation experience with the animint package in 2012 as a student and 2013-2014 as a mentor.
-
Heike Hofmann [email protected] is a full professor at Iowa State University, an expert in computing and graphics, is the author of R packages ggpcp, x3ptools, bulletxtrctr, and numerous outhers.
Contributors, please clone https://github.com/earobinson95/you-draw-it-example and complete two or more of the following tests before contacting the mentors above.
- Easy: Design decisions were made to ease the perceptual and intuitive use of the 'You Draw It' feature. A transparent yellow box is included in the 'You Draw It' feature as a visual cue to inform users of missing inputs and a dashed user line creates the illusion of a continuous line and avoids a jagged appearance. For this test, change the color of the transparent yellow box to orange and the style of the user line to be a long-dash short-dash style.
-
Medium: Create a bare-bones R package that passes a R CMD check for CRAN which contains the provided
shiny_drawer()R function (found at the top of the Shiny server.R file) which calls the provided D3.js source code. You may find it useful to use thelitrR package to create your package. -
Hard: There is a training effect related to the completion of the 'You Draw It' task - the movement of the line must be slow so that the visual representation on the screen can accurately capture each movement. A visual cue using the yellow transparent region is meant to inform users of missing inputs, however this is not always effective. Inspect the
get_user_line_statusfunction in the D3.js source code. This status takes on values of "unstarted", "done", or "in progress". One of the issues is that if a user draws to fast, they may accidentally "jump" points and believe they have completed the task, ignoring the visual cue from the yellow box region. Devise a strategy to define this status and connect it to a shiny tooltip. Implement your strategy and add this additional functionality to the 'You Draw It' test applet.
Contributors, please post a link to your test results here.
- EXAMPLE CONTRIBUTOR 1 NAME, LINK TO GITHUB PROFILE, LINK TO TEST RESULTS.
| Contributor Name | GitHub Profile | Test Results |
|---|---|---|
| Mohit Saini | Profile Link |
GitHub Repository Deployed Link |
| Siddhi Apraj |
Profile Link LinkedIn Profile |
GitHub Repository Deployed Link |
| Dillon Murphy | Profile Link |
GitHub Repository Deployed Link |