Old school D3 from simpler times

All examples By author By category About

tomshanley

Full window Github gist

Makeover Monday - EPL

Built with blockbuilder.org and textures.js

<!DOCTYPE html>
<head>
  <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://d3js.org/d3-scale-chromatic.v0.3.min.js"></script>
  <script src="textures.js"></script>
     
  <style>
    body { margin:50;top:50;right:50;bottom:50;left:50; font-family: monospace }
    .reference-line { stroke: lightgrey }
    .leader-line { stroke: grey }
    circle { stroke: grey; stroke-width: 2px }
    .team-name-bkgd { stroke: white; stroke-width: 5px; fill: white; font-size: 12px }
    .arrow > text { 
      text-anchor: end;
      fill: grey 
    }
    .arrow > line {
      stroke: grey
    }
  </style>
</head>

<body>
  <h1>Record year for managerial changes in the Premiership</h1>
  <h2>With Arsene Wenger resigning at the end of the 2017/18 season, a record 10 changes occurred. Will Conte fall next?</h2>
  <p>The tolerance for underperforming Premiership teams is low. By comparing the teams whose manager resigned or was sacked with The Guardian's prediction for league placings with a team's final position in the league, we can see the managerial changes occured where those teams underperformed.</p>
 <p>Or, maybe in Arsenal's case, where the tolerance for predicted mediocrity had run dry.</p>
  <div id="legend"></div>
  <div id="chart"></div>
  <p>Sources: League predictions from <a href="https://amp.theguardian.com/football/2018/may/15/premier-league-2017-18-season-predictions-versus-reality">The Guardian</a>. Part of the <a href="https://www.makeovermonday.co.uk/data/">Makeover Monday project</a>.
  <script>
    const width = 500
    const height = width
    const margin = {"top": 10, "bottom": 20, "left": 100, "right": 50}
    
    const green = "rgb(160,232,91)"
    const purple = "rgb(162,31,161)"

const scaleDomain = [20, 1]  // 20 is low, 1 is top
    
    var svg = d3.select("#chart").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
    
    var xScale = d3.scaleLinear()
      .domain(scaleDomain)
      .range([0, width])

var yScale = d3.scaleLinear()
      .domain(scaleDomain)
      .range([height, 0])
    
    var yLeft = d3.axisLeft(yScale).ticks(20)
    var yRight = d3.axisRight(yScale).ticks(20)
    
    var radius = d3.scaleSqrt()
    	.range([5, 20])
    
    var textureAbove = textures.lines()
  		.size(8)
  		.strokeWidth(3)
    	.orientation("6/8")
    	.stroke(green)
  		.background("white");
    
    var textureBelow = textures.lines()
  		.size(8)
  		.strokeWidth(3)
    	.orientation("6/8")
    	.stroke(purple)
  		.background("white");
    
    svg.call(textureAbove);
    svg.call(textureBelow);
    
    // var colour = d3.scaleSequential(d3.interpolateCool)
    
    var g = svg.append("g")
    	.attr("transform", "translate(" + margin.left +"," + margin.top + ")")
    
    let axisLeft = g.append("g")
        .attr("class", "axis axis--y")
        .call(yLeft);
    
     let axisRight = g.append("g")
        .attr("class", "axis axis--y")
     		.attr("transform", "translate(" + width + ",0)")
        .call(yRight);
    
    d3.selectAll(".domain").remove()
    axisRight.selectAll(".tick").selectAll("line").remove()
    
    axisLeft.selectAll(".tick").selectAll("line")
    	.attr("x2", width)
    	.style("stroke", "lightgrey")
    	.style("stroke-dasharray", "2,2")
    
    d3.selectAll(".tick").selectAll("text")
    	.style("fill", "grey")
    
    g.append("line")
    	.attr("class", "reference-line")
    	.attr("x1", 0)
    	.attr("y1", height)
    	.attr("x2", width)
    	.attr("y2", 0) 
    
    d3.csv("epl.csv", convertTextToNumbers, function (error, data) {
			
      data.sort(function(a, b){ 
        return b.differenceAbs - a.differenceAbs 
      })
      
      radius.domain(d3.extent(data, function(d) { return d.differenceAbs; }))
			
      let team = g.selectAll(".team")
      	.data(data)
      	.enter()
      	.append("g")
      	.attr("transform", function(d){
          return "translate(" + xScale(d.predicted) +"," + yScale(d.actual) + ")"
        })
    	
      team.append("line")
      	.attr("class", "leader-line")
      	.attr("x1", 0)
        .attr("y1", 0)
        .attr("x2", 0)
        .attr("y2", function(d){ return yScale(d.predicted) - yScale(d.actual) })
      
      team.append("circle")
      	.attr("r", function(d){ return radius(0) - 0.5 })
      	.attr("cy", function(d){ return yScale(d.predicted) - yScale(d.actual) })
      	.style("fill", "white")
      
      team.append("circle")
      	.attr("r", function(d){ return radius(Math.abs(d.difference)) })
      	.style("fill", function(d){ 
        	return fillColour(d)
        })
      	.style("stroke", function(d){ 
        	return strokeColour(d)
        })
      
      team.append("text")
      	.attr("class", "team-name-bkgd")
      	
      team.append("text")
      	.attr("class", "team-name")
      	
      team.selectAll("text")
        .text(function(d){ return d.team })
      	.attr("text-anchor", function(d){ 
            return d.above ? "end" : "start"
          })
        .attr("x", function(d){ 
        		let r = radius(d.differenceAbs)
            return d.above ? -(r + 3) : r + 3
          })
      	.attr("y", "0.35em")
      
      appendLegend()
      appendArrow()
      
    })
    
    function appendArrow() {
      let arrowG = svg.append("g")
      	.attr("class", "arrow")
      
      /*let arrowLength = height * 0.7
      
      let startX = margin.left / 2
      let startY = (height - arrowLength) / 2
      let endY = startY + arrowLength
      
      arrowG.append("line")
      	.attr("x1", startX)
        .attr("y1", startY)
        .attr("x2", startX)
        .attr("y2", endY)
      	.style("stroke", "grey")
      
      arrowG.append("line")
      	.attr("x1", startX)
        .attr("y1", startY)
        .attr("x2", startX - 5)
        .attr("y2", startY + 5)
      	.style("stroke", "grey")
      
      arrowG.append("line")
      	.attr("x1", startX)
        .attr("y1", startY)
        .attr("x2", startX + 5)
        .attr("y2", startY + 5)
      	.style("stroke", "grey")*/
      
      let arrowTextG = arrowG.append("g")
      	.attr("transform", "translate(" +  (margin.left - 25) +",0)")
      	.attr("class", "arrow")
      
      let tStart = 14
      let tGap = 15
      
      arrowTextG.append("text")
      	.text("League")
      	.attr("y", tStart)
      
      arrowTextG.append("text")
      	.text("Position")
      	.attr("y", tStart + (1 * tGap))
      
      arrowTextG.append("text")
      	.text("Predicted")
      	.attr("y", tStart + (2 * tGap))
      
      arrowTextG.append("text")
      	.text("v")
      	.attr("y", tStart + (3 * tGap))
      
      arrowTextG.append("text")
      	.text("Actual")
      	.attr("y", tStart + (4 * tGap))
      
    }

