{
const n = 12;
const barSize = 48;
const margin = {top: 16, bottom: 6, left: 0, right: 6};
const height = margin.top + barSize * n + margin.bottom;
const duration = 3250;
const x = d3.scaleLinear([0, 1], [margin.left, width - margin.right]);
const y = d3.scaleBand()
.domain(d3.range(n+1))
.rangeRound([margin.top, margin.top + barSize * (n + 1 + 0.1)])
.padding(0.1);
const colorScale = d3.scaleOrdinal(d3.schemeTableau10);
const color = d => colorScale(d.name);
const nameframes = d3.groups(keyframes.flatMap(([, data]) => data), d => d.name);
const prev = new Map(nameframes.flatMap(([, data]) => d3.pairs(data, (a, b) => [b, a])));
const next = new Map(nameframes.flatMap(([, data]) => d3.pairs(data)));
var bindData = keyframes[0][1];
const barChart = Plot.barX(bindData, {
x: "value",
y: "name",
fill: "name",
sort: { y: "x", reverse: true, limit: n },
render: (i, s, v, d, c, next) => {
const g = next(i, s, v, d, c);
c.ownerSVGElement.updateBar = (values) =>
d3.select(g)
.selectAll("rect")
.transition()
.duration(duration)
.attr("width", (i) => s.x(values[i].value) - s.x(0))
.attr("fill", (i) => s.color(values[i].name));
return g;
}
});
const valueChart = Plot.text(bindData, {
text: "value",
y: "name",
x: "value",
textAnchor: "end",
dx: -3,
fill: "white",
render: (i, s, v, d, c, next) => {
const g = next(i, s, v, d, c);
c.ownerSVGElement.updateValue = function(values) {
return d3.select(g)
.selectAll("text")
.transition()
.duration(duration)
// .attr("x", (i) => s.x(values[i].value))
// .attr("dx", -3)
.attr("fill", "red")
.text((i) => s.x(values[i].value))
// .text((i) => values[i].value)
;
}
return g;
}
})
const textChart = Plot.text(bindData, {
text: "name",
y: "name",
x: "value",
textAnchor: "start",
dx: 3,
fill: "black",
render: (i, s, v, d, c, next) => {
const g = next(i, s, v, d, c);
c.ownerSVGElement.updateText = function(values) {
return d3.select(g)
.selectAll("text")
.transition()
.duration(duration)
.attr("fill", "blue")
.attr("x", (i) => s.x(values[i].value))
// .text((i) => values[i].name)
;
}
return g;
}
});
const chart = Plot.plot({
width: width,
marginLeft: 0,
marginRight: 300,
x: { axis: null },
y: { label: null },
marks: [
barChart,
valueChart,
textChart
]
})
const newValues = keyframes[3][1];
chart.updateBar(newValues).end();
chart.updateValue(newValues).end();
chart.updateText(newValues).end();
return chart
/*const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height])
.attr("width", width)
.attr("height", height)
.attr("style", "max-width: 100%; height: auto;");
const updateBars = bars(svg, x, y, height, color, n, prev, next);
const updateAxis = axis(svg, margin.top, barSize, n, x, y);
const updateLabels = labels(svg, n, x, y, height, prev, next, margin.left);
const updateTicker = ticker(svg, barSize, margin.top, n, keyframes[0][0]);
yield svg.node();
// for (const keyframe of keyframes) {
for (const [i, keyframe] of keyframes.entries()) {
const transition = svg.transition()
.duration(duration)
.ease(d3.easeLinear);
x.domain([0, keyframe[1][0].value]);
updateBars(keyframe, transition, i == 0);
updateAxis(keyframe, transition);
updateLabels(keyframe, transition, i == 0);
updateTicker(keyframe, transition);
invalidation.then(() => svg.interrupt());
await transition.end();
}*/
}