md`# Stacked Multi Chart`
viewof numOfSeries = html`<input type="range" min="1" max="200" step="1" value="10">`
viewof xAxisCount = html`<input type="range" min="1" max="200" step="1" value="10">`
function addLine(selection, update) {
selection = update ? d3.select('#lines') : selection.append('g');
selection
// .append("g")
.attr('id', 'lines')
.selectAll("path")
.data(data.byTypes.stack.data.line)
.join("path")
.style("mix-blend-mode", "multiply")
.attr('fill-opacity', 0.5)
.attr("stroke-width", 1.5)
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
.attr('stroke', d => color(d.key.name))
.attr("fill", 'none')
.attr("d", line)
}
xAxisExtent = width - margin.left - margin.right
{
document.addEventListener('update', function (e) {
const domain = [0 ,d3.max(
[
d3.max(data.byTypes.stack.data.line, d => d3.max(d, d => d[1])),
d3.max(data.byTypes.stack.data.area, d => d3.max(d, d => d[1])),
d3.max(data.byTypes.stack.data.bar, d => d3.max(d, d => d[1])),
],
d => d
)]
chart.update(domain);
}, false);
}
unselectedColor = '#ddd'
function initStackView(category, byTypes) {
const view = {
line : [],
bar: [],
area : []
};
byTypes.stack.view = view;
byTypes.lines.map(d => d.display ? view.line.push(d) : null);
byTypes.areas.map(d => d.display ? view.area.push(d) : null);
byTypes.bars.map(d => d.display ? view.bar.push(d) : null);
byTypes.stack.data.line = stackSeries(view.line , category)
byTypes.stack.data.bar = stackSeries(view.bar , category)
byTypes.stack.data.area = stackSeries(view.area , category)
}
d3 = require("d3@6")
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.
