Plot.plot({
padding: 0,
// grid: true,
marginLeft: 0.15 * width,
width: 0.85 * width,
x: {axis: "top", label: "Rank", grid: true},
y: {label: null, grid: true},
color: {type: "sqrt", scheme: "Oranges"},
marks: [
Plot.cell(team_ranks_current,
{x: "rank", y: "team", fill: "score", inset: 0.5,
sort: {
y: "data",
reduce: ([d]) => 33 - d.week_rank
}}),
Plot.text(team_ranks_current, {x: "rank", y: "team", text: (d) => d.rank, fill: (d) => d.score > 0.70 ? "white": "black"})
]
})
Plot.plot({
padding: 0,
// grid: true,
marginLeft: 0.15 * width,
width: 0.85 * width,
x: {axis: null, label: "Rank", grid: true, type: "band" },
y: {label: null, grid: true},
color: {type: "linear", scheme: "Oranges"},
marks: [
Plot.dot(team_ranks_prev, {x: "rank", y: "team", fill: "score", symbol: "square", r: 9, dx: 0, dy: 0}),
Plot.dot(team_ranks_prev2, {x: "rank", y: "team", fill: "score", symbol: "square", r: 5, dx: 0, dy: 0}),
Plot.dot(team_ranks_current, {x: "rank", y: "team", fill: "score", symbol: "square", r: 13, dx: 0, dy: 0,
sort: {
y: "data",
reduce: ([d]) => 33 - d.week_rank
}}),
Plot.text(team_ranks_current, {x: "rank", y: "team", text: (d) => d.rank, fill: (d) => d.score > 0.70 ? "white": "black"})
]
})
Plot.plot({
height: 900,
marginRight: 150,
x: {axis: null, label: "Rank", grid: true, type: "band" },
y: {label: null, grid: true},
color: {scheme: "Viridis"},
facet: {data: team_ranks, y: "team", sort: "week_rank"},
marks: [
Plot.areaY(team_ranks, {x: "rank", y: getScore, fill: "week", clip: true, sort: "rank", z: "week"}),
Plot.frame()
]
})
function getScore(d) {
if (week_max - d.week == 0) return d.score;
else if (week_max - d.week == 1) return d.score * 0.5;
else if (week_max - d.week == 2) return d.score * 0.25;
else return 0
}
score_threshold = 0.0
team_ranks_current = team_ranks.filter((d) => d.week == week_max && d.score > score_threshold)
team_ranks_prev = team_ranks.filter((d) => d.week == week_max - 1 && d.score > score_threshold - 0.1)
team_ranks_prev2 = team_ranks.filter((d) => d.week == week_max - 2 && d.score > score_threshold - 0.2)
week_max = d3.max(team_ranks.map((d) => d.week))
d3.group(team_ranks, (d) => d.team, (d) => d.week)
team_ranks = FileAttachment("team_ranks@8.json").json()
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.
