///////////

Subhead

Using plotly.js to visualize SAS data

PhUSE EU Connect 20187 Nov 2018 / Volker Harm

Dashboard for a typical clinical laboratory data set using SAS Stored Processes

Visualizing SAS data

/// Using plotly.js to visualize SAS data /// Volker Harm2

individual measurements of a clinical laboratory parameter

Selection fields forthe treatment

the parameter

the subjects to be shown

Harm, Volker, 2017, “Interactive Visualization of Clinical Laboratory Parameters with SAS Stored Processes and jQuery AJAX”. PhUSE Conference 2017.Available online at https://www.phusewiki.org/docs/Conference%202017%20DV%20Presentations/2017%20DV06%20Presentation%20NEW.pdf.

Integrating plotly.js into a SAS Stored Process application

Motivation for using plotly.js

/// Using plotly.js to visualize SAS data /// Volker Harm3

Yes, there are no clinical laboratory parameter values, but

an interactive graphmade with plotly.js

integrated into the application on the fly

In this presentation I want to explore

what plotly.js iswhy it excels

how it works

how to deal with clinical laboratory SAS data sets

What is plotly.js?

/// Using plotly.js to visualize SAS data /// Volker Harm4

Plotly.js is

an open source JavaScript library for building interactive data visualizations

ships with 20 chart types, including 3D charts, statistical graphs, and SVG maps

built on top of d3.js and stack.gl

There are other plotly graphing libraries as

plotly.R

plotlly.py

There is no plotly.sas.

Therefore plotly.js is our choice.

Why plotly.js excels

/// Using plotly.js to visualize SAS data /// Volker Harm5

It is very easy to get started with plotly.js.

plotly.js visualizations are described by JSON (JavaScript Object Notation) objects that are clearly structured.

All the Plotly.js charts are fully customizable.

Everything from the colors and labels to grid lines and legends can be customized using a set of JSON attributes.

Each visualization has an extensive default behavior.

It makes really fun to play around with plotly.js.

It is very easy to get started with plotly.js.

How plotly.js works

/// Using plotly.js to visualize SAS data /// Volker Harm6

plotly.js visualizations are described by JSON objects that are clearly structured.

Main plotly.js objects

/// Using plotly.js to visualize SAS data /// Volker Harm7

dataThe data to be plotted is described in an array usually called data, whose elements are trace objects of various types (e.g. scatter, bar etc)

layout

The layout of the plot - non-data-related visual attributes such as the title, annotations etc - is described in an object usually called layout

configHigh-level configuration options for the plot, such as the scroll/zoom/hover behaviour, is described in an object usually called configThe difference between config and layout is that layout relates to the content of the plot, whereas config relates to the context in which the plot is being shown.

Each visualization has an extensive default behavior.

The plotly mode bar

/// Using plotly.js to visualize SAS data /// Volker Harm8

The measurements

How to deal with clinical laboratory SAS data sets

/// Using plotly.js to visualize SAS data /// Volker Harm9

Individual measurements (LBSTRESN, LBSTRESU)For each treatment (TRTP, TRTPN)

For each parameter (LBTEST, LBTESTCD)For each subject (USUBJID)

For each visit (VISIT, VISITNUM)

cp. Shostack, Jack.2014. SAS Programming in the Pharmaceutical Industry, Second Edition. Cary, NC: SAS Institute Inc

Build a dataset that contains all the information plotly.js needs and write it to an HTML file

Strategy for the laboratory data set

/// Using plotly.js to visualize SAS data /// Volker Harm10

cp. Puliyambalath, Naushad Pasha, “Interactive HTML Reporting Using D3”, 2014, MWSUG 2017 Conference Proceedings.

Available online at https://www.mwsug.org/proceedings/2014/DV/MWSUG-2014-DV09.pdf.

Two tasks for building needed data set

/// Using plotly.js to visualize SAS data /// Volker Harm11

Task 1:Visualization of laboratory data should consist of one trace per subject.

Task 2:

Using a data _null_ step also data set content can be written to a file, row by row, but the plotly.js trace objects are written in one line.

Build trace data from a group

Task 1 and 2 solved

/// Using plotly.js to visualize SAS data /// Volker Harm12

Build a group for each subject

Putting it all together

/// Using plotly.js to visualize SAS data /// Volker Harm13

The dashboard with plotly.js

/// Using plotly.js to visualize SAS data /// Volker Harm14

Hover over data points

/// Using plotly.js to visualize SAS data /// Volker Harm15

Selection of subjects using the legends

/// Using plotly.js to visualize SAS data /// Volker Harm16

Marking an area to be zoomed

/// Using plotly.js to visualize SAS data /// Volker Harm17

The zoomed area

/// Using plotly.js to visualize SAS data /// Volker Harm18

Further modification

/// Using plotly.js to visualize SAS data /// Volker Harm19

Reference linescan be implemented as shapes (another JSON object)

Subject selection has to be modifiedStrategy for graphics output in interactive systems

Study data

User metadataAs it is possible to have the graphs saved, it should be checked that necessary user metadata and time stamps are inserted.

Take home

/// Using plotly.js to visualize SAS data /// Volker Harm20

You have seen much code: Try it out! It’s really fun!

Although Plotly is much better integrated into other software packages as R, Python, or MatLab, plootly.js gives the basic means to also present SAS data in that modern professional way interactively in a web browser.

///////////

Thank you!

Bye-Bye

USING PROC JSON TO WRITE SAS DATA AS JAVASCRITP OBJECTS

/// Using plotly.js to visualize SAS data /// Volker Harm22

USING PROC STREAM TO WRITE WEB CONTENT

/// Using plotly.js to visualize SAS data /// Volker Harm23