streaming streamgraph

<!DOCTYPE html>
<meta charset="utf-8">
<style>
    path.layer{
        fill-opacity: 0.8;
        stroke-opacity: 1;
        stroke: white;
        stroke-width: 2px;
    }
</style>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>

var layerCount = 4;
    var pointCount = 100;

var buffer = d3.range(layerCount).map(function(d, i){ return 0; });
    var data = d3.merge(d3.range(pointCount).map(function(d, i){ return generateDataPoint(i);}));

var width = 800;
    var height = 400;

var x = d3.scale.linear().domain(d3.extent(data, function(d) { return d.date; })).range([0, width]);
    var y = d3.scale.linear().range([height, 0]);
    var colors = d3.scale.ordinal().range(['#4597ad', '#dc5f50', '#89c562', '#b85787', '#ebbb46', '#7376c1', '#d17c48', '#75c5ac', '#98a5b8', '#c895dc'].concat(d3.scale.category20().range()));

var stack = d3.layout.stack()
        .offset('silhouette')
        .values(function(d){ return d.values; })
        .x(function(d){ return d.date; })
        .y(function(d){ return d.value; });

var nest = d3.nest()
        .key(function(d){ return d.key; });

var area = d3.svg.area()
        .interpolate('cardinal')
        .x(function(d){ return x(d.date); })
        .y0(function(d){ return y(d.y0); })
        .y1(function(d){ return y(d.y0 + d.y); });

var svg = d3.select('.chart').append('svg')
        .attr('width', width)
        .attr('height', height);

function update(){
        var newDataPoint = generateDataPoint(pointCount);
        pointCount++;
        data = data.slice(layerCount).concat(newDataPoint);
        var dataLayers = stack(nest.entries(data));

x.domain(d3.extent(data, function(d) { return d.date; }));
        y.domain([0, d3.max(data, function(d) { return d.y0 + d.y; })]);

var layers = svg.selectAll('.layer')
            .data(dataLayers);
        layers.enter().append('path')
            .attr('class', 'layer');
        layers.attr('d', function(d){ return area(d.values); })
            .style('fill', function(d, i){ return colors(d.key); });
    }

setInterval(update, 1000);

</script>

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

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