huembelin · March 10, 2017 18:45
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset="utf-8">

 <script src="https://d3js.org/d3.v4.min.js"></script>
 <style type="text/css">
 
 body {
  font: 8px sans-serif;
 }

 h1 {
  font: 20px sans-serif;
  text-anchor: middle;
 }

 div {
  display: inline-block;
  stroke-dasharray: 1;
 }

 div.tooltip {
  position: absolute;
  text-align: center;
  width: 60px;
  height: 28px;
  padding: 2px;
  font: 12px sans-serif;
  background: white;
  border: 0px;
  border-radius: 8px;
  pointer-events: none;
 }

 svg {
  border: 1px;
 }

 .team-path {
  fill: none;
  stroke: #000;
 }

 .div-label {
  font: 18px sans-serif;
 }

 .axis line {
  stroke: gray;
  stroke-dasharray: 2;
 }

 .average-line {
  fill: none;
  stroke: #FFAE42;
  stroke-width: 2;
  stroke-dasharray: 2, 2;
 }

 .voronoiGroup path {
  fill: none;
  stroke: blue;
  pointer-events: all;
 }


 </style>

 <body>
 <h1 align="center"> Soccer team ranking over time measured with UEFA-Coefficient by country and EU-Membership</h1>
 </body>
 <h2 align="center"> Season: 2007/2008 - 2016/2017 </h2>
 <p align="center" id=intro> <i>Source:</i> <a href="http://kassiesa.home.xs4all.nl/bert/uefa/data/index.html">UEFA European Cup Coefficients Database</a>

 <script>
 String.prototype.capitalizeFirstLetter = function() {
    return this.charAt(0).toUpperCase() + this.slice(1);
 }


 var margin = {top: 20, right: 20, bottom: 20, left: 40};
 var width = 250 - margin.left - margin.right,
    height = 160 - margin.top - margin.bottom;


 var parseDate = d3.utcParse("%Y");

 var xScale = d3.scaleUtc()
    .range([0, width]);

 var yScale = d3.scaleLinear()
    .range([height, 0])
    .domain([0,40])

 var xAxis = d3.axisBottom(xScale)
    .tickSize(-height)

 var yAxis = d3.axisLeft(yScale)
    .tickSize(-width)


 d3.csv("uefaData.csv", function(error, data) {

  if (error) return console.warn(error);

  data.forEach(function(d) {
    d.ranking = +d.ranking;
    d.year = parseDate(d.season);
  });

  xScale.domain(d3.extent(data, function(d) { return d.year; }))

  var sortOrder = ["EG-12","EU-28","Non-EU-Member"]


  var nestedUefaData = d3.nest()
      .key(function(d) { return d.eu })
            .sortKeys(function(a, b) { return sortOrder.indexOf(a) > sortOrder.indexOf(b)})
      .key(function(d) { return d.country })
      .key(function(d) { return d.team })
      .entries(data);

 var euDiv = d3.select("body")
      .selectAll(".eu-div")
      .data(nestedUefaData)
    .enter().append("div")
      .attr("class", "eu-div")

 euDiv.append("h1")
  .text(function(d) { return d.key  })
  .attr("align", "center")

 countrySVG  = euDiv.selectAll(".country-svg")
    .data(function(d) { return d.values })
  .enter().append("svg")
      .attr("class", "division-svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
    .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")")

 var div = d3.select("body").append("div")
    .attr("class", "tooltip")
    .style("opacity", 0);   

 countrySVG.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis);

 countrySVG.append("g")
  .attr("class", "y axis")
  .call(yAxis);

 countrySVG.append("text")
  .attr("class", "div-label")
  .text(function(d) { return d.key.capitalizeFirstLetter() })
  .attr("dy",-2)
  .attr("dx", (width-margin.left)/2)

 var lineGenerator = d3.line()
    .x(function(d) { return xScale(d.year) })
    .y(function(d) { return yScale(d.ranking) })

 var teamPath = countrySVG.selectAll(".team-path")
    .data(function(d) { return d.values })
  .enter().append("path")
    .attr("class", "team-path")
    .style("stroke-dasharray", function(d,i) { return i })
    .attr("d", function(d) { return lineGenerator(d.values) })


 /////////////
 // Voronoi



 var voronoi = d3.voronoi()
    .x(function(d) { return xScale(d.year); })
    .y(function(d) { return yScale(d.ranking); })
    .extent([[-margin.left, -margin.top], [width + margin.right, height + margin.bottom]]);



 /////// Version A
 // var voronoiGroup = countrySVG.selectAll(".voronoiGroup")
 //       .data(function(d) { return d.values })
 //     .enter().append("path")
 //       .attr("class", "voronoiGroup")
 //       .attr("d", function(d) { return voronoi(d.values) })
 //       .on("mouseover", mouseover)
 //       .on("mouseout", mouseout);


 ////////// Version B
 var voronoiGroup = countrySVG.selectAll(".team-path")
       .data(voronoi.polygons(d3.merge(nestedUefaData.map(function(d) { return d.values; }))))
    .enter().append("path")
      .attr("class", "voronoiGroup")
      .attr("d", function(d) { return d ? "M" + d.join("L") + "Z" : null; })
      .on("mouseover", mouseover)
      .on("mouseout", mouseout);


 /// Version C
 // var voronoiGroup = countrySVG.selectAll(".team-path")
 //        .data(voronoi.polygons(d3.merge(nestedUefaData.map(function(d) { return d.values function(d) { return d.values;} }))))
 //     .enter().append("path")
 //       .attr("class", "voronoiGroup")
 //       .attr("d", function(d) { return d ? "M" + d.join("L") + "Z" : null; })
 //       .on("mouseover", mouseover)
 //       .on("mouseout", mouseout);

 //////// Version D
  // var voronoiGroup = countrySVG.append("g")
  //     .attr("class", "voronoiGroup");

  // voronoiGroup.selectAll(".team-path")
  //   .data(voronoi.polygons(d3.merge(data.map(function(d) { return d.values; }))))
  //   .enter().append("path")
  //     .attr("d", function(d) { return d ? "M" + d.join("L") + "Z" : null; })
  //     .on("mouseover", mouseover)
  //     .on("mouseout", mouseout);





 function mouseover (d) {
       
       div.transition()
         .duration(200)
         .style("opacity", .9);

       div.html(d.key)
         .style("left", (d3.event.pageX) + "px")
         .style("top", (d3.event.pageY - 28) + "px");
       }



 function mouseout (d) {
       
  div.transition()
         .duration(500)
         .style("opacity", 0);

       }


 var ticks = d3.selectAll(".x .tick text");

 ticks.attr("class", function(d,i){
 if(i%2 != 0) d3.select(this).remove();
 });

 ticks.attr("dy",10)





 });


 </script>
