import {Plot} from "@mkfreeman/plot-tooltip"
dat1 = transpose(elo_data)
format = d3.timeParse("%Y-%m-%d");
Plot.plot({
y: {
grid: false,
domain: d3.extent(dat1,d => d.elo),
label:"↑ Elo"
},
marks: [
Plot.line(dat1, {x: d => format(d.date), y: "elo",
title: (d) => `${d.elo} points`
})
],
style: {
background: "#383A3F",
color: "#F6B352",
fill: "#D3D3D3"
},
height: 600,
width: 950,
marginLeft: 50,
marginRight: 50,
marginTop: 50,
marginBottom: 50,
insetTop: 0,
insetBottom: 0,
insetLeft: 0,
insetRight: 0
})
Orlando Pirates
Ranking History
Max Elo: 1226 (2024-10-29)
Manager Performances
dat2 = transpose(man_data)
function BarChart(data, {} = {}) {
const margin = {top: 40, right: 80, bottom: 0, left: 80};
const width = 850 - margin.left - margin.right;
const height = 500 - margin.top - margin.bottom;
// append the svg object to the body of the page
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [0, 0, width+100, height+70])
.attr("style", "max-width: 100%; height: auto; height: intrinsic;background-color:#383A3F");
var g = svg.append("g")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
// translate this svg element to leave some margin.
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var cfg = {
labelMargin: 5,
xAxisMargin: 10,
}
var max = d3.max(data, function(d) { return d.total; });
// x scale
var x = d3.scaleLinear()
.domain(d3.extent(data, function(d) { return d.total; }))
.range([0, width]);
// colour scale
var colour = d3.scaleSequential(d3.interpolateRdBu)
.domain([-max, max]);
// y scale
var y = d3.scaleBand()
.domain(data.map(function(d) { return d.manager; }))
.range([height, 0])
.padding(0.1);
//y axis
var yAxis = g.append("g")
.attr("class", "y-axis")
.attr("transform", "translate(" + x(0) + ",0)")
.append("line")
.attr("y1", 0)
.attr("y2", height);
// x axis
var xAxis = g.append("g")
.attr("class", "x-axis")
.attr("transform", "translate(0," + (height + cfg.xAxisMargin) + ")")
.attr("color","white")
.call(d3.axisBottom(x).tickSizeOuter(0));
// draw bars
var bars = g.append("g")
.attr("class", "bars")
bars.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x", function(d) {
//return x(Math.min(0, d.total));
return x(0);
})
.attr("y", function(d) { return y(d.manager); })
.attr("height", y.bandwidth())
.attr("width", function(d) {
//return Math.abs(x(d.total) - x(0))
return 0;
})
.style("fill", function(d) {
return colour(d.total)
});
// add labels
var labels = g.append("g")
.attr("class", "labels");
labels.selectAll("text")
.data(data)
.enter().append("text")
.attr("class", "bar-label")
.attr("x", x(0))
.attr("y", function(d) { return y(d.manager)})
.attr("dx", function(d) {
return d.total < 0 ? cfg.labelMargin : -cfg.labelMargin;
})
.attr("dy", y.bandwidth())
.attr("text-anchor", function(d) {
return d.total < 0 ? "start" : "end";
})
.text(function(d) { return d.manager })
.style("fill", "white")
.style("font-size", "10px");
// animation
g.selectAll("rect")
.transition()
.duration(800)
.attr("x", function(d) {
return x(Math.min(0, d.total));
})
.attr("width", function(d) {
return Math.abs(x(d.total) - x(0))
})
.delay(function(d,i){return(i*100)})
return svg.node();
}
BarChart(dat2)
(Manager Performance is calculated as the difference between the Ranking points at the start and the end of the contract)