streaming line chart with animation and long-scrolling

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type='text/javascript' src="https://d3js.org/d3.v3.min.js"></script>
    <style>
        div{
            box-sizing: border-box;
        }
        .gallery-container{
            position: absolute;
            height: 100px;
            width: 1000px;
            overflow:hidden;
        }
        .gallery-slide{
            height: 125px;
            width: 1000px;
            overflow:auto;
            white-space: nowrap;
            /*font-size: 0;*/
        }
        .handle{
            top: 0px;
            width: 50px;
            height: 100px;
            position: absolute;
            background: url(handle.png);
            background-repeat: no-repeat;
            background-size: 50px 100%;
        }
        .handle.right{
            right: 0px;
            -moz-transform:rotate(180deg);
            -webkit-transform:rotate(180deg);
            -o-transform:rotate(180deg);
            transform:rotate(180deg);
            -ms-transform:rotate(180deg);
        }
        .panel{
            position: relative;
            top: 0;
            width: 1000px;
            height: 100px;
            z-index: -1;
            display: inline-block;
            text-align: center;
            font-size: 50px;
            margin: -2px; /*hack*/
        }
        .before{
            background-color: orange;
        }
        .current{
            background:
                radial-gradient(circle at 0% 50%, rgba(96, 16, 48, 0) 9px, #613 10px, rgba(96, 16, 48, 0) 11px) 0px 10px,
                radial-gradient(at 100% 100%, rgba(96, 16, 48, 0) 9px, #613 10px, rgba(96, 16, 48, 0) 11px),
                #8a3;
            background-size: 20px 20px;
        }
        .after{
            background-color: skyblue;
        }
    </style>
    <script src="../lib/pixi.dev.js"></script>

</head>
<body>

/*
     super cool features:
     -scroll without redraw
     -long scrolling with lazy loading
     -adjustable speed
     -requestAnimationFrame: smooth, stops when hidden
     -could be adjusted for more granular partial loading []|[][][][]|[]
     -webgl with canvas fallback
     */

// array of data arrays

var dataGenerator = DataGenerator();

// 3 canvases

var chartW = 1000, chartH = 100;
var scaleX = d3.scale.linear().domain([0, 100]).range([0, chartW]);
var scaleY = d3.scale.linear().domain([0, 1000]).range([chartH, 0]);

var canvases = [];
function renderCanvas(_selector){
    var data = dataGenerator.generate();

var canvasSelection = d3.select(_selector).attr({width: chartW, height: chartH});
    var canvasNode = canvasSelection.node();
    var ctx = canvasNode.getContext('2d');
    ctx.globalCompositeOperation = "source-over";
    ctx.fillStyle = 'aliceblue';
    ctx.strokeStyle = 'orange';
    ctx.clearRect(0, 0, canvasNode.width, canvasNode.height);
    ctx.fillRect(0, 0, chartW, chartH);
    ctx.strokeRect(0, 0, chartW, chartH);
    ctx.strokeStyle = 'skyblue';

ctx.beginPath();
    var x, y, i;
    for(i=0; i<data.length; i++){
        x = ~~scaleX(data[i].x);
        y = ~~scaleY(data[i].y);
        ctx.lineTo(x, y);

}
    ctx.stroke();
    canvases.push(canvasNode);
}

renderCanvas('.before canvas');
renderCanvas('.current canvas');
renderCanvas('.after canvas');

// plot/cloneNode before/current/after canvases on jump

var containerW = d3.select('.gallery-container').node().getBoundingClientRect().width;
var slideSelection = d3.select('.gallery-slide');
var slideEl = slideSelection.node();
d3.select('.gallery-slide').node().scrollLeft = containerW;

var shiftStepCount = 100;
var scrollDuration = 10000;
var shiftStepSize = containerW/shiftStepCount;
var shiftDuration = scrollDuration/shiftStepCount;

var timer, isGoingRight = true;
function setTimer(_isGoingRight, _duration, ease, stepNum){
    clearInterval(timer);
    shiftPanel(_isGoingRight, _duration, ease, stepNum);
    return setInterval(function(){
        shiftPanel(_isGoingRight, _duration, ease, stepNum);
    }, _duration);
}

timer = setTimer(true, 500, 'cubic-in-out');

d3.selectAll('.handle').on('mouseenter', function(d, i){
        isGoingRight = this.className.split(' ').indexOf('right') != -1;
        timer = setTimer(isGoingRight, 20, 'linear', 2);
    })
    .on('mouseout', function(d, i){
        if (d3.event.target === this){
            if(d3.event.toElement.className === 'gallery-slide') clearInterval(timer);
            else timer = setTimer(true, 500, 'cubic-in-out');
        }
    })
    .on('mousemove', function(d, i){
        var isRight = this.className.split(' ').indexOf('right') != -1;
        var handleWidth = this.getBoundingClientRect().width;
        var mouseX = d3.mouse(this)[0];
        var speed = !isRight ? mouseX / handleWidth : (1 - mouseX / handleWidth);
        timer = setTimer(isGoingRight, speed*100, 'linear', 2);
    });

slideSelection.on('mouseenter', function(d, i){
        clearInterval(timer);
    })
    .on('mouseout', function(d, i){
        if (d3.event.target === this){
            timer = setTimer(true, 500, 'cubic-in-out');
        }
    });

</script>
</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js