getSvg = () => {
return d3
.select(DOM.svg(width, h))
.attr('viewBox', [0, 0, width + 2 * m, h - 2 * m])
.style('border', '3px double black');
}
getSymbolGroups = svg =>
svg
.selectAll(".symbol")
.data(Symbols, (d, i) => i)
.join("g")
.attr("class", "symbol")
mutable temp = []
async function StackedBars(svg) {
let duration = 1000;
let symbolGroup = svg
.selectAll('.symbol')
.data(data_cast_stacked, (d, i) => i)
.join('g')
.attr('class', 'symbol');
svg.call(axisLine);
let bandScale = d3
.scaleBand()
.domain(Symbols[0].values.map(({ date }) => +date))
.range(x.range())
.padding(0.25)
.paddingOuter(1);
await symbolGroup
.attr('fill', (d, i) => color(Symbols[i].key))
.selectAll('rect')
.data(d => d, (d, i) => i)
.join("rect")
.transition()
.delay((d, i) => i * 50)
.duration(duration)
.attr("y", d => h - m - d[1] + 1)
.attr("height", d => d[1] - d[0] - 1)
.transition()
.ease(d3.easeBounceIn)
// .duration(duration)
.attr('x', d => bandScale(+d.data.date))
.attr('width', d => bandScale.bandwidth())
.end();
d3.select(this)
.select("text")
.transition()
.delay(Symbols[0].values.length * 10)
.attr("transform", d => {
d = d.values[d.values.length - 1];
return `translate(${w - 60},${y(d.price / 2 + d.price0)})`;
});
// await Promises.delay(duration + Symbols[0].values.length * 50);
}
color = d3.scaleOrdinal(d3.schemeTableau10).domain(Symbols.map(x => x.key))
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.
