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.

Links

• Interactive Example
• Wiki
• API
• Configuration
• Data Guidelines
• Technical Documentation