Taucharts custom plug-in example: Highlight Diff Threshold

An example of creating a custom plug-in

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://unpkg.com/d3@4.11.0/build/d3.min.js"></script>
<script src="https://unpkg.com/taucharts@2.0.0-beta.28/dist/taucharts.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/taucharts@2.0.0-beta.28/dist/taucharts.min.css">
<div id="chart"></div>

CSS

html,
body,
#chart {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

JavaScript

// An example of Taucharts custom plug-in.
// This plug-in displays points where difference
// with previous points exceeds some threshold.
//---------------------------------------------

var utils = Taucharts.api.utils;

// Plug-in function
// ----------------
function HighlightDiffThresholdPlugin(xSettings) {

  // Setup plug-in settings defaults.
  // --------------------------------
  var settings = utils.defaults(xSettings || {}, {
    threshold: null,
  });
  var threshold = settings.threshold;
  if (isNaN(threshold)) {
    throw new Error('Threshold is not specified');
  }

  // Check if plug-in is compliant with
  // units in chart configuration.
  // ----------------------------------
  function isApplicable(specRef, unit, parent) {
    if (
      (parent && parent.type !== 'COORDS.RECT') ||
      (unit.type.indexOf('ELEMENT.') !== 0) ||
      (specRef.scales[unit.y].dimType !== 'measure')
    ) {
      return false;
    }
    return true;
  }

  // Return plug-in instance.
  // Be careful when using class instances:
  // event handlers (like `onRender` or `onSpecReady`)
  // should be own object properties.
  // ---------------------------------------------
  return {

    // `onSpecReady` handler is the best place for
    // extending parsed chart configuration.
    // -----------------------------------------
    onSpecReady: function(chart, specRef) {

      // Transformations are applied to incoming data.
      // The name (`diffThreshold` in this case) should
      // be specified in unit config.
      // ----------------------------------------------
      specRef.transformations = specRef.tramsformations || {};
      specRef.transformations.diffThreshold = function(data, props) {
        var x = props.x.dim;
        var y = props.y.dim;
        var g = props.g.dim;
        var sign = Math.sign(threshold);

        var groups = utils.groupBy(data, function(d) {
          return d[g];
        });

        return...