Premier League Goals 2012-13

README.md

This chart displays the goals scored in the 2012-13 Barclays Premier League season. Click on a team to view their goalscorers on the season. Return to the league view by clicking in the blank space near the chart

Made by Johannes Harkins using d3

dta.json

[{"club":"Manchester United","gf":86, "col":"red", "players": [
{"name":"Robin Van Persie","g":26},
{"name":"Wayne Rooney","g":12},
{"name":"Javier Hernandez","g":10},
{"name":"Shinji Kagawa","g":6},
{"name":"Patrice Evra","g":4},
{"name":"Rafael","g":3},
{"name":"Jonny Evans","g":3},
{"name":"Tom Cleverley","g":2},
{"name":"Ryan Giggs","g":2},
{"name":"Alexander Buttner","g":2},
{"name":"Michael Carrick","g":1},
{"name":"Rio Ferdinand","g":1},
{"name":"Danny Welbeck","g":1},
{"name":"Darren Fletcher","g":1},
{"name":"Nemanja Vidic","g":1},
{"name":"Antonio Valencia","g":1},
{"name":"Nick Powell","g":1},
{"name":"Nani","g":1},
{"name":"Anderson","g":1},
{"name":"Paul Scholes","g":1}
]},
{"club":"Chelsea","gf":75, "col":"blue", "players":  [
{"name":"Frank Lampard","g":15},
{"name":"Juan Mata","g":12},
{"name":"Eden Hazard","g":9},
{"name":"Fernando Torres","g":8},
{"name":"Ramires","g":5},
{"name":"Branislav Ivanovic","g":5},
{"name":"Oscar","g":4},
{"name":"John Terry","g":4},
{"name":"David Luiz","g":2},
{"name":"Gary Cahill","g":2},
{"name":"Demba Ba","g":2},
{"name":"Victor Moses","g":1},
{"name":"Ashley Cole","g":1},
{"name":"Daniel Sturridge","g":1},
{"name":"Marko Marin","g":1}
]},
{"club":"Arsenal","gf":72, "col":"red","players":[
{"name":"Theo Walcott","g":14},
{"name":"Santi Cazorla","g":12},
{"name":"Olivier Giroud","g":11},
{"name":"Lukas Podolski","g":11},
{"name":"Mikel Arteta","g":6},
{"name":"Gervinho","g":5},
{"name":"Per Mertesacker","g":3},
{"name":"Laurent Koscielny","g":2},
{"name":"Tomas Rosicky","g":2},
{"name":"Nacho Monreal","g":1},
{"name":"Aaron Ramsey","g":1},
{"name":"Alex Oxlade-Chamberlain","g":1}
]},
{"club":"Liverpool","gf":71, "col":"red", "players": [
{"name":"Luis Suarez","g":23},
{"name":"Daniel Sturridge","g":10},
{"name":"Steven Gerrard","g":9},
{"name":"Jordan Henderson","g":5},
{"name":"Daniel Agger","g":3},
{"name":"Philippe Coutinho","g":3},
{"name":"Stewart Downing","g":3},
{"name":"Raheem Sterling","g":2},
{"name":"Jose Enrique","g":2},
{"name":"Martin Skrtel","g":2},
{"name":"Glen Johnson","g":1},
{"name":"Jonjo Shelvey","g":1},
{"name":"Nuri Sahin","g":1},
{"name":"Fabio Borini","g":1},
{"name":"Joe Cole","g":1}
]},
{"club":"Manchester City","gf":66,"col":"deepskyblue", "players": [
{"name":"Edin Dzeko","g":14},
{"name":"Sergio Aguero","g":12},
{"name":"Carlos Tevez","g":11},
{"name":"Yaya Toure","g":6},
{"name":"David Silva","g":4},
{"name":"James Milner","g":4},
{"name":"Jack Rodwell","g":2},
{"name":"Pablo Zabaleta","g":2},
{"name":"Samir Nasri","g":2},
{"name":"Javi Garcia","g":2},
{"name":"Vincent Kompany","g":1},
{"name":"Gareth Barry","g":1},
{"name":"Mario Balotelli","g":1},
{"name":"Joleon Lescott","g":1},
{"name":"Aleksandar Kolarov","g":1}
]},
{"club":"Tottenham Hotspur","gf":66,"col":"navy", "players":[
{"name":"Gareth Bale","g":21},
{"name":"Jermain Defoe","g":11},
{"name":"Clint Dempsey","g":7},
{"name":"Emmanuel Adebayor","g":5},
{"name":"Aaron Lennon","g":4},
{"name":"Jan Vertonghen","g":4},
{"name":"Gylfi Sigurdsson","g":3},
{"name":"Steven Caulker","g":2},
{"name":"Michael Dawson","g":1},
{"name":"Moussa Dembele","g":1},
{"name":"William Gallas","g":1},
{"name":"Benoit Assou-Ekotto","g":1},
{"name":"Sandro","g":1}
]},
{"club":"Everton","gf":55,"col":"blue", "players": [
{"name":"Marouane Fellaini","g":11},
{"name":"Nikica Jelavic","g":7},
{"name":"Victor Anichebe","g":6},
{"name":"Steven Pienaar","g":6},
{"name":"Kevin Mirallas","g":6},
{"name":"Leon Osman","g":5},
{"name":"Leighton Baines","g":5},
{"name":"Steven Naismith","g":4},
{"name":"Phil Jagielka","g":2},
{"name":"Darron Gibson","g":1}
]},
{"club":"West Bromwich Albion","gf":53,"col":"navy", "players":[
{"name":"Romelu Lukaku","g":17},
{"name":"Shane Long","g":8},
{"name":"James Morrison","g":5},
{"name":"Peter Odemwingie","g":5},
{"name":"Zoltan Gera","g":4},
{"name":"Gareth McAuley","g":3},
{"name":"Marc-Antoine Fortune","g":2},
{"name":"Chris Brunt","g":2},
{"name":"Youssouf Mulumbu","g":2},
{"name":"Graham Dorrans","g":1},
{"name":"Billy Jones","g":1}
]},
{"club":"Fulham","gf":50,"col":"black", "players": [
{"name":"Dimitar Berbatov","g":15},
{"name":"Bryan Ruiz","g":5},
{"name":"Mladen Petric","g":5},
{"name":"Steve Sidwell","g":4},
{"name":"Alex Kacaniklic","g":4},
{"name":"Damien Duff","g":3},
{"name":"Hugo Rodallega","g":3},
{"name":"Chris Baird","g":2},
{"name":"Giorgos Karagounis","g":1},
{"name":"Kieran Richardson","g":1},
{"name":"Sascha Riether","g":1},
{"name":"Urby Emanuelson","g":1}
]},
{"club":"Southampton","gf":49,"col":"red", "players": [
{"name":"Rickie Lambert","g":15},
{"name":"Jason Puncheon","g":6},
{"name":"Jay Rodriguez","g":6},
{"name":"Morgan Schneiderlin","g":5},
{"name":"Gaston Ramirez","g":5},
{"name":"Adam Lallana","g":3},
{"name":"Jose Fonte","g":2},
{"name":"Steven Davis","g":2},
{"name":"Nathaniel Clyne","g":1},
{"name":"Daniel Fox","g":1}
]},
{"club":"Swansea City","gf":47,"col":"black", "players": [
{"name":"Michu","g":18},
{"name":"Jonathan De Guzman","g":5},
{"name":"Wayne Routledge","g":5},
{"name":"Angel Rangel","g":3},
{"name":"Luke Moore","g":3},
{"name":"Nathan Dyer","g":3},
{"name":"Pablo Hernandez","g":3},
{"name":"Danny Graham","g":3},
{"name":"Itay Shechter","g":1},
{"name":"Scott Sinclair","g":1},
{"name":"Dwight Tiendalli","g":1},
{"name":"Ben Davies","g":1}
]},
{"club":"Aston Villa","gf":47,"col":"maroon", "players":[
{"name":"Christian Benteke","g":19},
{"name":"Gabriel Agbonlahor","g":9},
{"name":"Andreas Weimann","g":7},
{"name":"Darren Bent","g":3},
{"name":"Ron Vlaar","g":2},
{"name":"Matthew Lowton","g":2},
{"name":"Charles N'Zogbia","g":2},
{"name":"Brett Holman","g":1},
{"name":"Karim El Ahmadi","g":1}
]},
{"club":"Wigan Athletic","gf":47,"col":"royalblue", "players": [
{"name":"Arouna Kone","g":11},
{"name":"Shaun Maloney","g":6},
{"name":"Franco Di Santo","g":5},
{"name":"Emmerson Boyce","g":4},
{"name":"Jordi Gomez","g":3},
{"name":"James McCarthy","g":3},
{"name":"James McArthur","g":3},
{"name":"Ivan Ramis","g":2},
{"name":"Callum McManaman","g":2},
{"name":"Ben Watson","g":1},
{"name":"Jean Beausejour","g":1},
{"name":"Maynor Figueroa","g":1},
{"name":"Gary Caldwell","g":1},
{"name":"Roger Espinoza","g":1},
{"name":"Angelo Henriquez","g":1}
]},
{"club":"West Ham United","gf":45,"col":"maroon", "players":[
{"name":"Kevin Nolan","g":10},
{"name":"Andy Carroll","g":7},
{"name":"Mark Noble","g":4},
{"name":"Mohamed Diame","g":3},
{"name":"Ricardo Vaz Te","g":3},
{"name":"Joey O'Brien","g":2},
{"name":"Joe Cole","g":2},
{"name":"Matthew Jarvis","g":2},
{"name":"Modibo Maiga","g":2},
{"name":"Carlton Cole","g":2},
{"name":"Jack Collison","g":2},
{"name":"Gary O'Neil","g":1},
{"name":"Winston Reid","g":1},
{"name":"James Tomkins","g":1},
{"name":"Matthew Taylor","g":1}
]},
{"club":"Newcastle United","gf":45,"col":"black","players": [
{"name":"Demba Ba","g":13},
{"name":"Papiss Cisse","g":8},
{"name":"Yohan Cabaye","g":6},
{"name":"Hatem Ben Arfa","g":4},
{"name":"Yoan Gouffran","g":3},
{"name":"Moussa Sissoko","g":3},
{"name":"James Perch","g":1},
{"name":"Shola Ameobi","g":1},
{"name":"Jonas Gutierrez","g":1},
{"name":"Sylvain Marveaux","g":1},
{"name":"Davide Santon","g":1},
{"name":"Gael Bigirimana","g":1}
]},
{"club":"Reading","gf":43,"col":"blue","players": [
{"name":"Adam Le Fondre","g":12},
{"name":"Hal Robson-Kanu","g":7},
{"name":"Pavel Pogrebnyak","g":5},
{"name":"Jimmy Kebe","g":5},
{"name":"Garath McCleary","g":3},
{"name":"Sean Morrison","g":2},
{"name":"Noel Hunt","g":2},
{"name":"Kaspars Gorkss","g":1},
{"name":"Danny Guthrie","g":1},
{"name":"Jem Karacan","g":1},
{"name":"Mikele Leigertwood","g":1},
{"name":"Adrian Mariappa","g":1}
]},
{"club":"Norwich City","gf":41,"col":"green", "players":[
{"name":"Grant Holt","g":8},
{"name":"Robert Snodgrass","g":6},
{"name":"Anthony Pilkington","g":5},
{"name":"Sebastien Bassong","g":3},
{"name":"Russell Martin","g":3},
{"name":"Wesley Hoolahan","g":3},
{"name":"Michael Turner","g":3},
{"name":"Jonathan Howson","g":2},
{"name":"Bradley Johnson","g":1},
{"name":"Steve Morison","g":1},
{"name":"Kei Kamara","g":1},
{"name":"Elliott Bennett","g":1},
{"name":"Ryan Bennett","g":1},
{"name":"Simeon Jackson","g":1},
{"name":"Steven Whittaker","g":1}
]},
{"club":"Sunderland","gf":41,"col":"red", "players": [
{"name":"Steven Fletcher","g":11},
{"name":"Stephane Sessegnon","g":7},
{"name":"Craig Gardner","g":6},
{"name":"Adam Johnson","g":5},
{"name":"John O'Shea","g":2},
{"name":"James McClean","g":2},
{"name":"David Vaughan","g":1},
{"name":"Fraizer Campbell","g":1},
{"name":"Carlos Cuellar","g":1},
{"name":"Danny Rose","g":1},
{"name":"Sebastian Larsson","g":1},
{"name":"Phil Bardsley","g":1}
]},
{"club":"Stoke City","gf":34,"col":"red", "players": [
{"name":"Jonathan Walters","g":8},
{"name":"Peter Crouch","g":7},
{"name":"Charlie Adam","g":3},
{"name":"Cameron Jerome","g":3},
{"name":"Kenwyne Jones","g":3},
{"name":"Michael Kightly","g":3},
{"name":"Steven Nzonzi","g":1},
{"name":"Matthew Upson","g":1},
{"name":"Michael Owen","g":1},
{"name":"Ryan Shawcross","g":1},
{"name":"Dean Whitehead","g":1},
{"name":"Robert Huth","g":1}
]},
{"club":"Queens Park Rangers","gf":30,"col":"blue","players":[
{"name":"Loïc Remy","g":6},
{"name":"Adel Taarabt","g":5},
{"name":"Bobby Zamora","g":4},
{"name":"Djibril Cisse","g":3},
{"name":"Jamie Mackie","g":2},
{"name":"Andros Townsend","g":2},
{"name":"Jermaine Jenas","g":2},
{"name":"Esteban Granero","g":1},
{"name":"Junior Hoilett","g":1},
{"name":"Ryan Nelsen","g":1},
{"name":"Shaun Wright-Phillips","g":1},
{"name":"Jay Bothroyd","g":1}
]}]

