Public
Edited
Apr 23, 2024
viewof debutYear = Inputs.range([1900, 2024], {
label: "debut Year",
step: 1,
value: 1992
})
Plot.plot({
width,
marginLeft: 130,
axis: null,
x: {
axis: "top",
grid: true
},
marks: [
Plot.barX(sample, {
x1: "debut",
x2: "lastGame",
y: "name",
fill: "WAR",
sort: { y: "fill", order: "descending" }
}),
Plot.text(sample, {
x: "debut",
y: "name",
text: "name",
textAnchor: "end",
dx: -3
}),
Plot.tip(
sample,
Plot.pointer({
x: "debut",
y: "name",
title: (d) =>
`${d.name} - Career WAR: ${d["WAR"] ? d.WAR.toFixed(2) : 0}`
})
)
]
})
sample = d3
.shuffle(cleadData.filter((d) => d.debut.getFullYear() === debutYear))
.sort((a, b) => a.WAR - b.WAR)
// .slice(0, 50)
// clean out records with missing data
cleadData = data.filter((e) => e.debut !== null)
// extract just the data we need an type it correctly
data = people.map((e) => ({
player_ID: e.retroID,
name: `${e.nameFirst} ${e.nameLast}`,
debut: e.debut,
lastGame: e.finalGame,
WAR: war_bat_agg[e.bbrefID]
}))
war_bat_agg = {
const groupedData = _.groupBy(war_bat_clean, "player_ID");
const aggregateData = _.mapValues(groupedData, (group) =>
_.sumBy(group, "WAR")
);
return aggregateData;
}
war_bat_clean = war_daily_bat.map((e) => ({
player_ID: e.player_ID,
name_common: e.name_common,
year_ID: e.year_ID,
WAR: e.WAR === "NULL" ? 0 : parseFloat(e.WAR)
}))
war_daily_bat = FileAttachment("war_daily_bat.txt").csv({ typed: true })
timeParser = d3.timeParse("%m/%d/%Y")
People.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
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.
