Safety Histogram is a JavaScript library built with Webcharts (1, 2) that creates an interactive histogram plotting the distribution of lab measures, vital signs, and other measures related to safety in clinical trials. A typical chart created with safety-histogram looks like this:
By default the chart expects SDTM-structured data, but can be configured for any dataset with one record per measurement. View full chart configuration details here.
Users can view a histogram of each measure in the data, update the x-axis limits, toggle display of the normal range, and click the chart to view the raw data. View full chart functionality here.
In the simplest case, the chart can be created with a single line of code provided the input dataset meets the default requirements:
safetyHistogram().init(data);Alternatively, the chart can be configured for a different data standard, such as for ADaM in the example below:
const element = 'body'; // element in which to draw the chart
const settings = {
measure_col: 'PARAM',
value_col: 'AVAL',
id_col: 'USUBJID',
normal_col_low: 'ANRLO',
normal_col_high: 'ANRHI',
filters: [
{value_col: 'SEX' , label: 'Sex'},
{value_col: 'RACE' , label: 'Race'},
{value_col: 'ARM' , label: 'Arm'},
{value_col: 'AVISIT' , label: 'Visit'},
{value_col: 'SITE' , label: 'Site'},
],
}; // custom chart settings
d3.csv(
'https://raw.githubusercontent.com/RhoInc/data-library/master/data/clinical-trials/adam/advs.csv', // data file location
function(data) {
safetyHistogram(element, settings).init(data);
} // callback function in which the chart is created
);Click here to open an interactive example.