function appendLegend() {
      
      let legendHeight = 120
      let legendCentre = width/2
      
      var items = [ 
        { "difference": 1, mrgChange: false },
        { "difference": 1, mrgChange: true },
        { "difference": -1, mrgChange: true },
        { "difference": -1, mrgChange: false },
        { "difference": 0, mrgChange: false },
      ]
      
      let legend = d3.select("#legend").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", legendHeight + margin.top + 0)
        .append("g")
        .attr("transform", "translate(" + margin.left +"," + margin.top + ")")
      
      var legendItems = legend.selectAll(".legend-item")
      	.data(items)
      	.enter()
      	.append("g")
      	.attr("transform", function(d, i){
          let x = 5
          let y = (i * 25) + 10
          return "translate(" + x + "," + y + ")"
        })
      	
      legendItems.append("circle")
      	.attr("r", function(d){ return radius(Math.abs(d.difference)) })
      	.style("fill", function(d){ 
        	return d.difference == 0 ? "white" :fillColour(d)
        })
      	.style("stroke", function(d){ 
        	return d.difference == 0 ? "grey" : strokeColour(d)
        })
      
      legendItems.append("text")
      	.text(function(d){
        	if (d.difference == 0 ) {
            return "The Guardian's predicted position"
          }
        	else {
            let arrow = "->"
        	let m = d.mrgChange ? "Manager sacked/resigned" : "Kept manager"
          let p = d.difference > 0 ? "Performed as expected or better" : "Under performed"
        	return p + " " + arrow + " " + m
          }
        	
      	})
      	.attr("x", 25) 
      	.attr("y", "0.35em")
      
    }
  
    function convertTextToNumbers(d) {
      d.predicted = +d.predicted;
      d.actual = +d.actual;
      d.difference = +d.difference;
      d.differenceAbs = Math.abs(d.difference);
      d.above = d.difference >= 0 ? true : false 
      d.mrgChange = d.mrgChange == "true" ? true : false
      return d
    }
    
    function fillColour(d) {
      return d.mrgChange ? (d.difference >= 0 ? textureAbove.url() : textureBelow.url()) : "white"
    }
    
    function strokeColour(d) {
      return d.difference >= 0 ? green : purple 
    }
    
  </script>
</body>

https://d3js.org/d3.v4.min.js

https://d3js.org/d3-scale-chromatic.v0.3.min.js