The avatar for @jzhang
Jimmy Zhang
Basketball and data visualization enthusiast. Former engineer at @observablehq
Published
Edited
May 2, 2020
Importers
2 stars
1
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
function extract(data, key) {
return data.map(d => d[key]);
}
Insert cell
abcd = 1
Insert cell
ppsData = bucksVsLeague
.filter(b => b.Team === 'Totals')
.filter(b => b.Zone !== 'Backcourt')
Insert cell
Insert cell
dimensions = {
const regulationWidth = 50;
const regulationHeight = 35;
const courtWidth = width * .75;
const scaleFactor = courtWidth / regulationWidth;

return {
courtWidth,
courtHeight: regulationHeight * scaleFactor,
scaleFactor
};
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
margin = ({ top: 0, right: 60, bottom: 10, left: 10 })
Insert cell
import { makeChart } from "@jzhang/bucks-shooting-by-zone"
Insert cell
Insert cell
Insert cell
colorScale({ data: ppsData, key: statKey })(.8)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
function pathGenerator({ cx, cy, radius }) {
return semicircle()
.cx(xScale(cx))
.cy(yScale(cy))
.r(radius * dimensions.scaleFactor)();
}
Insert cell
function drawSemiCircle({ cx, cy, radius, fill = "none" }) {
return `<path d="${pathGenerator({
cx,
cy,
radius
})}" stroke="black" fill=${fill} stroke-width="${lineWidth}" />`;
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
yScale = d3
.scaleLinear()
.domain([35, 0])
.range([0, dimensions.courtHeight])
Insert cell
Insert cell

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.
Learn more