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:

const workflowID = 'kri0001';

// scatter plot point data
const results = results_summary.filter(
    result => result.workflowid === workflowID
);

// scatter plot configuration
const config = meta_workflow.find(
    metadata => metadata.workflowid === workflowID
);
config.xType = 'linear';

// scatter plot bounds data
const bounds = results_bounds.filter(
    bound => bound.workflowid === workflowID
);

const scatterPlot = rbmViz.default.scatterPlot(
    '#canvas',
    results,
    config,
    bounds
);

• 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: []
• maintainAspectRatio
  • 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'
• xType
  • the type of the variable to be plotted on the x-axis
  • default: 'logarithmic'
• xLabel
  • a short description of the x-axis variable
  • default: config[ config.x ]
• y
  • the name of the variable to be plotted on the y-axis
  • default: 'numerator'
• yType
  • the type of the variable to be plotted on the y-axis
  • default: 'linear'
• yLabel
  • a short description of the y-axis variable
  • default: config[ config.y ]
• color
  • the name of the variable by which to color the points
  • default: 'flag'

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 bar chart 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:

const workflowID = 'kri0001';

// bar chart bar data
const results = results_summary.filter(
    result => result.workflowid === workflowID
);

// bar chart configuration
const config = meta_workflow.find(
    metadata => metadata.workflowid === workflowID
);
config.y = 'score';

// KRI threshold parameters
const thresholds = meta_param.filter(
    parameter => parameter.workflowid === workflowID
);

const barChart = rbmViz.default.barChart(
    '#canvas',
    results,
    config,
    thresholds
);

• 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: []
• maintainAspectRatio
  • 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: config[ 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: config[ 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: ''
• thresholds
  • an array of thresholds (applies only when y-variable is KRI score)
  • default: [ { threshold: -7, flag: -2 }, { threshold: -5, flag: -1 }, { threshold: 5, flag: 1 }, { threshold: 7, flag: 2 }, ];

Sparkline

• 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 all sparklines except for that of flag counts by group. Customize the chart by modifying the configuration object:

Sparkline of KRI Score

const workflowID = 'kri0001';
const groupID = '123';

// sparkline point/line data
const results = results_summary.filter(result =>
    result.workflowid === workflowID &&
    result.groupid === groupID
);

// sparkline configuration
const config = meta_workflow.find(
    metadata => metadata.workflowid === workflowID
);
config.y = 'score'; // default

const sparkline = rbmViz.default.sparkline(
    '#canvas',
    data,
    config
);

Sparkline of KRI Metric

const workflowID = 'kri0001';
const groupID = '123';

// sparkline point/line data
const results = results_summary.filter(result =>
    result.workflowid === workflowID &&
    result.groupid === groupID
);

// sparkline configuration
const config = meta_workflow.find(
    metadata => metadata.workflowid === workflowID
);
config.y = 'metric';

const sparkline = rbmViz.default.sparkline(
    '#canvas',
    data,
    config
);

Sparkline of Number of Flagged Sites by KRI

const workflowID = 'kri0001';

// sparkline point/line data
const flagCounts = flag_counts_by_kri.filter(count =>
    count.workflowid === workflowID
);

// sparkline configuration
const config = meta_workflow.find(
    metadata => metadata.workflowid === workflowID
);
config.y = 'n_flagged';

const sparkline = rbmViz.default.sparkline(
    '#canvas',
    data,
    config
);

Sparkline of Number of Flagged KRIs by Group

const groupID = '123';

// sparkline point/line data
const flagCounts = flag_counts_by_group.filter(count =>
    count.groupid === groupID
);

// sparkline configuration
const config = {
    y: 'n_flagged',
};

const sparkline = rbmViz.default.sparkline(
    '#canvas',
    data,
    config
);

• 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'
• nSnapshots
  • the number of snapshots to plot
  • default: 5

Time Series (in development)

• function: rbmViz.default.timeSeries

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 time series 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:

const workflowID = 'kri0001';

// time series data
const results = results_summary_over_time.filter(
    result => result.workflowid === workflowID
);

// time series configuration
const config = meta_workflow.find(
    metadata => metadata.workflowid === workflowID
);
config.y = 'score';

// KRI threshold parameters
const thresholds = meta_param.filter(
    parameter => parameter.workflowid === workflowID
);

const timeSeries = rbmViz.default.timeSeries(
    '#canvas',
    results,
    config,
    thresholds
);

Time Series of Number of Flagged Sites

// time series point/line data
const flagCounts = flag_counts_by_kri

// time series configuration
const config = {
    y: 'n_flagged',
};

const timeSeries = rbmViz.default.timeSeries(
    '#canvas',
    data,
    config
);

Time Series of Number of Flagged KRIs

// time series point/line data
const flagCounts = flag_counts_by_group;

// time series configuration
const config = {
    y: 'n_flagged',
    selectedGroupIDs: '123',
};

const timeSeries = rbmViz.default.timeSeries(
    '#canvas',
    data,
    config
);

• 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: config[ config.y ]
• selectedGroupIDs
  • an array of group IDs that will be highlighted in the chart
  • default: []
• maintainAspectRatio
  • 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: config[ config.x ]
• thresholds
  • an array of thresholds (applies only when y-variable is KRI score)
  • default: [ { threshold: -7, flag: -2 }, { threshold: -5, flag: -1 }, { threshold: 5, flag: 1 }, { threshold: 7, flag: 2 }, ];