md`# Stackable Multi-chart(line, area, bar)`
viewof numOfSeries = html`<input type="range" min= "1" max="200" step="1" value="9">`
viewof xAxisCount = html`<input type="range" min="1" max="200" step="1" value="30">`
chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
const zx = x.copy();
const gx = svg.append("g").call(xAxis);
gx.selectAll("text").classed('axis-text', true)
const gy = svg.append("g").call(yAxis);
const chartArea = svg.append('g').attr('id', 'charts')
.call(addLine)
.call(addArea)
.call(addBar)
.call(initChartSelector)
.call(addLegend)
svg
.call(addBrush)
.call(hover);
return Object.assign(svg.node(), {
update(domain, stacked) {
const t = svg.transition().duration(transitionDuration);
x.domain(data.category);
gx.transition(t).call(xAxis, x);
gx.selectAll("text").classed('axis-text', true);
y.domain(domain);
gy.transition(t).call(yAxis, y);
chartArea
.call(addLine, true, stacked)
.call(addArea, true, stacked)
.call(addBar, true, stacked)
.call(initChartSelector)
svg.call(hover, stacked);
}
});
}
margin = ({top: 20, right: 30, bottom: 80, left: 40})
height = 350
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.
