{
var svg = d3.select(DOM.svg(width, height));
var z = d3.interpolateCool;
var area = d3.area()
.x(d => x(d.data.date))
.y0(d => y(d[0]))
.y1(d => y(d[1]))
.curve(d3.curveMonotoneX);
svg.selectAll("path")
.data(stacked)
.enter().append("path")
.attr("d", area)
.attr("fill", (d, i) => {
return colors(data.idMap[i + 1].artist);
})
.attr("stroke", '#000')
.attr('title', (d, i) => data.idMap[i + 1].artist);
svg.append('g')
.attr('transform', `translate(0, ${height - margin.bottom + 10})`)
.call(xAxis);
return svg.node();
}
stack = d3.stack()
.keys(keys)
.value((d, k) => d[k] || 0)
.order(d3.stackOrderInsideOut)
.offset(d3.stackOffsetExpand)
colors = d3.scaleOrdinal()
.range('#E58606,#5D69B1,#52BCA3,#99C945,#CC61B0,#24796C,#DAA51B,#2F8AC4,#764E9F,#ED645A,#CC3A8E,#A5AA99'.split(','))
x = d3.scaleTime()
.domain(d3.extent(data.rows, d => d.date))
.range([margin.left, width - margin.right])
keys = Object.keys(data.idMap)
stacked = stack(data.rows)
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
