EPL_2018_Predictions_v_Reality

<!DOCTYPE html>

<head>
  <meta charset="utf-8">
  <title>CSS Example</title>
  <link href="https://fonts.googleapis.com/css?family=Passion+One" rel="stylesheet">

</head>

<body>

<div id="buttons">
    <button id="Actual">Actual</button>
    <button id="Predicted">Predicted</button>
  </div>

<text class="my-text" x="330" y="20">EPL PREDICTIONS VERSUS REALITY</text>

</svg>

//next our graph
    var g = svg.append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.csv("EPL 2017-18.csv", function(d) {
        d.Actual_Finish = +d.Actual_Finish;
        d.Predicted_Finish = +d.Predicted_Finish;
        return d;
      }, function(error, data)
      {

if (error) throw error;

data = data;

//define our x and y axis scales and variables, remembering we have 2 x 					variables 
        x = d3.scaleLinear().rangeRound([800, 0])
          //experiment with the max numbers to bring the x scale within the margin
          .domain([0,d3.max(data, function(d) {
            return d.Actual_Finish;
          })]);
      
        y = d3.scaleBand().rangeRound([0, height])
          .padding(0.5).domain(data.map(function(d) {
            return d.Team;
          }));

//append x axis to svg
        g.append("g")
          .style("font", "14px arial") //font and size of x axis labels
          .attr("class", "axisx")
          .call(d3.axisBottom(x).ticks(21))
          .attr("transform", "translate(0," + height + ")")
          .call(d3.axisBottom(x))
          .append("text")
          .attr("x", 450) //position of x axis label: x co-ordinate
          .attr("y", 35) //position of y axis label: y co-ordinate
          .attr("dx", "1.0em") //also position of X axis label
          .attr("text-anchor", "middle")
          .text("League Position");

//append y axis to svg
        g.append("g") //append y axis to svg
          .style("font", "14px arial") //font and size of y axis labels
          .attr("class", "axisy")
          .call(d3.axisLeft(y).ticks(20)) //no. of ticks on y axis
          .append("text")
          .attr("transform", "rotate(-360)") //rotate the axis label text by -90
          .attr("y", -20) //position of y axis label
          .attr("dy", "1.0em") //sets the unit amount the y axis label moves above
          .attr("text-anchor", "end")
          .text("Team");

var bars = g.selectAll('.bar')
          .data(data)
          .enter().append("rect")
          .attr("class", "bar")
          .attr("x", 0)                           
          .attr("height", y.bandwidth())
        	.style("fill", function(d) {            // adding colour coding for league position
            if (d.Actual_Finish == 1) {return "green"}  
            else if (d.Actual_Finish == 6) {return "green"} 
						else if (d.Actual_Finish == 2) {return "pink"} 
            else if (d.Actual_Finish == 3) {return "pink"} 
            else if (d.Actual_Finish == 4) {return "pink"} 
            else if (d.Actual_Finish == 7) {return "pink"} 
            else if (d.Actual_Finish == 10) {return "pink"} 
            else if (d.Actual_Finish == 11) {return "pink"} 
            else if (d.Actual_Finish == 13) {return "pink"} 
            else if (d.Actual_Finish == 14) {return "pink"} 
            else if (d.Actual_Finish == 15) {return "pink"} 
            else if (d.Actual_Finish == 16) {return "pink"} 
            else    { return "red" }          
        ;});

//attach Premier league logo
      
var img = g.append("svg:image")
    .attr("xlink:href", "https://vignette.wikia.nocookie.net/logopedia/images/6/65/Premier_League_%28outline%29.svg/revision/latest?cb=20160813163637")
    .attr("width", 200)
    .attr("height", 200)
    .attr("x", 600)
    .attr("y",163);

//add labels to our bar chart
       g.selectAll(".text")        
  .data(data)
  .enter()
  .append("text")
  .attr("class","label")
  .attr("x", (function(d) { return x(d.Actual_Finish); }  ))
  .attr("y", function(d) { return y(d.Team) - 5; })
  .attr("dy", "1.25em")
  .text(function(d) { return d.Actual_Finish; })
   .style('fill', 'White');

render('Actual_Finish')

function render(which) {
          bars
            .transition()
            .attr("y", function(d) {
              return y(d.Team);
            })
            .attr("width", function(d) {
              return x(d[which])
            })
        }

d3.select("#Actual")
          .on("click", function(d, i) {
            render('Actual_Finish')
          });
      
      
        d3.select("#Predicted")
          .on("click", function(d, i) {
            render('Predicted_Finish')
          });

});
  </script>

</body>

</html>

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