barchart = bars.plot({
y: { domain: [0, 60] },
color: { scheme: "bupu", domain: [-2, 10] }
})
bars = barY(data2, { y: "amt", x: "month", fill: (d) => d.amt })
data = Array.from({ length: 10 }, d3.randomInt(1, 10))
data2 = {
var data2 = [];
data2.push({ "month": 1, "amt": 10});
data2.push({ "month": 2, "amt": 20});
data2.push({ "month": 3, "amt": 30});
return data2;
}
data3 = {
var data3 = [];
data3.push({ "month": 1, "amt": 40});
data3.push({ "month": 2, "amt": 90});
data3.push({ "month": 3, "amt": 10});
return data3;
}
{
barchart;
const updated = data3.map(d => d.amt);
await bars
.transition({ Y: updated, C: updated }, { delay: 1300, duration: 750 })
.end();
/*
// do {
// yield bars;
const updated = data.map(d3.randomInt(1, 90));
//yield updated;
await bars
.transition({ Y: updated, C: updated }, { delay: 1300, duration: 750 })
.end();
// } while (true);
*/
return bars;
}
barY = function (data, options) {
const B = Plot.barY(data, options);
const { render } = B;
const G = [];
let c;
let that;
let info;
B.info = function() {
return info;
}
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, C }, { 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);
/*
//generate rangeY
const rangeY = d3.scaleLinear().range([0, 100]);
var yRange = d3.axisLeft([0,100]);
//var yAxis = d3.selectAll(G)
//.selectAll("y-axis");
// return d3.selectAll(G).transition().duration(1000).call(rangeY);
let yScale = d3.scaleLinear()
.domain([0, 100])
.range([600, 0]);
const yAxis = d3.axisLeft()
.scale(yScale);
*/
let yScale = d3.scaleLinear()
.domain([0, 1000])
.range([600, 0]);
const yAxis = d3.axisLeft()
.scale(yScale);
var svg = d3.selectAll(G)
.selectAll("rect")
.transition()
.delay(delay)
.duration(duration)
.attr("height", height)
.attr("fill", (i) => c.scales.color(C[i]))
.attr("y", y);
svg.selection().merge(d3.selectAll(G).attr('transform', 'translate(1)').call(yAxis));
return svg;
};
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.
