arty-charty/util.js
function makeSplineChartPath(chart, width, t, maxValue, chartHeight, chartHeightOffset, markerRadius, pointsOnScreen, closePath) {
    let heightScaler = (chartHeight-markerRadius)/maxValue;
    let xSpacing = width / pointsOnScreen;
    let centeriser = xSpacing / 2 - markerRadius;
    let fullWidth = xSpacing*(chart.data.length-1) + markerRadius + centeriser;

    let xCord;
    let xCords = [];
    let yCords = [];
    chart.data.forEach((d, idx) => {
        let spacing = idx*xSpacing + centeriser;
        if (spacing > fullWidth * t && chart.drawChart) {
          return true;
        }
        xCord = makeXcord(chart, fullWidth, t, spacing, markerRadius);
        xCords.push(xCord);
        yCords.push((chartHeight+chartHeightOffset) - d.value * heightScaler  * (chart.timingFunctions ? chart.timingFunctions[idx % chart.timingFunctions.length](t) : 1));
    });
    let px = computeSplineControlPoints(xCords);
	  let py = computeSplineControlPoints(yCords);
    let splines = [`M ${xCords[0]} ${yCords[0]}`];
      for (i=0;i<xCords.length-1;i++) {
        splines.push(makeSpline(xCords[i],yCords[i],px.p1[i],py.p1[i],px.p2[i],py.p2[i],xCords[i+1],yCords[i+1]));
      }
      if (closePath) { // close for area spline graph
        splines.push(`V ${chartHeight+chartHeightOffset} H ${xCords[0]} Z`);
      }
    return {
      path: splines.join(','),
      width: xCords.slice(-1) + markerRadius,
      maxScroll: fullWidth - xSpacing + markerRadius
    };
  }
function makeSplineChartPath(chart, width, t, maxValue, chartHeight, chartHeightOffset, markerRadius, pointsOnScreen, closePath) {
    let heightScaler = (chartHeight-markerRadius)/maxValue;
    let xSpacing = width / pointsOnScreen;
    let centeriser = xSpacing / 2 - markerRadius;
    let fullWidth = xSpacing*(chart.data.length-1) + markerRadius + centeriser;

    let xCord;
    let xCords = [];
    let yCords = [];
    chart.data.forEach((d, idx) => {
        let spacing = idx*xSpacing + centeriser;
        if (spacing > fullWidth * t && chart.drawChart) {
          return true;
        }
        xCord = makeXcord(chart, fullWidth, t, spacing, markerRadius);
        xCords.push(xCord);
        yCords.push((chartHeight+chartHeightOffset) - d.value * heightScaler  * (chart.timingFunctions ? chart.timingFunctions[idx % chart.timingFunctions.length](t) : 1));
    });
    let px = computeSplineControlPoints(xCords);
	  let py = computeSplineControlPoints(yCords);
    let splines = [`M ${xCords[0]} ${yCords[0]}`];
      for (i=0;i<xCords.length-1;i++) {
        splines.push(makeSpline(xCords[i],yCords[i],px.p1[i],py.p1[i],px.p2[i],py.p2[i],xCords[i+1],yCords[i+1]));
      }
      if (closePath) { // close for area spline graph
        splines.push(`V ${chartHeight+chartHeightOffset} H ${xCords[0]} Z`);
      }
    return {
      path: splines.join(','),
      width: xCords.slice(-1) + markerRadius,
      maxScroll: fullWidth - xSpacing + markerRadius
    };
  }
function makeSplineChartPath ( chart , width , t , maxValue , chartHeight , chartHeightOffset , markerRadius , pointsOnScreen , closePath ) { let heightScaler = ( chartHeight - markerRadius ) / maxValue ; let xSpacing = width / pointsOnScreen ; let centeriser = xSpacing / 2 - markerRadius ; let fullWidth = xSpacing * ( chart . data . length - 1 ) + markerRadius + centeriser ; let xCord ; let xCords = [ ] ; let yCords = [ ] ; chart . data . forEach ( ( d , idx ) => { let spacing = idx * xSpacing + centeriser ; if ( spacing > fullWidth * t && chart . drawChart ) { return true ; } xCord = makeXcord ( chart , fullWidth , t , spacing , markerRadius ) ; xCords . push ( xCord ) ; yCords . push ( ( chartHeight + chartHeightOffset ) - d . value * heightScaler * ( chart . timingFunctions ? chart . timingFunctions [ idx % chart . timingFunctions . length ] ( t ) : 1 ) ) ; } ) ; let px = computeSplineControlPoints ( xCords ) ; let py = computeSplineControlPoints ( yCords ) ; let splines = [ ` ${ xCords [ 0 ] } ${ yCords [ 0 ] } ` ] ; for ( i = 0 ; i < xCords . length - 1 ; i ++ ) { splines . push ( makeSpline ( xCords [ i ] , yCords [ i ] , px . p1 [ i ] , py . p1 [ i ] , px . p2 [ i ] , py . p2 [ i ] , xCords [ i + 1 ] , yCords [ i + 1 ] ) ) ; } if ( closePath ) { // close for area spline graph splines . push ( ` ${ chartHeight + chartHeightOffset } ${ xCords [ 0 ] } ` ) ; } return { path : splines . join ( ',' ) , width : xCords . slice ( - 1 ) + markerRadius , maxScroll : fullWidth - xSpacing + markerRadius } ; }
Generate the SVG path for a spline or spline-area chart.

@param  {object}  chart             The chart object
@param  {number}  width             Width of the chart in pixels
@param  {number}  t                 Scale parameter (range: 0-1), used for
animating the graph
@param  {number}  maxValue          The maximum value of chart data
@param  {number}  chartHeight       Height of the chart in pixels
@param  {number}  chartHeightOffset By how much to offset the chart height.
Note: The negation of this number is as
the marginTop for the component.
This is done so when the graph is
animated, overflow is not cut off.
@param  {number}  markerRadius      Radius of the markers on the line (needed here so we can add it to the width of the chart element, maybe change name to something better such as padding!!!!)
@param  {number}  pointsOnScreen    The number of points to show on the screen
without having to scroll. Used to calculate
the horizontal spacing between points. (maybe find better name????)
@param  {boolean} closePath         Wether to close the spline (make it an
area chart) or not.
Generate the SVG path for a spline or spline - area chart .