query-overview
v2.1.3
Published
Interactive bar chart for exploration of query data from clinical trials
Downloads
3
Keywords
Readme
Query Overview
Overview
Query Overview is a JavaScript library built using Webcharts (1, 2) that creates an interactive bar chart showing the distribution of queries that have been issued regarding data collected in a clinical trial. A typical chart created with query-overview looks like the chart pictured above.
Clicking on a bar outputs a listing of the queries themselves:
Users can group, rearrange, and sort the bars and filter the data; the full functionality is described here. The library expects a dataset with site, visit, form, field, query status, and query age columns. The full data specification is tabulated here; Users can specify additional columns by which to group and filter the data. Full details about chart configuration are here.
Typical Usage
Provided the input data matches the default column names the library expects, the code to initialize the chart looks like this:
const element = 'body';
const settings = {};
d3.csv(
'queries.csv',
function(data) {
queryOverview(element, settings).init(data);
}
);
The chart can be configured to facilitate non-standard data formats and to alter the chart itself. Overwrite the defaults with a custom settings object like so:
const element = 'body';
const settings = {
site_col: 'SITEID',
id_col: 'USUBJID',
visit_col: 'AVISIT',
form_col: 'FORM',
field_col: 'FIELD',
marking_group_col: 'MARKGRP',
status_col: 'STATUS',
age_col: 'ADURN',
age_cutoffs: [
7,
14,
21,
28
],
};
d3.csv(
'ADQUERY.csv',
function(data) {
queryOverview(element, settings).init(data);
}
);
Click here to open an interactive example of query-overview.