1. Open the App

Paste the following code into RStudio:

#Code to initialize shiny application
devtools::install_github("ASA-DIA-InteractiveSafetyGraphics/safetyGraphics") 
library("safetyGraphics") 
safetyGraphicsApp()

2. Load Data

Use the “Browse..” button on the data upload section of the data tab to load a non-standard data set. We’ll use the .csv saved here, but the process is similar for other data sets. Notice that once the data is loaded, the app will detect whether the data matches one of those pre-loaded standards, and a note is added to indicate whether a match is found. Our sample data is a partial match for the SDTM standard. Once you select the newly loaded data set, the app should look like the screen capture below. Note the red x’s in the toolbar indicating that user customization is needed.

3. Select Columns

Next, click the “Settings” tab (with the red x) in the nav bar at the top of the page. The page should look something like this:

Behind the scenes, a validation process is run to check if the selected settings match up with the selected data set to create a valid chart. Green (for valid) and red (for invalid) status messages are shown after each label in the settings tab - you can hover the mouse over the status to get more details.

As you can see, we’ve got several invalid settings with red status messages. To make a long story short, we now need to go through and update each invalid setting and turn its status message in to a green “ok”. Once all of the individual settings are valid, the red Xs in the toolbar will turn to green checks, and the chart will be created. Let’s hover over the first red error message to see the detailed description of the failed check:

As you might’ve guessed from the empty select box, the check failed because no value is specified for the setting. Choosing the measure column is simple. Click the select box to see pre-populated options corresponding to the columns in the data.

Now select LBTEST for Measure Column and LBDY for the Study Day Column option. Your setting page should look something like this:

Now we need to fill in the 4 inputs beneath Measure Column. You may have noticed that there were no options available for these inputs when the page loaded. This is because these options are field level data that depend on the Measure Column option. Once you selected a Measure Column, the options for these inputs were populated using the unique values found in that data column. To fill them in, just type the first few letters of lab in the text box. For example, type “Alan” for the Alanine Aminotransferase value input and select the correct option.

Repeat the process for the other 3 “value” inputs and viola, the red x changes to a green check, and our chart is ready.

4. View Chart

Now that we’ve got the data mapping complete, just click the Chart tab in the header to see the navigation bar at the top of the page.

The chart has lots of useful interactive features built in, but we’ll cover those in a separate vignette.

5. Export Chart

To export the chart, click the “Export Chart” button in the upper right hand corner of the page. Your chart, saved as an .html file, will be downloaded to your machine.

Open the downloaded file in a new tab in your browser and you’ll see two tabs. The “Chart” tab, will be identical to the chart shown above, with all of your customizations intact. The “Info” tab, shown below, has a brief description of the safetyGraphics package and source code that you can use to recreate the chart in R.

The html file contains all of the data and code for the chart and is easy to share. Just send the file to the person you’re sharing with, and tell them to open it in their web browser (just double-click the file) - they don’t even need R.

1. Open the App

Just paste this code in to RStudio:

#Code to initialize shiny application
devtools::install_github("ASA-DIA-InteractiveSafetyGraphics/safetyGraphics") 
library("safetyGraphics") 
safetyGraphicsApp()

We’ll use the pre-loaded example data for this case study, so there is no need to load your own data file.

2. Add Filters and Groups

The SafetyGraphics eDish chart offers native support for data-driven groups and filtering. Any data column can be used to add filter and grouping controls to the chart. One common use case is to add grouping by treatment arm and filtering by site, race and sex. All of this can be done with just a few clicks. As you might have guessed, you just update the “Filter columns” and “Group columns” inputs as shown:

Click the charts tab to see the following chart (with orange boxes added around the newly created filters and groups for emphasis):

A word of warning - both grouping and filtering works best using categorical variables with a relatively small number of groups (less than 10 or so). With that said, there is no official limit on the number of unique values to include in a group or filter, so if you followed the example above but chose “AGE” (with over a dozen unique integer values) instead of “AGEGR1” (with 3 categorical levels), you might not love the functionality in the chart. Fortunately, it’s easy to go back and update the chart to use the categorized variable instead - just go back to the settings tab and update the corresponding setting.

3. Flag Rows of Special Interest

You can also use the settings page to identify important values in the data. For the eDish chart, you can flag baseline values (using the “Baseline column” and “Baseline values” inputs) and values included in the analysis population (using “Analysis Flag column” and “Analysis Flag values” inputs). In both cases, you need to choose the “column” first, and then choose 1 or more corresponding “values”. Here are some suggested settings using our sample data:

In the eDish chart, adding a baseline flag enables the users to view a baseline-adjusted version of the chart. Click the chart tab, and then change the “Display Type” control to “Baseline Adjusted (mDish)”.

We’re following ADaM conventions and using “flag” columns ending in “FL” and “Y” values for the configuration here, but any column/value combination is allowed. For example, you could use study day 0 to define baseline by setting baseline column to “ADY” and baseline value to “0”.

Summary

This case study shows how to add some basic customizations to your eDish chart with a few clicks in the shiny application. Note that not all customizations are available in the shiny app. You can access more granular settings using the htmlwidget that creates the chart (e.g. see ?eDISH) or even by looking at the documentation for the underlying safety-eDish github repo javascript library.