index.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Premier League Goals 2013</title>
      <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
		<style type="text/css">
		h1, h5 {font-family: sans-serif}
		#footer {
 clear: both;
 position: ;
 z-index: 10;
 height: 3em;
 margin-top: -3em;
}
		</style>
	</head>		
<body>
<div id = "container">
    <script type="text/javascript">	
    var w = 500
    var h = 400
    var barh = 20
    var m = [0,0,0,500]
    var tdata;
    var cdata;
    var dataset;
    var subdata;
    var teamcol;
    var state = 0;
//define svg function
     var svg = d3.select("body")
         .append("svg")
         .attr("width", w + m[3])
         .attr("height", h); 
   //place background rect
   svg.append("rect")
      .attr("class", "background")
      .attr("width", w + m[3])
      .attr("height",h)
      .attr("fill", "white")
      .on("click", function() {
        return up(tdata)
      });
d3.json("dta.json", function(error, data) {
	if (error) {  //If error is not null, something went wrong.
          console.log(error);  
	}
	else {
	tdata = data;
	console.log(tdata);    
    up(tdata);
   // set state to 0
 var state = 0;
    

   // place first bars
   // return up(tdata);
   }
 });  
 var up = function (dta) { 
if (state === 1) {
}
else {
if (state === 2) {
	console.log("Hello");
 //remove text
	d3.selectAll("text")
	  .remove();
// remove lines
	d3.selectAll("line")
	  .remove();  	
 	// remove rectangles
   svg.selectAll(".b2")
	  .attr("fill", function() {
	  	return teamcol;
	  }) 
	  .on("mouseover", function() {
	  	})
	  .transition()
	  .duration(1000) 
	  .delay( function(d,i){
	  	 return i * (1000 / subdata.length);
	  	})
	  .attr("y", -50) // want to have bars exit differently?	
	  .remove(); 
 	} 	
      //key fns
    var club = function(d) {
    return d.club;
    };
    var gf = function(d) {
      return d.gf
    };
    var col = function(d) {
      return d.col
    };
    
    var players = function(d) {
      return d.players 
    };

    dataset = dta;
    // set scales 
    var yScale = d3.scale.ordinal()
							.domain(d3.range(dataset.length))
							.rangeRoundBands([0, h], 0.05);						
    var xScale = d3.scale.linear()
							.domain([0, d3.max(dataset, function(d) {
							return d.gf;	
							})])
							.range([0, w]);
  // adding rectangles							
    svg.selectAll("g")
       .data(dataset, club)
       .enter()
       .append("rect")
       .attr("class", "b1")
       .attr("id", function(d) {
 	           	return d.club;
 	           })
 	   .attr("ccol", function(d) {
 	   	      return d.col;
 	   })       
   
 	   .attr("width", function(d) {
			   	 return xScale(d.gf)
			   })
       .attr("height", yScale.rangeBand())
	   .attr("fill", "steelblue")
	   .attr("opacity", 0.85);
     if (state === 0) {
       d3.selectAll(".b1")
         .attr("y", function(d, i) {
          return yScale(i);
         }); 
     } else {
       d3.selectAll(".b1")
         .attr("y", h + 50)
         .transition()
         .duration(2000)
         .delay(function(d, i) {
              return 1000 + (i+1)*(1000 /tdata.length);
            }) 
         .attr("y", function(d, i) {
          return yScale(i);
         });   ;
     }
	  

    // generate text			   
    svg.selectAll("text")
       .data(dataset, club)
       .enter()
       .append("text")
       .text(function(d) {
			   		return d.gf;
	   })
			   .attr("text-anchor", "end")
     		   .attr("x", function(d) {
		   		return xScale(d.gf) - 5;
			   })
			   .attr("font-family", "sans-serif")
			   .attr("font-size", "11px")
			   .attr("fill", "gainsboro");
	   if (state == 2) {
	   svg.selectAll("text").transition()
	   .duration(3500)
	   .delay(3500)   
	   .attr("y", function(d, i) {
			   		return yScale(i) + (yScale.rangeBand() / 2) + 2;
			   });
	   }
	   else {
	  svg.selectAll("text").attr("y", function(d, i) {
			   		return yScale(i) + (yScale.rangeBand() / 2) + 2;
			   });
	   }				   		   
	// mouse over interaction
       d3.selectAll(".b1")	   
	     .on("mouseover", function(d, i) { 	
      	      // dim other bars
       	         d3.selectAll(".b1")
       	           .filter(function(datum, j) {
       	         	return i != j;
       	     	})
       	     .style("opacity", .2);
       	     // dim other text
       	     d3.selectAll("text")
       	       .filter(function(datum, j) {
       	     	return i != j;
       	     	})
       	     .style("opacity", .35);
       	     //add line
       	     var xPlace = parseInt(d3.select(this).attr("width")) + 5;
       	     var yStart = parseInt(d3.select(this).attr("y")) + yScale.rangeBand() / 2;
       	     var clubnm = d3.select(this).attr("id"); 
       	    svg.append("line")
          	   .attr("id", "cpointer")
               .attr("x1", xPlace)
               .attr("x2", xPlace)
               .attr("y1", yStart)
               .attr("y2", yStart)
               .attr("stroke", "black") 
               .transition()
               .duration(250)
               .attr("x2", 700);
               //add club name
            svg.append("text")
               .attr("id","clubname")
               .transition()
               .delay(250)
               .text(clubnm)
               .attr("x", 700 + 5)
               .attr("y", yStart + 3.5)
               .attr("font-family", "sans-serif")
			   .attr("font-size", "11px")
               .attr("fill", "black");   
              })
          // mouse out    
        .on("mouseout", function(d) {
              d3.selectAll(".b1")
                .style("opacity", 0.85)
                .attr("fill", "steelblue");
              d3.selectAll("text")
                .style("opacity", 1); 
              d3.select("#cpointer").remove(); 
              d3.select("#clubname").remove();
              })
         // click     
       .on("click", function(d) {
           	subdata = d.players;
           	console.log(subdata);
           	teamcol = d.col;
           	down(subdata);
           });
       // set state to 1
   state = 1;          
 }};                   
