function streamgraphChart() {

    var margin = {top: 0, right: 0, bottom: 0, left: 0},
        width = 960,
        height = 500,
        transitionDuration = 1000,
        color = function() { return d3.interpolateRgb("#aad", "#556")(Math.random()); },
        eventHandlers = [],
        layers = undefined;

    var streamgraph =  d3.layout.stack().offset("wiggle");

    function chart(selection) {
        selection.each(function(data) {

            // Compute the streamgraph.
            data = streamgraph(data);

            var mx = data[0].length - 1, // assumes that all layers have same # of samples & that there is at least one layer
                my = d3.max(data, function(d) {
                    return d3.max(d, function(d) {
                        return d.y0 + d.y;
                    });
                });

            // Select the svg element, if it exists.
            var svg = d3.select(this).selectAll("svg").data([data]);

            // Otherwise, create the skeletal chart.
            var gEnter = svg.enter().append("svg").append("g");

            // Update the outer dimensions.
            svg .attr("width", width)
                .attr("height", height);

            // Update the inner dimensions.
            var g = svg.select("g")
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

            // Update the streamgraph
            var availableWidth = width - margin.left - margin.right,
                availableHeight = height - margin.top - margin.bottom;

            var area = d3.svg.area()
                .x(function(d) { return d.x * availableWidth / mx; })
                .y0(function(d) { return availableHeight - d.y0 * availableHeight / my; })
                .y1(function(d) { return availableHeight - (d.y + d.y0) * availableHeight / my; });

            layers = g.selectAll("path").data(data);

            var enterPath = layers.enter().append("path");
            eventHandlers.forEach(function(d){
                enterPath.on(d.type, d.handler);
            });

            layers.exit().remove();
            layers.style("fill", color).transition().duration(transitionDuration).attr("d", area);
        });
    }

    chart.on = function(_) {
        // TODO needs further work
        eventHandlers.push({
            "type": arguments[0],
            "handler": arguments[1]
        });

        return chart;
    }

    chart.color = function(_) {
        if (!arguments.length) return color;
        color = _;
        return chart;
    };

    chart.transitionDuration = function(_) {
        if (!arguments.length) return transitionDuration;
        transitionDuration = _;
        return chart;
    };

    chart.layers = function() {
        return layers;
    }

    chart.margin = function(_) {
        if (!arguments.length) return margin;
        margin = _;
        return chart;
    };

    chart.width = function(_) {
        if (!arguments.length) return width;
        width = _;
        return chart;
    };

    chart.height = function(_) {
        if (!arguments.length) return height;
        height = _;
        return chart;
    };

    return chart;
}