D3 Examples - D3 Multiline Chart with Transform Interpolation

xxxxxxxxxx
 
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Pure D3 Charts</title>
​
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700">
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
​
    <div>
        <h1>Pure D3</h1>
        <p>
            Using pure d3 for a line chart.
        </p>
        <h2>Line Chart</h2>
        <div id="line-chart"></div>
    </div>
​
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
    <script src="line-chart.js"></script>
​
    <script>
​
        var getIncrementedTimestamp = function(increment) {
            return new Date(2015, 0, 1).getTime() + increment * 60000;
        };
​
        var lastRandom = {};
​
        var getRandomValue = function(series) {
            var options = {
                min: 0,
                max: 2,
                integers: false
            };
​
            var randomize = function() {
                if (lastRandom[series] === undefined || lastRandom[series] === null) {
                    lastRandom[series] = Math.random() * Math.abs(options.max - options.min) + options.min;
                    return lastRandom[series];
                }
                lastRandom[series] = Math.abs(lastRandom[series] + Math.random() - 0.5);
                return lastRandom[series];
            };
​
            return options.integers ? Math.ceil(randomize()) : randomize();
        };
​
        var NUMBER_OF_TIMESERIES = 2;
        var VALUES_PER_TIMESERIES = 60;
​
        var data = [];
​
        for (var series=0; series<NUMBER_OF_TIMESERIES; series++) {
            data[series] = [];
            for (var dp=0; dp<VALUES_PER_TIMESERIES; dp++) {
                data[series][dp] = {
                    timestamp: getIncrementedTimestamp(dp),
                    value: getRandomValue(series)
                };
            }
        }
​
        var lineChart = new LineChart();
        lineChart.draw(data);
​
        var currentTS = data[0].length - 1;
​
        window.setInterval(function() {
​
            // remove old data point from start
            if (data[0].length > VALUES_PER_TIMESERIES) {
                data.forEach(function(d) {
                    d.shift();
                });
            }
​
            // add new data point to end
            data.forEach(function(d, i) {
                d.push({
                    timestamp: getIncrementedTimestamp(currentTS + 1),
                    value: getRandomValue(i)
                });
            });
            currentTS++;
​
            // update line
            lineChart.draw(data);
​
        }, 1000);
​
    </script>
​
</body>
</html>
​
    