var down = function (subdataset)  {
  state = 2;
  console.log(teamcol);
  var yScale = d3.scale.ordinal()
              .domain(d3.range(subdataset.length))
              .rangeRoundBands([0, h], 0.05);           
  var xScale = d3.scale.linear()
              .domain([0, d3.max(subdataset, function(d) {
              return d.g;  
              })])
              .range([0, w]);
  var name = function(d) {
    return d.name;
  };
  var g = function(d) {
    return d.g;
  };
   // remove text   
  d3.selectAll("text")
    .remove();
   // remove lines   
  d3.selectAll("line")
    .remove();
  // transition out old bars
  svg.selectAll(".b1")
     .on("mouseover", function() {
     })
     .transition()
     .duration(1000)
     .delay(function(d,i) {
      return (1000/tdata.length) * (i + 1)
     })
     .attr("y", -50)
     .remove();
 // add rectangles
  svg.selectAll("g")
    .data(subdataset, name)
    .enter()
    .append("rect")
    .attr("class","b2")
    .attr("id", function(d) {
      return d.name
    })
    .attr("y", 450)
    .attr("width", function(d) {
      return xScale(d.g);
    })
    .attr("height", function() {
      return yScale.rangeBand();
    })
    .attr("fill", function() {
    	return teamcol;
    })
    .attr("opacity", 0.85)
    .transition()
    .duration(2000)
    .delay( function(d,i) {
      return 1000 + ((i+1) * (1000/subdataset.length));
    })
    .attr("y", function(d, i) {
          return yScale(i);
    });
    
    // generate text
    svg.selectAll("text")
       .data(subdataset)
       .enter()
       .append("text")
       .text(function(d) {
			   		return d.g;
	   })
			   .attr("text-anchor", "end")
     		   .attr("x", function(d) {
		   		return xScale(d.g) - 5;
			   })
			   .attr("font-family", "sans-serif")
			   .attr("font-size", "11px")
			   .attr("fill", "gainsboro")
	   .transition()
	   .duration(3500)
	   .delay(3500)   
	   .attr("y", function(d, i) {
			   		return yScale(i) + (yScale.rangeBand() / 2) + 2;
			   });
	// mouse over interaction
       d3.selectAll(".b2")	   
	     .on("mouseover", function(d, i) { 	
      	      // dim other bars
       	         d3.selectAll(".b2")
       	           .filter(function(datum, j) {
       	         	return i != j;
       	     	})
       	     .style("opacity", .2);
       	     // dim other text
       	     d3.selectAll("text")
       	       .filter(function(datum, j) {
       	     	return i != j;
       	     	})
       	     .style("opacity", .35);
       	     //add line
       	     var xPlace = parseInt(d3.select(this).attr("width")) + 5;
       	     var yStart = parseInt(d3.select(this).attr("y")) + yScale.rangeBand() / 2;
       	     var playernm = d3.select(this).attr("id"); 
       	    svg.append("line")
          	   .attr("id", "playerpointer")
               .attr("x1", xPlace)
               .attr("x2", xPlace)
               .attr("y1", yStart)
               .attr("y2", yStart)
               .attr("stroke", "black") 
               .transition()
               .duration(250)
               .attr("x2", 700);
               //add club name
            svg.append("text")
               .attr("id","playername")
               .transition()
               .delay(250)
               .text(playernm)
               .attr("x", 700 + 5)
               .attr("y", yStart + 3.5)
               .attr("font-family", "sans-serif")
			   .attr("font-size", "11px")
               .attr("fill", "black");   
              })
          // mouse out    
        .on("mouseout", function(d) {
              d3.selectAll(".b2")
                .style("opacity", 0.85)
                .attr("fill", function() {
                return teamcol;
                });
              d3.selectAll("text")
                .style("opacity", 1); 
              d3.select("#playerpointer").remove(); 
              d3.select("#playername").remove();
              })		    

};		   	       
 
 

	</script></div>
	</body>
</html>