diff --git a/uefaData.csv b/uefaData.csv
	<!DOCTYPE html>
	<meta charset="utf-8">

	<script src="https://d3js.org/d3.v4.min.js"></script>
	<style type="text/css">

	body {
	font: 8px sans-serif;
	}

	h1 {
	font: 20px sans-serif;
	text-anchor: middle;
	}

	div {
	display: inline-block;
	stroke-dasharray: 1;
	}

	div.tooltip {
	position: absolute;
	text-align: center;
	width: 60px;
	height: 28px;
	padding: 2px;
	font: 12px sans-serif;
	background: white;
	border: 0px;
	border-radius: 8px;
	pointer-events: none;
	}

	svg {
	border: 1px;
	}

	.team-path {
	fill: none;
	stroke: #000;
	}

	.div-label {
	font: 18px sans-serif;
	}

	.axis line {
	stroke: gray;
	stroke-dasharray: 2;
	}

	.average-line {
	fill: none;
	stroke: #FFAE42;
	stroke-width: 2;
	stroke-dasharray: 2, 2;
	}

	.voronoiGroup path {
	fill: none;
	stroke: blue;
	pointer-events: all;
	}


	</style>

	<body>
	<h1 align="center"> Soccer team ranking over time measured with UEFA-Coefficient by country and EU-Membership</h1>
	</body>
	<h2 align="center"> Season: 2007/2008 - 2016/2017 </h2>
	<p align="center" id=intro> <i>Source:</i> <a href="http://kassiesa.home.xs4all.nl/bert/uefa/data/index.html">UEFA European Cup Coefficients Database</a>

	<script>
	String.prototype.capitalizeFirstLetter = function() {
	return this.charAt(0).toUpperCase() + this.slice(1);
	}


	var margin = {top: 20, right: 20, bottom: 20, left: 40};
	var width = 250 - margin.left - margin.right,
	height = 160 - margin.top - margin.bottom;


	var parseDate = d3.utcParse("%Y");

	var xScale = d3.scaleUtc()
	.range([0, width]);

	var yScale = d3.scaleLinear()
	.range([height, 0])
	.domain([0,40])

	var xAxis = d3.axisBottom(xScale)
	.tickSize(-height)

	var yAxis = d3.axisLeft(yScale)
	.tickSize(-width)


	d3.csv("uefaData.csv", function(error, data) {

	if (error) return console.warn(error);

	data.forEach(function(d) {
	d.ranking = +d.ranking;
	d.year = parseDate(d.season);
	});

	xScale.domain(d3.extent(data, function(d) { return d.year; }))

	var sortOrder = ["EG-12","EU-28","Non-EU-Member"]


	var nestedUefaData = d3.nest()
	.key(function(d) { return d.eu })
	.sortKeys(function(a, b) { return sortOrder.indexOf(a) > sortOrder.indexOf(b)})
	.key(function(d) { return d.country })
	.key(function(d) { return d.team })
	.entries(data);

	var euDiv = d3.select("body")
	.selectAll(".eu-div")
	.data(nestedUefaData)
	.enter().append("div")
	.attr("class", "eu-div")

	euDiv.append("h1")
	.text(function(d) { return d.key })
	.attr("align", "center")

	countrySVG = euDiv.selectAll(".country-svg")
	.data(function(d) { return d.values })
	.enter().append("svg")
	.attr("class", "division-svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")")

	var div = d3.select("body").append("div")
	.attr("class", "tooltip")
	.style("opacity", 0);

	countrySVG.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis);

	countrySVG.append("g")
	.attr("class", "y axis")
	.call(yAxis);

	countrySVG.append("text")
	.attr("class", "div-label")
	.text(function(d) { return d.key.capitalizeFirstLetter() })
	.attr("dy",-2)
	.attr("dx", (width-margin.left)/2)

	var lineGenerator = d3.line()
	.x(function(d) { return xScale(d.year) })
	.y(function(d) { return yScale(d.ranking) })

	var teamPath = countrySVG.selectAll(".team-path")
	.data(function(d) { return d.values })
	.enter().append("path")
	.attr("class", "team-path")
	.style("stroke-dasharray", function(d,i) { return i })
	.attr("d", function(d) { return lineGenerator(d.values) })


	/////////////
	// Voronoi



	var voronoi = d3.voronoi()
	.x(function(d) { return xScale(d.year); })
	.y(function(d) { return yScale(d.ranking); })
	.extent([[-margin.left, -margin.top], [width + margin.right, height + margin.bottom]]);



	/////// Version A
	// var voronoiGroup = countrySVG.selectAll(".voronoiGroup")
	// .data(function(d) { return d.values })
	// .enter().append("path")
	// .attr("class", "voronoiGroup")
	// .attr("d", function(d) { return voronoi(d.values) })
	// .on("mouseover", mouseover)
	// .on("mouseout", mouseout);


	////////// Version B
	var voronoiGroup = countrySVG.selectAll(".team-path")
	.data(voronoi.polygons(d3.merge(nestedUefaData.map(function(d) { return d.values; }))))
	.enter().append("path")
	.attr("class", "voronoiGroup")
	.attr("d", function(d) { return d ? "M" + d.join("L") + "Z" : null; })
	.on("mouseover", mouseover)
	.on("mouseout", mouseout);


	/// Version C
	// var voronoiGroup = countrySVG.selectAll(".team-path")
	// .data(voronoi.polygons(d3.merge(nestedUefaData.map(function(d) { return d.values function(d) { return d.values;} }))))
	// .enter().append("path")
	// .attr("class", "voronoiGroup")
	// .attr("d", function(d) { return d ? "M" + d.join("L") + "Z" : null; })
	// .on("mouseover", mouseover)
	// .on("mouseout", mouseout);

	//////// Version D
	// var voronoiGroup = countrySVG.append("g")
	// .attr("class", "voronoiGroup");

	// voronoiGroup.selectAll(".team-path")
	// .data(voronoi.polygons(d3.merge(data.map(function(d) { return d.values; }))))
	// .enter().append("path")
	// .attr("d", function(d) { return d ? "M" + d.join("L") + "Z" : null; })
	// .on("mouseover", mouseover)
	// .on("mouseout", mouseout);





	function mouseover (d) {

	div.transition()
	.duration(200)
	.style("opacity", .9);

	div.html(d.key)
	.style("left", (d3.event.pageX) + "px")
	.style("top", (d3.event.pageY - 28) + "px");
	}



	function mouseout (d) {

	div.transition()
	.duration(500)
	.style("opacity", 0);

	}


	var ticks = d3.selectAll(".x .tick text");

	ticks.attr("class", function(d,i){
	if(i%2 != 0) d3.select(this).remove();
	});

	ticks.attr("dy",10)





	});


	</script>