Public
Edited
Mar 3, 2023
Insert cell
Insert cell
barchart = bars.plot({
y: { domain: [-10, 50] },
color: { scheme: "Reds", domain: [-10, 40] },
marks:[
Plot.axisX({label: null, lineWidth: 4, marginBottom: 60,textsize:4}),
Plot.axisY({label: "↑ Change from 2020 reference (%)"})
]
})
Insert cell
Insert cell
data = Array.from({ length: 14 }, d3.randomInt(-4, 4))
Insert cell
Insert cell
{
barchart;
//do {
for (let i = 0; i < 25; i++){
//const updated = data.map(d3.randomInt(-40, 40));
const updated = g[i]
yield updated;
await bars
.transition({ Y: updated, F: updated }, { delay: 150, duration: 200 })
.end();
}
//} while (true);
}
Insert cell
barX = function (data, options) {
const B = Plot.barY(data, options);
const { render } = B;
const G = [];
let c;
let that;

B.render = function (I, scales, channels, dimensions) {
c = { scales, dimensions };
that = this;

const g = render.apply(this, arguments);
G.push(g);

return g;
};

B.transition = ({ Y, F }, { delay = 500, duration = 1000 } = {}) => {
const y1 = Array.from(Y, () => c.scales.y(0));
const y2 = Array.from(Y, c.scales.y);

// here's how bars dimensions are controlled within Plot.BarY:
const y = that._y(c.scales, { y1, y2 }, c.dimensions);
const height = that._height(c.scales, { y1, y2 }, c.dimensions);

return d3
.selectAll(G)
.selectAll("rect")
.transition()
.delay(delay)
.duration(duration)
.attr("height", height)
.attr("fill", (i) => c.scales.color(F[i]))
.attr("y", y);
};

return B;
}
Insert cell

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.
Learn more