API

rbmViz

library namespace

Scatter Plot

• function: rbmViz.default.scatterPlot

Parameters

1. {(Node|string)} _element_ canvas node or a unique HTML id
2. {Array} _data_ results for a single KRI; see KRI results data specification
3. {Object} _config_ KRI metadata and chart configuration; see KRI metadata specification
4. {Array} _bounds_ threshold bounds for a single KRI; see KRI bounds data specification

Configuration

Configuration of the scatter plot is generally data-driven by meta_workflow. The workflow metadata object is also the configuration object for the chart. Customize the chart by modifying the configuration object:

// Filter array of workflows to KRI0001.
const config = meta_workflow
    .find(meta => meta.workflow === 'kri0001');

config.selectedGroupIDs = ['123']; // specify the selected group ID
config.hoverCallback = (datum) => {
    console.table(datum)
    // do something with chart element's data
};
config.clickCallback = (datum) => {
    console.table(datum)
    // do something with chart element's data
};
config.maintainAspectRatio = false; // fit chart to parent

const scatterPlot = rbmViz.default.scatterPlot(
    '#canvas',
    results_summary
        .filter(d => d.workflowid === config.workflowid),
    config,
    results_bounds
        .filter(d => d.workflowid === config.workflowid)
);

• selectedGroupIDs
  • an array of group IDs that will be highlighted in the chart
  • default: []
• hoverCallback
  • a callback function that runs whenever a mouseover event occurs on a given graphical element
  • default: (datum) => {}
• clickCallback
  • a callback function that runs whenever a click event occurs on a given graphical element
  • default: (datum) => {}
• maintAspectRatio
  • a boolean that controls whether the chart fits its parent (true) or maintains its aspect ratio (false)
  • default: false
• x
  • the name of the variable to be plotted on the x-axis
  • default: 'denominator'
• xLabel
  • a short description of the x-axis variable
  • default: meta_workflow[ config.x ]
• y
  • the name of the variable to be plotted on the y-axis
  • default: 'numerator'
• yLabel
  • a short description of the y-axis variable
  • default: meta_workflow[ config.y ]
• color
  • the name of the variable by which to color the points
  • default: 'flag'
• colors
  • an array of hex values
  • default: ['#52C41A', '#FADB14', '#FF4D4F']

Bar Chart

• function: rbmViz.default.barChart

Parameters

1. {(Node|string)} _element_ canvas node or a unique HTML id
2. {Array} _data_ results for a single KRI; see KRI results data specification
3. {Object} _config_ KRI metadata and chart configuration; see KRI metadata specification
4. {Array} thresholds KRI threshold parameters; see KRI parameters data specification

Configuration

Configuration of the scatter plot is generally data-driven by meta_workflow. The workflow metadata object is also the configuration object for the chart. Customize the chart by modifying the configuration object:

// Filter array of workflows to KRI0001.
const config = meta_workflow
    .find(meta => meta.workflow === 'kri0001');

config.selectedGroupIDs = ['123']; // specify the selected group ID
config.hoverCallback = (datum) => {
    console.table(datum)
    // do something with chart element's data
};
config.clickCallback = (datum) => {
    console.table(datum)
    // do something with chart element's data
};
config.maintainAspectRatio = false; // fit chart to parent
config.y = 'metric'; // plot KRI value instead of score

const barChart = rbmViz.default.barChart(
    '#canvas',
    results_summary
        .filter(d =>
            d.workflowid === config.workflowid
        ),
    config,
    meta_param
        .filter(d =>
            d.workflowid === config.workflowid &&
            d.param === 'vThreshold'
        )
);

• selectedGroupIDs
  • an array of group IDs that will be highlighted in the chart
  • default: []
• hoverCallback
  • a callback function that runs whenever a mouseover event occurs on a given graphical element
  • default: (datum) => {}
• clickCallback
  • a callback function that runs whenever a click event occurs on a given graphical element
  • default: (datum) => {}
• maintAspectRatio
  • a boolean that controls whether the chart fits its parent (true) or maintains its aspect ratio (false)
  • default: false
• x
  • the name of the variable to be plotted on the x-axis
  • default: 'groupid'
• xLabel
  • a short description of the x-axis variable
  • default: meta_workflow[ config.x ]
• y
  • the name of the variable to be plotted on the y-axis
  • default: 'score'
• yLabel
  • a short description of the y-axis variable
  • default: meta_workflow[ config.y ]
• color
  • the name of the variable by which to color the points
  • default: 'flag'
• colorLabel
  • a short description of the color variable
  • default: ''
• n
  • the name of the variable that captures the number of participants in each group
  • default: 'n'
• nLabel
  • a short description of the n variable
  • default: meta_workflow[ config.n ]
• num
  • the variable name of the numerator in the KRI calculation
  • default: 'numerator'
• numeratorLabel
  • a short description of the numerator variable
  • default: meta_workflow[ config.num ]
• denom
  • the variable name of the denominator in the KRI calculation
  • default: 'denominator'
• denominatorLabel
  • a short description of the denominator variable
  • default: meta_workflow[ config.denom ]
• threshold
  • an array of thresholds
  • default: [ { threshold: -10, flag: -2 }, { threshold: -5, flag: -1 }, { threshold: 5, flag: 1 }, { threshold: 10, flag: 2 }, ];

Time Series (in development)

• function: rbmViz.default.timeSeries

Sparkline (in development)

• function: rbmViz.default.sparkline