Public
Edited
Mar 28, 2024
game
X
playerFullName
Y
OBP
Color
—
Size
—
Facet X
pos
Facet Y
—
Mark
Auto
Type Chart, then Shift-Enter. Ctrl-space for more options.
// data = await d3.json(
// "https://project.trumedianetworks.com/api/mlb/dataviz-data-by-game/0",
// {
// headers: new Headers({
// accept: "application/json",
// tempToken: "01ffb537-7927-4b0d-a2d2-fba9382647b1"
// })
// }
// )
data.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
data
X
—
Y
BA
Color
—
Size
—
Facet X
win
Facet Y
—
Mark
Auto
Type Chart, then Shift-Enter. Ctrl-space for more options.
data
X
date
Y
PA
Color
home
Size
—
Facet X
—
Facet Y
—
Mark
bar
Type Chart, then Shift-Enter. Ctrl-space for more options.
Plot.plot({
color: { legend: true, scheme: "RdYlBu" },
marks: [
Plot.barY(data, { x: "date", y: "PA", fill: "home", tip: true }),
Plot.ruleY([0])
]
})
d3.extent(data, d=>d.date)
data
X
home
Y
—
Color
home
Size
—
Facet X
win
Facet Y
—
Mark
bar
Type Chart, then Shift-Enter. Ctrl-space for more options.
// Plot.plot({
// marks: [
// Plot.frame({ strokeOpacity: 0.1 }),
// Plot.ruleX([0]),
// Plot.dot(
// data,
// Plot.binY(
// { x: "count" },
// { fx: "playerFullName", fy: "opponent", y: "HR", tip: true }
// )
// )
// ]
// })
first_100
Type Table, then Shift-Enter. Ctrl-space for more options.
median_avg.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
{
// Usage example
const top10ByOpponent = getTopNByOpponent(data, "BB_num_mean", 10);
return top10ByOpponent;
}
function getTopNByOpponent(data, column, n) {
// Group data by opponent
const groupedData = d3.group(data, (d) => d.opponent);
// Get top N players with the highest value for the specified column for each opponent
return Array.from(groupedData, ([opponent, players]) => {
return {
opponent,
topN: players.sort((a, b) => b[column] - a[column]).slice(0, n)
};
});
}
video = FileAttachment("video.json").json()
project1 = FileAttachment("project@1.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.
