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
};

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

• clickCallback
  • a callback function that runs whenever a click event occurs on a given graphical element
  • default: (datum) => {}
• hoverCallback
  • a callback function that runs whenever a mouseover event occurs on a given graphical element
  • default: (datum) => {}
• selectedGroupIDs
  • an array of group IDs that will be highlighted in the chart
  • default: []
• 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.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)
);

• clickCallback
  • a callback function that runs whenever a click event occurs on a given graphical element
  • default: (datum) => {}
• hoverCallback
  • a callback function that runs whenever a mouseover event occurs on a given graphical element
  • default: (datum) => {}
• selectedGroupIDs
  • an array of group IDs that will be highlighted in the chart
  • default: []
• 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 bars
  • 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 ]
• thresholds
  • an array of thresholds
  • default: [ { threshold: -7, flag: -2 }, { threshold: -5, flag: -1 }, { threshold: 5, flag: 1 }, { threshold: 7, flag: 2 }, ];

Sparkline (in development)

• function: rbmViz.default.sparkline

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 sparkline 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');

const sparkline = rbmViz.default.scatterPlot(
    '#canvas',
    results_summary.filter(d => d.workflowid === config.workflowid && d.groupid === '123'),
    config,
    meta_param.filter(d => d.workflowid === config.workflowid)
);

• nSnapshots
  • the number of snapshots to plot
  • default: 5
• x:
  • the name of the variable to be plotted on the x-axis
  • default: 'snapshot_date'
• y:
  • the name of the variable to be plotted on the y-axis
  • default: 'score'
• color:
  • the name of the variable with which to color the points
  • default: 'score'

Time Series (in development)

• function: rbmViz.default.timeSeries