Mathare United FC

Ranking History

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
})

Max Elo: 1143 (2008-11-18)

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)