Safety Shift Plot is a JavaScript library, built using Webcharts (1, 2), that allows users to compare lab and vital sign values between two time points. A typical chart created with Saftey Shift Plot looks like the above chart when it is first loaded. It also features a self updating data listing below the chart that shows meta data about the selected points as pictured below.
The chart uses the AdAM data standards by default, but can be customized to use any data set that is one record per measurement. Full details about chart configuration are here.
Users can:
- See the shift plot to compare lab and vital sign values between two time points
- See the number and percentage of participants displayed in the current view (updates with each user interaction)
- Change the measure of interest, and see an updated chart
- Change the baseline visit(s) of interest, and see an updated chart
- Change the comparison visit(s) of interest, and see an updated chart
- Click and drag across data points to show a linked listing of the underlying data
- Filter the shift plot for selected criteria, and see an updated chart (optional)
In the simplest case, using a dataset matching all default requirements, the chart can be created with a single line of code.
safetyShiftPlot('body', {}).init(data);The code to load a comma-delimited data set and initialize the customized chart, with filters and simple data mappings, looks like this:
const settings = {
time_col: 'VISIT'
start_value: 'Potassium'
x_params: {visits: ['Screening'], stat: 'min'}
y_params: {visits: ['End of Study'], stat: 'max'}
filters:[
{value_col: 'SITEID', label: 'Site ID'},
{value_col: 'SEX', label: 'Sex'},
{value_col: 'RACE', label: 'Race'}
]
};
d3.csv(
'../data/ADBDS.csv',
function(data) {
safetyShiftPlot('body', settings).init(data);
}
);