src/charts/scatter-plot.js
function drawTrendline(linearData) {
            if (trendLinePath) {
                trendLinePath.remove();
            }

            const params = [
                {x: linearData.x1, y: linearData.y1},
                {x: linearData.x2, y: linearData.y2}
            ];

            let line = d3Shape.line()
              .curve(trendLineCurve)
              .x(({x}) => xScale(x))
              .y(({y}) => yScale(y));

            trendLinePath = svg.selectAll('.chart-group')
              .append('path')
                .attr('class', 'scatter-trendline')
                .attr('d', line(params))
                .attr('stroke', colorSchema[0])
                .attr('stroke-width', trendLineStrokWidth)
                .attr('fill', 'none');

            const totalLength = trendLinePath.node().getTotalLength();

            trendLinePath
              .attr('stroke-dasharray', `${totalLength} ${totalLength}`)
              .attr('stroke-dashoffset', totalLength)
              .transition()
                .delay(trendLineDelay)
                .duration(trendLineDuration)
                .ease(ease)
                .attr('stroke-dashoffset', 0);
        }
function drawTrendline(linearData) {
            if (trendLinePath) {
                trendLinePath.remove();
            }

            const params = [
                {x: linearData.x1, y: linearData.y1},
                {x: linearData.x2, y: linearData.y2}
            ];

            let line = d3Shape.line()
              .curve(trendLineCurve)
              .x(({x}) => xScale(x))
              .y(({y}) => yScale(y));

            trendLinePath = svg.selectAll('.chart-group')
              .append('path')
                .attr('class', 'scatter-trendline')
                .attr('d', line(params))
                .attr('stroke', colorSchema[0])
                .attr('stroke-width', trendLineStrokWidth)
                .attr('fill', 'none');

            const totalLength = trendLinePath.node().getTotalLength();

            trendLinePath
              .attr('stroke-dasharray', `${totalLength} ${totalLength}`)
              .attr('stroke-dashoffset', totalLength)
              .transition()
                .delay(trendLineDelay)
                .duration(trendLineDuration)
                .ease(ease)
                .attr('stroke-dashoffset', 0);
        }
function drawTrendline ( linearData ) { if ( trendLinePath ) { trendLinePath . remove ( ) ; } const params = [ { x : linearData . x1 , y : linearData . y1 } , { x : linearData . x2 , y : linearData . y2 } ] ; let line = d3Shape . line ( ) . curve ( trendLineCurve ) . x ( ( { x } ) => xScale ( x ) ) . y ( ( { y } ) => yScale ( y ) ) ; trendLinePath = svg . selectAll ( '.chart-group' ) . append ( 'path' ) . attr ( 'class' , 'scatter-trendline' ) . attr ( 'd' , line ( params ) ) . attr ( 'stroke' , colorSchema [ 0 ] ) . attr ( 'stroke-width' , trendLineStrokWidth ) . attr ( 'fill' , 'none' ) ; const totalLength = trendLinePath . node ( ) . getTotalLength ( ) ; trendLinePath . attr ( 'stroke-dasharray' , ` ${ totalLength } ${ totalLength } ` ) . attr ( 'stroke-dashoffset' , totalLength ) . transition ( ) . delay ( trendLineDelay ) . duration ( trendLineDuration ) . ease ( ease ) . attr ( 'stroke-dashoffset' , 0 ) ; }
Draws a trend line given the data that contains
and y params from calculated y-intercept and slope
using linear regression formula.
@param {Object} linearData
@returns {void}
@private
Draws a trend line given the data that contains and y params from calculated y - intercept and slope using linear regression formula .