Include this polyfill snippet above your code, so you can transpile it on the fly online. But for production you should use babel-polyfill

// Production steps of ECMA-262, Edition 6, 22.1.2.1
// Reference: https://people.mozilla.org/~jorendorff/es6-draft.html#sec-array.from
if (!Array.from) {
  Array.from = (function () {
    var toStr = Object.prototype.toString;
    var isCallable = function (fn) {
      return typeof fn === 'function' || toStr.call(fn) === '[object Function]';
    };
    var toInteger = function (value) {
      var number = Number(value);
      if (isNaN(number)) { return 0; }
      if (number === 0 || !isFinite(number)) { return number; }
      return (number > 0 ? 1 : -1) * Math.floor(Math.abs(number));
    };
    var maxSafeInteger = Math.pow(2, 53) - 1;
    var toLength = function (value) {
      var len = toInteger(value);
      return Math.min(Math.max(len, 0), maxSafeInteger);
    };

    // The length property of the from method is 1.
    return function from(arrayLike/*, mapFn, thisArg */) {
      // 1. Let C be the this value.
      var C = this;

      // 2. Let items be ToObject(arrayLike).
      var items = Object(arrayLike);

      // 3. ReturnIfAbrupt(items).
      if (arrayLike == null) {
        throw new TypeError("Array.from requires an array-like object - not null or undefined");
      }

      // 4. If mapfn is undefined, then let mapping be false.
      var mapFn = arguments.length > 1 ? arguments[1] : void undefined;
      var T;
      if (typeof mapFn !== 'undefined') {
        // 5. else      
        // 5. a If IsCallable(mapfn) is false, throw a TypeError exception.
        if (!isCallable(mapFn)) {
          throw new TypeError('Array.from: when provided, the second argument must be a function');
        }

        // 5. b. If thisArg was supplied, let T be thisArg; else let T be undefined.
        if (arguments.length > 2) {
          T = arguments[2];
        }
      }

      // 10. Let lenValue be Get(items, "length").
      // 11. Let len be ToLength(lenValue).
      var len = toLength(items.length);

      // 13. If IsConstructor(C) is true, then
      // 13. a. Let A be the result of calling the [[Construct]] internal method of C with an argument list containing the single item len.
      // 14. a. Else, Let A be ArrayCreate(len).
      var A = isCallable(C) ? Object(new C(len)) : new Array(len);

      // 16. Let k be 0.
      var k = 0;
      // 17. Repeat, while k < len… (also steps a - h)
      var kValue;
      while (k < len) {
        kValue = items[k];
        if (mapFn) {
          A[k] = typeof T === 'undefined' ? mapFn(kValue, k) : mapFn.call(T, kValue, k);
        } else {
          A[k] = kValue;
        }
        k += 1;
      }
      // 18. Let putStatus be Put(A, "length", len, true).
      A.length = len;
      // 20. Return A.
      return A;
    };
  }());
}

I will assume that since you are not very familiar with es6 you are probably not very familiar with babeljs.io which gives you an option to convert back:

Check this link up.

"use strict";

var data = [{ "rec": "1", "region": "LEFT", "intrface": "Line-1" }, { "rec": "1", "region": "LEFT", "intrface": "Line-2" }, { "rec": "1", "region": "RIGHT", "intrface": "Line-3" }, { "rec": "1", "region": "RIGHT", "intrface": "Line-4" }];

var s = Snap("#svg");
var height = 40;
var canvasWidth = 400;
var lineWidth = 180;
var rightOffset = canvasWidth / 2 - lineWidth;

var leftLines = data.filter(function (line) {
  return !isRightLine(line);
});
var rightLines = data.filter(isRightLine);

leftLines.forEach(drawLine);
rightLines.forEach(drawLine);

var numberOfLines = Math.max(leftLines.length, rightLines.length);
var rectSize = 20;
var rectangles = [];

for (var i = 0; i < numberOfLines; i++) {
  rectangles.push(drawRect(i));
}

function drawLine(data, index) {
  var intrface = data.intrface;

  var isRight = isRightLine(data);
  var x = isRight ? canvasWidth / 2 + rightOffset : 0;
  var y = height * (index + 1);
  var stroke = isRight ? 'red' : 'black';

  var line = s.line(x, y, x + 180, y);
  line.attr({
    stroke: stroke,
    strokeWidth: 1
  });

  var text = s.text(x + 10, y - 5, intrface);

  text.attr({
    fill: stroke,
    cursor: 'pointer'
  });

  text.click(function () {
    console.log('clicked', data);

    //window.location.href = "http://stackoverflow.com/";
  });
}

// you might want to change this - howeverever you will have to change everywhere in the code that calls isRightLine to pass a primitive vs an object.
function isRightLine(_ref) {
  var region = _ref.region;

  return region === 'RIGHT';
}

function drawRect(index) {
  var x = canvasWidth / 2 - rectSize / 2;
  var y = height * (index + 1) - rectSize / 2;
  var rectangle = s.rect(x, y, rectSize, rectSize);

  rectangle.attr({
    fill: 'black'
  });

  console.log('rr', x, y);

  return rectangle;
}

You don't tell Babel to target ES5, you choose the necessary presets/plugins that do that for you. For example, if you use the es2015 preset, this will compile ES6 code to ES5-compatible code. You don't specify a "target".

The guide below will take you through using Babel to transform ES6 code into code that can run in an environment that supports <= ES5.

0. A note on API changes from Babel 5

In the documentation for Babel 6:

The babel package is no more. Previously, it was the entire compiler and all the transforms plus a bunch of CLI tools, but this lead to unnecessarily large downloads and was a bit confusing. Now we’ve split it up into two separate packages: babel-cli and babel-core.

And:

Babel 6 ships without any default transforms, so when you run Babel on a file it will just print it back out to you without changing anything.

______

1. Install babel-cli

First, as in the docs, you need to install babel-cli:

$ npm install babel-cli

______

2. Define presets in .babelrc

Second, you need to use a .babelrc (docs) local to your files and explicitly define the presets that you want Babel to use. For example, for ES6+ features use the env preset.

...a smart preset that allows you to use the latest JavaScript without needing to micromanage which syntax transforms (and optionally, browser polyfills) are needed by your target environment(s).

Install it:

npm install @babel/preset-env

And then declare it in your .babelrc:

{
  "presets": ["@babel/preset-env"]
}

Note: if you are using Babel 7.x you may prefer to use a "project-wide configuration" (babel.config.js) (docs) which "applies broadly, even allowing plugins and presets to easily apply to files in node_modules or in symlinked packages".

______

3. Run babel

Now running the babel command as in your example should work:

$> babel ./src/myclass.js --out-file ./out/app.js

Alternatively, use a bundler like webpack, rollup, or browserify, with their respective babel plugin.