CS Engineer, PhD student in sports analytics, Data geek
Plot.plot({
width: 800, // ⬅️ make it wider here (default is ~640)
y: { domain: [110, 170], reverse: true, label: "Avg. player ranking" },
x: {
type: "point",
label: "",
domain: [1, 2, 3, 4, 5], // Use the bins
ticks: [1, 2, 3, 4, 5], // Specify the bins
tickFormat: d => binLabels[d] // Map bin values to custom labels
},
color: {
legend: true,
type: "categorical"
},
marks: [
Plot.ruleY([0]),
// Lines use the color scale
Plot.lineY(data, {
x: "bin",
y: "value",
stroke: "setting",
marker: true
}),
// Annotation for weak teams (bin 1)
Plot.tip(
[`Average player ranking decreases for weak teams with a goalscore feature`],
{x: 1, y: 160, dx: 60, dy: -3, anchor: "bottom"}
),
// Annotation for strong teams (bin 5)
Plot.tip(
[`Average player ranking increases for strong teams with a goalscorer feature`],
{x: 5, y: 120, dx: -80, dy: -3, anchor: "right"}
),
]
});
binLabels = ({
1: "Weak teams",
2: "Medium teams",
3: "Strong teams",
4: "Very Strong teams",
5: "Top teams"
});
data = [
{
bin: 1,
setting: "With goalscore feature",
value: 163.8,
},
{
bin: 2,
setting: "With goalscore feature",
value: 163.2,
},
{
bin: 3,
setting: "With goalscore feature",
value: 159.7,
},
{
bin: 4,
setting: "With goalscore feature",
value: 141.3,
},
{
bin: 5,
setting: "With goalscore feature",
value: 108.8,
},
{
bin: 1,
setting: "No goalscore feature",
value: 162.3,
},
{
bin: 2,
setting: "No goalscore feature",
value: 161.7,
},
{
bin: 3,
setting: "No goalscore feature",
value: 159.6,
},
{
bin: 4,
setting: "No goalscore feature",
value: 142.6,
},
{
bin: 5,
setting: "No goalscore feature",
value: 110.5,
},
]
// Group data by bin and compare values
areaData = Array.from(
d3.rollup(
data,
v => {
const values = Object.fromEntries(v.map(d => [d.setting, d.value]));
const withGS = values["With goalscore feature"];
const noGS = values["No goalscore feature"];
return {
bin: v[0].bin,
y1: withGS,
y2: noGS,
fill: withGS > noGS ? "green" : "red" // Hard-coded color values
};
},
d => d.bin
).values()
);
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.
