The best and most accurate way of looking at player analytics for NBA, NFL, NHL, and MLB props. Try it for free, no credit card is required.
Published
Edited
May 18, 2021
1 fork
1 star
chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
const bar = svg.append("g").attr("fill", color).selectAll("rect").data(data);
bar
.join("rect")
.attr("x", (d, i) => x(i))
.attr("y", d => y(d.minutes))
.attr("height", d => y(0) - y(d.minutes))
.attr("width", x.bandwidth());
bar
.join("text")
.text((d) => `${d.homeOrAway === 'home' ? '' : '@'}${d.oppTeam}`)
.attr("x", function (d, i) {
return x(i) + x.bandwidth() / 2;
})
.attr("y", (d) => height - margin.bottom - 15)
.attr("fill", "white")
.attr("font-size", "18px")
.style("text-anchor", "middle");
bar
.join("text")
.text((d) => d.minutes)
.attr("x", function (d, i) {
return x(i) + x.bandwidth() / 2;
})
.attr("y", (d) => y(d.minutes) + 25)
.attr("fill", "white")
.attr("font-size", "18px")
.style("text-anchor", "middle");
svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis);
return svg.node();
}
xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x).tickFormat(i => new Date(data[i].game).toISOString().slice(0, 10)).tickSizeOuter(0))
yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y).ticks(null, data.format))
.call(g => g.select(".domain").remove())
.call(g => g.append("text")
.attr("x", -margin.left)
.attr("y", 10)
.attr("fill", "currentColor")
.attr("text-anchor", "start")
.text(data.y))
color = "#10B981"
height = 500
margin = ({top: 30, right: 0, bottom: 30, left: 40})
d3 = require("d3@6")
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.
