barchart = bars.plot({
y: { domain: [-30, 100] },
color: { scheme: "Reds", domain: [-30, 100] },
marks:[
Plot.axisX({label: null, lineWidth: 4, marginBottom: 60,textsize:4}),
Plot.axisY({label: "↑ Mabadiliko toka Wastani wa bei za 2015 (%)"})
//,
//Plot.text(gdata, { x: ['Chakula na Vinywaji Bila Pombe','Pombe na Sigara','Nguo na Viatu','Nishati na Nyumba','Vifaa na Ukarabati wa Nyumba','Afya','Usafiri','Tehama','Michezo na Utamaduni','Elimu','Malazi','Bima','Bidhaa nyingine'],text: d => (d).toFixed(1), dy: -5 })
]
})
//bars = barY(data, { x: (d, i) => i, fill: (d) => d })
bars = barX(data, { x: ['Chakula na Vinywaji Bila Pombe','Pombe na Sigara','Nguo na Viatu','Nishati na Nyumba','Vifaa na Ukarabati wa Nyumba','Afya','Usafiri','Tehama','Michezo na Utamaduni','Elimu','Malazi','Bima','Bidhaa nyingine'], fill: (d) => d})
data = Array.from({ length: 13 }, d3.randomInt(0, 0))
gdata = {
//barchart;
//do {
for (let i = 0; i < 84; 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: 300 })
.end();
}
//} while (true);
}
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;
}
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.
