Skip to content

Examples

Spencer Childress edited this page Sep 18, 2024 · 7 revisions

Example datasets is available in the examples/data directory. Datasets include:

Bar Chart

The bar chart can be generated with the following code:

    const MetricID = 'kri0001';

    // configuration
    const config = metricMetadata.filter(
        (workflow) => workflow.MetricID === MetricID
    );
    config.y = 'Score'; // [ 'Numerator', 'Denominator', 'Metric', 'Score']

    // visualization
    const barChart = rbmViz.default.barChart(
        document.getElementById('container'), // an element in the DOM in which to render the visualization
        results.filter((result) => result.MetricID === MetricID),
        config,
        config.Thresholds.split(',').map((d) => +d),
        groupMetadata
    );

Scatter Plot

The scatter plot can be generated with the following code:

    const MetricID = 'kri0001';

    // configuration
    const config = metricMetadata.filter(
        (workflow) => workflow.MetricID === MetricID
    );

    // visualization
    const scatterPlot = rbmViz.default.scatterPlot(
        document.getElementById('container'), // an element in the DOM in which to render the visualization
        results.filter((result) => result.MetricID === MetricID),
        config,
        resultsPredicted.filter((result) => result.MetricID === MetricID),
        groupMetadata
    );

Sparkline

The sparkline can be generated with the following code:

    const MetricID = 'kri0001';
    const GroupID = '43';

    // configuration
    const config = metricMetadata.filter(
        (workflow) => workflow.MetricID === MetricID
    );
    config.y = 'Score'; // [ 'Numerator', 'Denominator', 'Metric', 'Score']

    // visualization
    const sparkline = rbmViz.default.sparkline(
        document.getElementById('container'), // an element in the DOM in which to render the visualization
        results.filter((result) => result.MetricID === MetricID && result.GroupID === GroupID),
        config
    );

Time Series

The time series can be generated with the following code:

    const MetricID = 'kri0001';

    // configuration
    const config = metricMetadata.filter(
        (metadata) => metadata.MetricID === MetricID
    );
    config.y = 'Score'; // or 'Metric'

    // visualization
    const timeSeries = rbmViz.default.timeSeries(
        document.getElementById('container'), // an element in the DOM in which to render the visualization
        results.filter((result) => result.MetricID === MetricID),
        config,
        config.Thresholds.split(',').map((d) => +d),
        null,
        groupMetadata
    );

Group Overview

The group overview can be generated with the following code:

    const GroupLevel = 'Site';

    // configuration
    const config = {
        GroupLevel,
        groupLabelKey: 'InvestigatorLastName'
    };

    // visualization
    const groupOverview = rbmViz.default.groupOverview(
        document.getElementById('container'), // an element in the DOM in which to render the visualization
        results.filter((result) => /^kri/.test(result.MetricID),
        config,
        groupMetadata,
        metricMetadata
    );

Clone this wiki locally