Published
Edited
Aug 22, 2020
{
const svg = d3.create("svg").attr("viewBox", [0, 0, 600, 100]);
svg.append('text').attr('x', 5).attr('y', 30).style('font-size', '10pt')
.text('ciccia');
svg.append('rect').attr('x', 5).attr('y', 5).attr('height', 10).attr('fill', 'blue').style('width', '100%');
const countTotal1 = 15;
const countInterval1 = 1000;
const countdown1$ = Rx.interval(countInterval1).pipe(
take(countTotal1),
map(n => countTotal1 - n - 1),
startWith(countTotal1)
);
const countTotal2 = 10;
const countInterval2 = 700;
const countdown2$ = Rx.interval(countInterval2).pipe(
take(countTotal2),
map(n => countTotal2 - n - 1),
startWith(countTotal2)
);
const countTotal3 = 10;
const countStart3 = 7;
const countInterval3 = 700;
const countdown3$ = Rx.interval(countInterval3).pipe(
take(countStart3),
map(n => countStart3 - n - 1),
startWith(countStart3)
);
const granularity = 0.1;
const getPercentages = (countTotal, countdown, countInterval, granularity) => {
const t = countInterval * countdown; // millis
const perc = countdown / countTotal;
const totalStepNum = 100 / granularity;
const stepNum = Math.floor(totalStepNum * perc);
const doneStepNum = Math.ceil(totalStepNum - stepNum);
const eachStepInterval = t / stepNum;
return Rx.interval(eachStepInterval).pipe(
take(stepNum),
map(index => (doneStepNum + index) * granularity),
map(x => 100 - x)
);
}
const countdownObjSubject$ = new Rx.Subject();
const replaceCountdown = (countdown$, countInterval, countTotal) => {
countdownObjSubject$.next({countdown$, countInterval, countTotal})
}
const x$ = countdownObjSubject$.pipe(
switchMap(({countdown$, countInterval, countTotal}) => countdown$.pipe(
map(countdown => ({countdown, countInterval, countTotal}))
)),
tap(({countdown, countInterval, countTotal}) => svg.selectAll('text').text(`countdown: ${countdown} - countInterval: ${countInterval}`)),
switchMap(({countdown, countInterval, countTotal}) => getPercentages(countTotal, countdown, countInterval, granularity)),
map(perc => `${perc}%`)
)
x$.subscribe(x => svg.selectAll('rect').style('width', x))
replaceCountdown(countdown1$, countInterval1, countTotal1);
setTimeout(() => {
replaceCountdown(countdown2$, countInterval2, countTotal2);
}, 6000);
setTimeout(() => {
replaceCountdown(countdown3$, countInterval3, countTotal3);
}, 12000);
return svg.node()
}
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.
