What is a Draggable Line Chart?
A draggable line chart is a chart which allows users to modify their own view of the data. By dragging either the points along the line chart, or the scale itself, a user is able to adjust their view of the data accordingly. A example of this is a stock chart that allows the user to look at a graph going back several years. This would be done by adjusting a bar on the X axis to look at historical pricing.
This creates a fun experience for visualizing data. This is a rich experience that combines the powerful data visualizations generated by R – combined with the interactivity created by JavaScript packages. These visualizations may seem complicated, but the good news for you is that there are pre-built packages which can make creating these much easier.
Option 1: Using d3.js Combined with Shiny on the Backend
Draggable line charts are done in Shiny through a combination of JavaScript as well as Shiny code. The Shiny code is used to create the data visualizations, and the JavaScript is used to create the interactive elements. The JavaScript code is able to interface directly with the Shiny elements that are rendered from the Shiny server backend.
1. Create a Data Frame in R
Using the data.frame function, create a new data frame to hold the X and Y parameters which is to be used in the data visualization. The data.frame function should hold both. The X parameter has a length of lower limits to the upper limit, and length.out which is the length of the sequence.
2. Render The Chart
You can create a custom R function in order to render the draggable line chart. In order to render the chart, you can use a parent.frame function in order to render the chart in combination with a lapply function that renders the data across the frame.
A separate function is used in order to create the output for the draggable line chart. It creates a div and links the javascript with an includeScript function to link the Javascript code that is used to make the draggable line chart interactive.
3. Handle Things On The Server Side
A custom function can be used to pull data from the server, and it’s able to draw the chart. This uses a lapply function to add data points to the chart which was just rendered. This lapply function is the function which is able to add points to the graph.
4. Add Drag Behaviors From D3.JS
D3.JS library can be used to add the drag behaviors. This is done with the d3.select function that selects the chart that you created with Shiny / R. The dragging functionality is created with a d3.behavior.drag() function. This function selects each point along the draggable line chart as an attribute. The drag behavior is applied to each of the selected points using the selection.call(drag) function on the individual points.
Option 2: Using Plotly
Plotly is an R package which is able to produce very high-quality graphs. Plotly is able to create draggable charts.
If you are not comfortable in working with Javascript, you’re able to use the Plotly library in order to create draggable line charts. This package allows you to create shapes that are editable.
You would create a data frame as normal in R. However, with Plotly you would only need to use the renderPlotly() function in order to create your draggable line chart. Plotly creates each point in the graph as a single circle using a map2 variable that is nested within the renderPlotly function. This includes attributes for the size, xanchor, yanchor, xsizemode, ysizemode, fillcolor, and line.
The plot_ly function is used to add lines, layout and configuration to the end result. Furthermore, a output$summary function is used at the end to draw the model on the graph. Finally, an observe function at the very end is used in order to update the x and y values accordingly.
Option 3: Using Click-Based Events
An additional option for rendering draggable line charts in Shiny is using click-based events. Within a plotOutput() function that is built into shiny, mouse-based interaction is supported. This function looks for a click event and can return the position of the mouse. The function will then render the appropriate X or Y coordinates following the mouse click event based on what the event handler is able to detect.
Wrap-Up
Creating draggable line charts in Shiny is a great way to create an interactive user experience. However, most often this is accomplished through a combination of front-end JavaScript based code and backend Shiny code.
This is a great way to combine the powerful visualization capabilities of R with JavaScript’s ability to create interactive web interfaces. Furthermore, draggable line charts are able to bring your data to life, instead of it being presented in a static format.