RTMs.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
weights = [
{name: "OPEN", weight: 2},
{name: "YAC", weight: 1},
{name: "CATCH", weight: 1},
]
width = 280
height = width
size = width / 1.6
xOffset = width / 2 + d3.mean(d3.extent(axes.map((d) => d.scale(1)[0])))
yOffset = height / 2 - d3.mean(d3.extent(axes.map(d => d.scale(1)[1])))
players = [...new Set(data.map(d => d.Player))].sort()
disabledPlayers = players.filter(
(player) =>
!data
.filter((d) => d.Season === year)
.map((d) => d.Player)
.includes(player)
)
years = d3.extent(data, d => d.Season)
sequentialScale = d3.scaleSequential([years[0] - 1, years[1]], d3.interpolateBlues)
radius = d3.scaleLinear([0, Math.max(...weights.map(d => d.weight))], [0, size])
axes = weights.map((axis, i) => {
const rScale = d3.scaleLinear([0, 1], [0, radius(axis.weight)]);
const angle = i * (2 / 3) * Math.PI - Math.PI / 2;
return {
...axis,
angle,
scale: (d) => [rScale(d) * Math.cos(angle), rScale(d) * Math.sin(angle)]
};
})
colors = d3.schemeCategory10; //["#AB323D", "#62AFE7", "#D6B729"]
grouped = d3.group(data, d => d.Player)
render = (data, {title, color: colorKey, sequential}) => {
if (sequential) {
data = data.sort((a, b) => d3.ascending(a[colorKey], b[colorKey]));
}
const points = data.map((d) => ({
...d,
points: axes.map((axis) => axis.scale(d[axis.name] / 100))
}));
const color = sequential ? sequentialScale : d3.scaleOrdinal(data.map(d => d[colorKey]), colors);
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.attr("font-family", "sans-serif")
.attr("font-size", 10);
const g = svg.append("g")
.attr("transform", `translate(${xOffset}, ${yOffset})`);
const ticks = d3.ticks(0, 1, 5);
const grid = g.append("g")
.attr("stroke", "#ccc")
.attr("stroke-dasharray", "2,2")
.attr("fill", "none")
grid.selectAll("path.gridTriangle")
.data(ticks)
.join("path")
.attr("class", "gridTriangle")
.attr("d", n => `M ${axes.map(axis => axis.scale(n))} Z`);
grid.selectAll("path.gridAxis")
.data(axes)
.join("path")
.attr("class", "gridAxis")
.attr("d", axis => `M ${axis.scale(ticks[1])} ${axis.scale(ticks[ticks.length - 1])}`)
g.selectAll("text.axisLabel")
.data(axes)
.join("text")
.attr("class", "axisLabel")
.attr("transform", axis => {
const [x, y] = axis.scale(1);
const dr = 15;
const dx = dr * Math.cos(axis.angle);
const dy = dr * Math.sin(axis.angle);
return `translate(${x + dx}, ${y + dy})`;
})
.attr("text-anchor", "middle")
.text(d => d.name.toUpperCase())
.attr("dy", "0.32em")
g.selectAll("g.points")
.data(points)
.join("g")
.attr("class", "points")
.call(g => g.append("path")
.attr("d", d => `M ${d.points} Z`)
.attr("stroke", d => color(d[colorKey]))
.attr("stroke-width", 2)
.attr("fill", "none"))
.call(g => g.selectAll("circle")
.data(d => d.points.map(pt => ({...d, pt})))
.join("circle")
.attr("cx", d => d.pt[0])
.attr("cy", d => d.pt[1])
.attr("fill", d => color(d[colorKey]))
.attr("r", 3));
svg.append("text")
.attr("dx", "1em")
.attr("dy", "0.32em")
.attr("x", -5)
.attr("y", 10)
.attr("font-weight", "bold")
.text(title);
svg.selectAll("g.legend")
.data(points)
.join("g")
.attr("class", "legend")
.attr("transform", (d, i) => `translate(10, ${10 + (i + 1) * 15})`)
.call(g => g.append("circle").attr("r", 5).attr("fill", d => color(d[colorKey])))
.call(g => g.append("text").attr("dx", "1em").attr("dy", "0.32em").text(d => d[colorKey]))
return svg.node();
}
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.
