Public
Edited
Jan 1, 2023
TEST
import { data } from "@observablehq/plot-exploration-penguins"
Plot.plot({
facet: { data, y: "sex", marginRight: 60 },
x: { domain: [0, 6500] },
marginLeft: 70,
marginRight: 50,
fy: { domain: ["FEMALE", "MALE"] },
marks: [Plot.boxX(data, { x: "body_mass", y: "species", fill: "species" })]
})
stateStr = `[{"player":"0: KC,QH","eqty":0,"kind":"win","isWinner":false,"rank":1276,"handType":"high-card"},{"player":"0: KC,QH","eqty":0,"kind":"tie","isWinner":false,"rank":1276,"handType":"high-card"},{"player":"1: 2C,TS","eqty":1,"kind":"win","isWinner":true,"rank":1477,"handType":"one-pair"},{"player":"1: 2C,TS","eqty":0,"kind":"tie","isWinner":true,"rank":1477,"handType":"one-pair"}]
`
state = JSON.parse(stateStr)
opts = {
const fmt = (x) => (100 * x).toLocaleString();
const buildText = (d, k) => {
const i = d[0].kind === "win" ? 0 : 1;
const w = d[i].eqty;
const t = d[(i + 1) % 2].eqty;
if (w + t === 0) return "";
const s = d3.sum(d.map((e) => e.eqty));
const _w = fmt(w);
const _t = fmt(t);
const _s = fmt(s);
return k == "total" ? `${_s} % ` : k == "win" ? `${_w} win` : `${_t} tie`;
};
const buildTextFinal = (d, k) => {
console.log("buildTextFinal");
console.log(d[0]);
const { isWinner, rank, handType } = d[0];
console.log(rank);
return k == "handType" ? handType : rank;
// return isWinner ? `${handType} (${rank})` : "";
};
const opts = {
height: 200,
width: (state.length / 2) * 150,
marginTop: 35,
x: { type: "band", padding: 0.2, align: 0.3 },
marks: [
Plot.ruleY([0]),
Plot.barY(state, {
...Plot.stackY({
y: "eqty",
x: "player",
z: "kind",
fill: "kind",
fillOpacity: 0.8
})
}),
Plot.text(state, {
...Plot.groupX({ y: "sum" }, { x: "player", y: "eqty" }),
text: (d) => buildText(d, "total"),
dx: 0,
dy: -30,
fontSize: 11,
fontWeight: 400
}),
Plot.text(state, {
...Plot.groupX({ y: "sum" }, { x: "player", y: "eqty" }),
text: (d) => buildText(d, "win"),
dx: 0,
dy: -20,
fontSize: 11,
fontWeight: 300
}),
Plot.text(state, {
...Plot.groupX({ y: "sum" }, { x: "player", y: "eqty" }),
text: (d) => buildText(d, "tie"),
dx: 0,
dy: -10,
fontSize: 11,
fontWeight: 300
}),
Plot.text(state, {
...Plot.groupX({ y: "sum" }, { x: "player", y: "eqty" }),
text: (d) => buildTextFinal(d, "handType"),
x: (d) => d[0].player,
y: (d) => (d[0].isWinner ? 0.8 : 0.6),
fontSize: 12,
fontWeight: 500,
fill: "blue"
}),
Plot.text(state, {
...Plot.groupX({ y: "sum" }, { x: "player", y: "eqty" }),
text: (d) => buildTextFinal(d, "rank"),
x: (d) => d[0].player,
y: (d) => (d[0].isWinner ? 0.65 : 0.45),
fontSize: 12,
fontWeight: 400,
fill: "black"
})
]
};
return opts;
}
Plot.plot(opts)
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.
