// Yyaayy!!
Plot.version
// Create a database that contains all of the imported NBA datasets
db = arr2db({game1, game2, playerData})
db
Plot.plot({
width,
marks: [
Plot.dot(distances, { x: "totalSec", y: "distance", fill: "result" }),
Plot.ruleY([22], { strokeDasharray: [2, 2] }) // 22 ft line (distance of 3 pt line)
],
color: {
legend: true
},
y: {
label: "Distance (ft)"
},
x: {
reverse: true // reverse as the total secs left
}
})
Plot.plot({
width,
facet: {
data: distances,
x: "result"
},
marks: [
Plot.dot(
distances,
Plot.hexbin(
{ r: "count" },
{ x: "quarter", y: "distance", fill: "result" }
)
),
Plot.ruleY([22], { strokeDasharray: [2, 2] }) // 22 ft line (distance of 3 pt line)
],
color: {
legend: true
},
y: {
label: "Distance (ft)"
},
x: {
reverse: true // reverse as the total secs left
}
})
addTooltips(
Plot.plot({
facet: {
data: distances,
y: "result"
},
width,
marginLeft: 100,
marks: [
Plot.dot(
distances,
Plot.hexbin(
{ r: "count", title: (v) => `Shots: ${v.length} \n ${v[0].player}` },
{ x: "distance", y: "player", fill: "result" }
)
),
Plot.ruleX([22], { strokeDasharray: [2, 2] }) // 22 ft line (distance of 3 pt line)
],
color: {
legend: true
},
y: {
label: null,
grid: true
}
})
)
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
Plot.plot({
facet: {
data: shotPcts,
x: "game"
},
marks: [
Plot.barX(shotPcts, {
x: "pct",
y: "actionPlayer",
fill: (d) => (d.actionGroup === "home" ? "#1D428A" : "#007A33"),
fillOpacity: 0.9,
sort: { y: "x", reverse: true }
}),
Plot.ruleX([0])
],
marginLeft: 100
})
Plot.plot({
// facet: {
// data: shotPcts,
// x: "game"
// },
marks: [
Plot.barX(shotPcts, {
x: "pct",
y: "actionPlayer",
fill: (d) => (d.actionGroup === "home" ? "#1D428A" : "#007A33"),
fillOpacity: 0.9,
sort: { y: "x", reverse: true }
}),
Plot.ruleX([0])
],
marginLeft: 100
})
Plot.plot({
width,
x: {
label: "TK →"
},
y: {
label: "↑ TK",
transform: (d) => d * 100,
grid: true
},
marks: [
Plot.rectY(
shotPcts,
Plot.stackX({
x: "pct",
order: "pct",
reverse: true,
y2: "TK",
title: (d) => `${d.TK}\n${(d.TK * 100).toFixed(1)}%`
// insetLeft: 0.2,
// insetRight: 0.2
})
),
Plot.ruleY([0])
]
})
db
connectionsExist = connections.filter(
(d) => d.actionPlayer && d.secondaryPlayer
)
import { addTooltips } from "@mkfreeman/plot-tooltip"
import { playerData, parsedPlayByPlay as game1 } from '@observablehq/nba-finals-boston-celtics-vs-golden-state-warriors-game-1'
import { parsedPlayByPlay as game2 } from '@observablehq/nba-finals-boston-celtics-vs-golden-state-warriors-game-2'
import {arr2db} from "@observablehq/array-to-db"
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.
