function rowHtml(teamName) {
return Plot.plot({
aspectRatio: 0.75,
color: {
// legend: true,
label: "Rank",
scheme: "Plasma" // "YlOrRd"
},
marks: [
Plot.contour(getData(teamName), {
width: 33,
height: 3,
fill: Plot.identity,
stroke: "black",
// interval: 0.75,
blur: 0.25,
thresholds: 4,
}),
Plot.text([teamName], {x: [16], y: [3.5], fontSize: 14, textAnchor: "middle"})
]
})
}
html`<h1>Teams</h1>${ranks.map(d => html`${rowHtml(d["team"])}`)}`
function getData(teamName) {
for (const {team, rows} of ranks) {
if (team == teamName) return rows;
}
return []
}
vals = [0, 0, 0, 0, 0, 0, 2, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 0, 2, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 10, 4, 8, 8, 8, 2, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
ranks = FileAttachment("ranks@11.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.
