Creative technologist and democracy activist
Published
Edited
Mar 22, 2022
Importers
function gameTableParser(arr) {
let mappedArray = arr.map((obj) => {
return {
PLAYER: obj["PLAYER"] ?? "Unknown",
PTS: obj["PTS"],
AST: obj["AST"],
REB: (obj["DREB"] ?? 0) + (obj["OREB"] ?? 0),
OREB: obj["OREB"],
DREB: obj["DREB"],
TO: obj["TO"]
}
})
return mappedArray.filter((element, index) => {
let allStats = 0;
Object.keys(element).forEach((key) => {
if(key == "PLAYER" || isNaN(element[key]) == true) {
return;
}
console.log(Number(element[key]))
allStats += Number(element[key])
})
return allStats > 0
})
}
function sparkbar(max) {
return x => htl.html`<div style="
background: lightblue;
width: ${100 * x / max}%;
float: right;
padding-right: 3px;
box-sizing: border-box;
overflow: visible;
display: flex;
justify-content: end;">${x.toLocaleString("en")}`
}
class ReboundingGraph {
constructor(radio, table) {
if(radio == "Stacked") {
return Plot.plot({
y: { label: "↑ REB - Black is DREB" },
marks: [
Plot.barY(table, {x: "PLAYER", y: "REB", fill: "skyblue"}),
Plot.barY(table, {x: "PLAYER", y: "DREB"}),
]
})
} else {
return Plot.plot({
marks: [
Plot.barY(table, {x: "PLAYER", y: "REB"}),
]
})
}
};
}
class GameTable {
constructor(table, select,fixed,sort,reverse) {
return Inputs.table(table, {
format: {
PTS: sparkbar(d3.max(table, d => d.PTS)),
AST: sparkbar(d3.max(table, d => d.AST)),
REB: sparkbar(d3.max(table, d => d.REB)),
DREB: sparkbar(d3.max(table, d => d.DREB)),
OREB: sparkbar(d3.max(table, d => d.REB)),
TO: sparkbar(d3.max(table, d => d.TO)),
},
sort: sort,
reverse: reverse,
columns: [...fixed, ...select]
});
}
}
class GameTableSelect {
constructor() {
return Inputs.checkbox(["PTS", "AST", "REB", "DREB", "OREB", "TO"], {label: "Categories", value: ["PTS","AST","REB","TO"]})
}
}
class ReboundingRadio {
constructor() {
return Inputs.radio(["Total", "Stacked"], {label: "Select rebounding breakdown", value: "Total"})
}
}
function getTotals(games,categories) {
let body = []
games.forEach((table, index) => {
const objIndex = body.push({
GAME: index + 1,
}) - 1
categories.forEach((category) => {
body[objIndex][category] = 0
})
})
games.forEach((table, index) => {
table.forEach((player) => {
categories.forEach((category) => {
if(!isNaN(player[category])) {
body[index][category] += player[category]
}
})
})
})
return body;
}
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.
