streamgraph = {
var keys = data.columns.slice(1)
var dimensions = ({
width: size,
height: size/3,
margin: {
top: 100,
right: 10,
left: 50,
bottom: 50,
}
})
dimensions.boundedWidth = dimensions.width - dimensions.margin.left - dimensions.margin.right
dimensions.boundedHeight = dimensions.height - dimensions.margin.top - dimensions.margin.bottom
var svg = d3.select(DOM.svg(dimensions.width,dimensions.height))
var bounds = svg.append("g")
.style("transform", `translate(${dimensions.margin.left}px, ${dimensions.margin.top}px)`)
var xScale = d3.scaleLinear()
.domain(d3.extent(data, d => d.year))
.range([0,dimensions.boundedWidth])
var yScale = d3.scaleLinear()
.domain([-50000,100000])
.range([dimensions.boundedHeight,0])
var colorScale = d3.scaleOrdinal()
.domain(keys)
.range(d3.schemeSet1)
var stackedData = d3.stack()
.offset(d3.stackOffsetNone)
.keys(keys)(data)
var area = d3.area()
.x(d => xScale(d.data.year))
.y0(d => yScale(d[0]))
.y1(d => yScale(d[1]))
bounds.selectAll("path")
.data(stackedData)
.enter()
.append("path")
.attr("d", area)
.style("fill", d => colorScale(d.key))
var xAxisGen = d3.axisBottom(xScale).tickSize(-dimensions.boundedHeight)
bounds.append("g")
.attr("transform", "translate("+ dimensions.margin.left + "," + (dimensions.boundedHeight-dimensions.margin.bottom/1.25) + ")")
.call(xAxisGen)
.select(".domain").remove()
bounds.selectAll(".tick line").attr("stroke", "#FFFFFF")
return svg.node()
}