Interactive Streamgraph D3

forked from GerHobbelt's block: Interactive Streamgraph D3

<!DOCTYPE html>
<html>
<head>
    <title>Streamgraph</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@2.8.0/d3.v2.min.js"></script>
    <script type="text/javascript" src="stream_layers.js"></script>
    <script type="text/javascript" src="stream-chart.js"></script>
</head>
<body>
    <div id="chart">
        <button class="first last" onclick="transition()">
            Update
        </button><p>
    </div>
    <script>
        var n = 20, // number of layers
            m = 200; // number of samples per layer

var data1 = stream_layers(n, m);
        var data0 = stream_layers(n, m);
        var colors = d3.range(n).map(function() { return d3.interpolateRgb("#aad", "#556")(Math.random()); });

var streamgraph = streamgraphChart()
            .margin({top: 10, right: 10, bottom: 10, left: 10})
            .color(function(d, i) { return colors[i]; }) // use same colors for both data sets
            .transitionDuration(1500)
            .on("mouseover", fade(.2))
            .on("mouseout", fade(1));

d3.select("#chart")
            .datum(data0)
            .call(streamgraph);

function transition() {
            d3.select("#chart")
                    .datum(function() {
                        var d = data1;
                        data1 = data0;
                        return data0 = d;
                    })
                    .call(streamgraph);
        }

function fade(opacity) {
            return function(g, i) {
                streamgraph.layers()
                    .filter(function(h, j) {
                        return j != i;
                    })
                    .transition(1000)
                      .style("opacity", opacity);
            }
        }
    </script>
</body>
</html>

Modified http://mbostock.github.com/d3/d3.v2.js?2.8.0 to a secure url

https://mbostock.github.com/d3/d3.v2.js?2.8.0