sakakuchi_NaxClay@1.json
Type Table, then Shift-Enter. Ctrl-space for more options.
cumulated = {
const playerA = "sakakuchi";
const playerB = "naxclay";
let winsA = 0;
let winsB = 0;
return [...data].reverse().map((game, index) => {
const winner = game.players[game.winner]?.user.id;
winsA += winner === playerA;
winsB += winner === playerB;
return [winsA, winsB];
});
}
{
const nbGames = cumulated.length;
const lastGame = cumulated[nbGames - 1];
const stepX = width / (nbGames + 1);
const maxY = Math.max(lastGame[0], lastGame[1]);
const yScale = height / maxY;
return htl.html`<svg width=${width} height=${height}>
<path fill="transparent" d="M 0 ${height} ${cumulated
.map((_, index) => `${index * stepX} ${height - _[0] * yScale}`)
.join(" ")}" stroke="purple" />
<path fill="transparent" d="M 0 ${height} ${cumulated
.map((_, index) => `${index * stepX} ${height - _[1] * yScale}`)
.join(" ")}" stroke="red" />
<path fill="transparent" d="M 0 ${height} ${cumulated
.map((_, index) => `${index * stepX} ${height - (_[1] - _[0]) * yScale}`)
.join(" ")}" stroke="cyan" />
</svg>`;
}
height = 200
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.
