Skip to content

Instantly share code, notes, and snippets.

@naxxateux
Last active December 19, 2015 18:19
Show Gist options
  • Save naxxateux/5997976 to your computer and use it in GitHub Desktop.
Save naxxateux/5997976 to your computer and use it in GitHub Desktop.
Bundesliga 1953—2013 visualization
1963—64 1964—65 1965—66 1966—67 1967—68 1968—69 1969—70 1970—71 1971—72 1972—73 1973—74 1974—75 1975—76 1976—77 1977—78 1978—79 1979—80 1980—81 1981—82 1982—83 1983—84 1984—85 1985—86 1986—87 1987—88 1988—89 1989—90 1990—91 1991—92 1992—93 1993—94 1994—95 1995—96 1996—97 1997—98 1998—99 1999—00 2000—01 2001—02 2002—03 2003—04 2004—05 2005—06 2006—07 2007—08 2008—09 2009—10 2010—11 2011—12 2012—13
1. FC Köln 1 2 5 7 4 13 4 11 4 2 5 5 4 5 1 6 5 8 2 5 6 3 13 10 3 2 2 7 4 12 11 10 12 10 17 0 0 10 17 0 18 0 17 0 0 12 13 10 17 0 43 2
MSV Duisburg 2 7 8 11 7 12 15 7 14 10 15 14 10 9 6 13 14 12 18 0 0 0 0 0 0 0 0 0 19 0 9 17 0 9 8 8 18 0 0 0 0 0 18 0 18 0 0 0 0 0 28 0
Eintracht Frankfurt 3 8 7 4 6 8 8 15 5 8 4 3 9 4 7 5 9 5 8 10 16 12 15 15 9 16 3 4 3 3 5 9 17 0 0 15 14 17 0 0 16 0 14 14 9 13 10 17 0 6 44 0
Borussia Dortmund 4 3 2 3 14 16 5 13 17 0 0 0 0 8 11 12 6 7 6 7 13 14 16 4 13 7 4 10 2 4 4 1 1 3 10 4 11 3 1 3 6 7 7 9 13 6 5 1 1 2 46 5
VfB Stuttgart 5 12 11 12 8 5 7 12 8 6 9 16 0 0 4 2 3 3 9 3 1 10 5 12 4 5 6 6 1 7 7 12 10 4 4 11 8 15 8 2 4 5 9 1 6 3 6 12 6 12 48 3
Hamburger SV 6 11 9 14 13 6 6 5 10 14 12 4 2 6 10 1 2 2 1 1 2 5 7 2 6 4 11 5 12 11 12 13 5 13 9 7 3 13 11 4 8 8 3 7 4 5 7 8 15 7 50 3
TSV 1860 München 7 4 1 2 12 10 17 0 0 0 0 0 0 0 16 0 13 16 0 0 0 0 0 0 0 0 0 0 0 0 0 14 8 7 13 9 4 11 9 10 17 0 0 0 0 0 0 0 0 0 20 1
FC Schalke 04 8 16 0 15 15 7 9 6 2 15 7 7 6 2 9 15 8 17 0 16 0 8 10 13 18 0 0 0 11 10 14 11 3 12 5 10 13 2 5 7 7 2 4 2 3 8 2 14 3 4 44 0
1. FC Nürnberg 9 6 6 10 1 17 0 0 0 0 0 0 0 0 0 17 0 14 13 14 18 0 12 9 5 14 8 15 7 13 16 0 0 0 0 16 0 0 15 17 0 14 8 6 17 0 16 6 10 10 31 1
Werder Bremen 10 1 4 16 2 9 11 10 11 11 11 15 13 11 15 11 17 0 5 2 5 2 2 5 1 3 7 3 9 1 8 2 9 8 7 13 9 7 6 6 1 3 2 3 2 10 3 13 9 14 49 4
Eintracht Braunschweig 11 9 10 1 9 4 16 4 12 17 0 9 5 3 13 9 18 0 11 15 9 18 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 20 1
1. FC Kaiserslautern 12 13 15 5 16 15 10 8 7 9 6 13 7 13 8 3 3 4 4 6 12 11 11 7 14 9 12 1 5 8 2 4 16 0 1 5 5 8 7 14 15 12 16 0 0 0 0 7 18 0 44 2
Karlsruher SC 13 15 16 13 18 0 0 0 0 0 0 0 15 16 0 0 0 10 14 17 0 17 0 0 15 11 10 13 8 6 6 8 7 6 16 0 0 0 0 0 0 0 0 0 11 17 0 0 0 0 24 0
Hertha BSC 14 14 0 0 0 14 3 3 6 13 8 2 11 10 3 14 16 0 0 18 0 0 0 0 0 0 0 18 0 0 0 0 0 0 11 3 6 5 4 5 12 4 6 10 10 4 18 0 16 0 30 0
Preußen Münster 15 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0
1. FC Saarbrücken 16 0 0 0 0 0 0 0 0 0 0 0 0 14 17 0 0 0 0 0 0 0 17 0 0 0 0 0 0 18 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 5 0
Hannover 96 0 5 12 9 10 11 13 9 16 16 18 0 16 0 0 0 0 0 0 0 0 0 18 0 10 18 0 0 0 0 0 0 0 0 0 0 0 0 0 11 14 10 12 11 8 11 15 4 7 9 25 0
Borussia Neunkirchen 0 10 17 0 17 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 3 0
FC Bayern München 0 0 3 6 5 1 2 2 1 1 1 10 3 7 12 4 1 1 3 4 4 1 1 1 2 1 1 2 10 2 1 6 2 1 2 1 1 1 3 1 2 1 1 4 1 2 1 3 2 1 48 22
Borussia Mönchengladbach 0 0 13 8 3 3 1 1 3 5 2 1 1 1 2 10 7 6 7 12 3 4 4 3 7 6 15 9 13 9 10 5 4 11 15 18 0 0 12 12 11 15 10 18 0 15 12 16 4 8 45 5
SC Tasmania 1900 Berlin 0 0 18 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0
Fortuna Düsseldorf 0 0 0 17 0 0 0 0 13 3 3 6 12 12 5 7 11 13 15 9 14 15 14 17 0 0 9 12 20 0 0 0 13 16 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 17 23 0
Rot-Weiss Essen 0 0 0 18 0 0 12 18 0 0 13 12 8 18 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 7 0
Alemannia Aachen 0 0 0 0 11 2 18 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 17 0 0 0 0 0 0 4 0
Kickers Offenbach 0 0 0 0 0 18 0 17 0 7 10 8 17 0 0 0 0 0 0 0 17 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 7 0
Rot-Weiß Oberhausen 0 0 0 0 0 0 14 16 15 18 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 4 0
Arminia Bielefeld 0 0 0 0 0 0 0 14 18 0 0 0 0 0 0 16 0 15 12 8 8 16 0 0 0 0 0 0 0 0 0 0 0 14 18 0 17 0 0 16 0 13 13 12 15 18 0 0 0 0 17 0
VfL Bochum 0 0 0 0 0 0 0 0 9 12 14 11 14 15 14 8 10 9 10 13 15 9 9 11 12 15 16 14 15 16 0 16 0 5 12 17 0 18 0 9 5 16 0 8 12 14 17 0 0 0 34 0
Wuppertaler SV 0 0 0 0 0 0 0 0 0 4 16 18 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 3 0
SC Fortuna Köln 0 0 0 0 0 0 0 0 0 0 17 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0
Tennis Borussia Berlin 0 0 0 0 0 0 0 0 0 0 0 17 0 17 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 2 0
KFC Uerdingen 05 0 0 0 0 0 0 0 0 0 0 0 0 18 0 0 0 15 18 0 0 10 7 3 8 11 13 14 17 0 17 0 15 18 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 14 0
FC St. Pauli 0 0 0 0 0 0 0 0 0 0 0 0 0 0 18 0 0 0 0 0 0 0 0 0 0 10 13 16 0 0 0 0 15 18 0 0 0 0 18 0 0 0 0 0 0 0 0 18 0 0 8 0
SV Darmstadt 98 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 18 0 0 17 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 2 0
Bayer 04 Leverkusen 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 12 11 16 11 7 13 6 6 8 8 5 8 6 5 3 7 14 2 3 2 2 4 2 15 3 6 5 5 7 9 4 2 5 3 34 0
SV Waldhof Mannheim 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 11 6 8 14 16 12 17 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 7 0
FC 08 Homburg 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 16 17 0 18 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 3 0
Blau-Weiß 90 Berlin 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 18 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0
Stuttgarter Kickers 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 17 0 0 17 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 2 0
SG Wattenscheid 09 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 11 16 14 17 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 4 0
Dynamo Dresden 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 14 15 13 18 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 4 0
Hansa Rostock 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 18 0 0 0 6 15 6 14 15 12 14 13 9 17 0 0 17 0 0 0 0 0 12 0
SC Freiburg 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 15 3 11 17 0 12 12 6 16 0 13 18 0 0 0 0 14 9 12 5 14 0
VfB Leipzig 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 18 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0
VfL Wolfsburg 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 14 6 7 9 10 8 10 9 15 15 5 1 8 15 8 11 16 1
SpVgg Unterhaching 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 10 16 0 0 0 0 0 0 0 0 0 0 0 0 2 0
SSV Ulm 1846 Fußball 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 16 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0
Energie Cottbus 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 14 13 18 0 0 0 13 14 16 0 0 0 0 6 0
1. FSV Mainz 05 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 11 11 16 0 0 9 5 13 13 7 0
TSG 1899 Hoffenheim 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 7 11 11 11 16 5 0
FC Augsburg 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 14 15 2 0
SpVgg Greuther Fürth 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 18 1 0
<!DOCTYPE html>
<meta charset="utf-8">
<html lang="en">
<head>
<style>
text.team {
font-size: 10px;
font-family: Arial, sans-serif;
fill: #000;
dominant-baseline: central;
}
#story {
font-size: 11px;
font-family: Arial, sans-serif;
margin-top: 50px;
}
button {
font-size: 11px;
font-family: Arial, sans-serif;
}
#legend {
font-size: 10px;
font-family: Arial, sans-serif;
margin-top: 20px;
}
#d3link {
font-size: 10px;
font-family: Arial, sans-serif;
margin-top: 50px;
}
a {
font-size: 11px;
font-family: Arial, sans-serif;
}
#header {
font-size: 32px;
font-family: Arial, sans-serif;
margin-left: 50px;
}
</style>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript" src="http://d3js.org/queue.v1.min.js"></script>
<script type="text/javascript" src="http://d3js.org/topojson.v0.min.js"></script>
<title>Bundesliga 1963—2013</title>
</head>
<body>
<table>
<tr>
<td valign="bottom" align="left">
<div id="header">
<p>Bundesliga 1963—2013</p>
</div>
</td>
</tr>
<tr>
<td>
<div id="chart"></div>
</td>
<td valign="top" align="left" width="200px">
<div id="story">
<p>This interactive feature visualizes the 50 year history of the Bundesliga — professional association football league of Germany. Each sector represents the team season result with colour (see the legend below). Hover the sector with the cursor to see detailed info. You can change the teams sorting type by clicking on the buttons below:</p>
<p><button type="button" id="button1">First appearance</button></p>
<p><button type="button" id="button2">Team name</button></p>
<p><button type="button" id="button3">Number of appearances</button></p>
<p><button type="button" id="button4">Number of titles</button></p>
</div>
<div id="legend"></div
<div>
<p id="d3link">Built with <a href="http://d3js.org/">d3.js</a></p>
</div>
</td>
</tr>
</table>
<script type="text/javascript">
var margin = {top: 50, right: 50, bottom: 50, left: 50},
teamNameFieldWidth = 150,
rectWidth = 13,
rectHeight = 21,
rectHorizontalPadding = 0,
rectVerticalPadding = 1,
rectColors = ["#f2f2f2", "#153D32", "#1C5041", "#226351", "#287660", "#2E8A70", "#349D80", "#3AB190", "#43C29E", "#55C8A8", "#68CFB2"],
championRadius = 2,
championColor = "#ffd219",
currentRectColor = "red",
legendWidth = 200;
// Gets specified column from an array
function getCol(matrix, col) {
var column = [];
for (var i = 0; i < matrix.length; i++){
column.push(matrix[i][col]);
}
return column;
}
d3.text("bundesliga.csv", function(error, unparsedData) {
if (error) {
console.log(error);
} else {
// Draw legend
var legend = d3.select("#legend").append("svg")
.attr("width", legendWidth)
.attr("height", rectColors.length*rectHeight)
.append("g")
.attr("transform", "translate(0, 0)");
legend.append("rect")
.attr("x", 0)
.attr("y", 0)
.attr("width", rectWidth)
.attr("height", rectHeight)
.attr("fill", rectColors[1]);
legend.append("circle")
.attr("cx", rectWidth/2)
.attr("cy", rectHeight/2)
.attr("r", championRadius)
.attr("fill", championColor);
legend.append("rect")
.attr("x", rectWidth)
.attr("y", rectHeight/2)
.attr("width", rectWidth)
.attr("height", 0.5)
.attr("fill", "#000");
legend.append("rect")
.attr("x", rectWidth)
.attr("y", rectHeight + rectHeight/2)
.attr("width", rectWidth)
.attr("height", 0.5)
.attr("fill", "#000");
legend.append("rect")
.attr("x", rectWidth)
.attr("y", (rectColors.length - 2)*rectHeight + rectHeight/2)
.attr("width", rectWidth)
.attr("height", 0.5)
.attr("fill", "#000");
legend.append("text")
.attr("class", "team")
.attr("x", rectWidth*2 + 3)
.attr("y", rectHeight/2)
.text("Champion");
legend.append("text")
.attr("class", "team")
.attr("x", rectWidth*2 + 3)
.attr("y", rectHeight + rectHeight/2)
.text("2");
legend.append("text")
.attr("class", "team")
.attr("x", rectWidth*2 + 3)
.attr("y", (rectColors.length - 2)*rectHeight + rectHeight/2)
.text("20");
for (var i = 1; i < rectColors.length; i++) {
legend.append("rect")
.attr("x", 0)
.attr("y", rectHeight*i)
.attr("width", rectWidth)
.attr("height", rectHeight)
.attr("fill", rectColors[i]);
}
legend.append("rect")
.attr("x", 0)
.attr("y", rectHeight*(rectColors.length-1))
.attr("width", rectWidth)
.attr("height", rectHeight)
.attr("fill", rectColors[0]);
legend.append("rect")
.attr("x", rectWidth)
.attr("y", (rectColors.length - 1)*rectHeight + rectHeight/2)
.attr("width", rectWidth)
.attr("height", 0.5)
.attr("fill", "#000");
legend.append("text")
.attr("class", "team")
.attr("x", rectWidth*2 + 3)
.attr("y", (rectColors.length - 1)*rectHeight + rectHeight/2)
.text("Did not participate");
// We need to make an array from .csv file
var Rows = d3.csv.parseRows(unparsedData);
// Draw initial svg & container
var svg = d3.select("#chart").append("svg")
.attr("width", teamNameFieldWidth + (Rows[0].length - 3)*(rectWidth + rectHorizontalPadding) - rectHorizontalPadding + margin.left + margin.right)
.attr("height", (Rows.length - 1)*(rectHeight + rectVerticalPadding) - rectVerticalPadding + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// Fill svg with data
for (var i = 1; i < Rows.length; i++) {
// Draw container with specific id
var row = svg.append("g")
.attr("id", "teamRow" + i)
.attr("transform", "translate(0, " + (i - 1)*(rectHeight + rectVerticalPadding) + ")");
// Draw team name
row.append("text")
.attr("class", "team")
.attr("x", 0)
.attr("y", rectHeight/2)
.text(Rows[i][0]);
// Now draw season rectangles
for (var j = 1; j < Rows[i].length - 2; j++) {
var x = teamNameFieldWidth + (rectWidth + rectHorizontalPadding)*(j - 1);
var y = 0;
var color = rectColors[Math.round(Rows[i][j]/2)];
row.append("rect")
.attr("x", x)
.attr("y", y)
.attr("width", rectWidth)
.attr("height", rectHeight)
.attr("fill", color)
.on("mouseover", function(){
d3.select(this)
.attr("fill-opacity", 0.4);
})
.on("mouseout", function(){
d3.select(this)
.attr("fill-opacity", 1);
})
.append("title")
.text( function(d) {
return (Rows[i][j] == 0 ? (Rows[0][j] + " season — did not participate") : (Rows[0][j] + " season, place: " + Rows[i][j]));
});
// Champions mark
if (Rows[i][j] == 1) {
row.append("circle")
.attr("cx", x + rectWidth/2)
.attr("cy", y + rectHeight/2)
.attr("r", championRadius)
.attr("fill", championColor);
}
// Add interactivity to rectangles
}
}
var teamNames = getCol(Rows, 0);
var sortedRows = Rows;
var sortingColIndex = Rows[0].length - 2;
// Get sorted column (by team names)
sortedRows.sort(function(a, b) {
return (a[0] < b[0] ? -1 : (a[0] > b[0] ? 1 : 0));
});
var sortedByTeamNames = getCol(sortedRows, 0);
sortedByTeamNames.splice(sortedByTeamNames.indexOf(""), 1);
// Get sorted column (by appearances)
sortedRows.sort(function(a, b) {
if (a[sortingColIndex] === b[sortingColIndex]) { return (a[0] < b[0] ? -1 : (a[0] > b[0] ? 1 : 0)); }
return (+a[sortingColIndex] > +b[sortingColIndex] ? -1 : (+a[sortingColIndex] < +b[sortingColIndex] ? 1 : 0));
});
var sortedByAppearances = getCol(sortedRows, 0);
sortedByAppearances.splice(sortedByAppearances.indexOf(""), 1);
// Get sorted column (by wins)
sortingColIndex = Rows[0].length - 1;
sortedRows.sort(function(a, b) {
if (a[sortingColIndex] === b[sortingColIndex]) { return (a[0] < b[0] ? -1 : (a[0] > b[0] ? 1 : 0)); }
return (+a[sortingColIndex] > +b[sortingColIndex] ? -1 : (+a[sortingColIndex] < +b[sortingColIndex] ? 1 : 0));
});
var sortedByWins = getCol(sortedRows, 0);
sortedByWins.splice(sortedByWins.indexOf(""), 1);
// Initial sorting
d3.select("#button1").on("click", function() {
for (var i = 1; i < Rows.length; i++) {
d3.select("#teamRow" + i)
.transition()
.duration(200)
.attr("transform", "translate(0, " + (teamNames.indexOf(teamNames[i]) - 1)*(rectHeight + rectVerticalPadding) + ")");
}
});
// Sorting by team names
d3.select("#button2").on("click", function() {
for (var i = 1; i < Rows.length; i++) {
d3.select("#teamRow" + i)
.transition()
.duration(200)
.attr("transform", "translate(0, " + (sortedByTeamNames.indexOf(teamNames[i]))*(rectHeight + rectVerticalPadding) + ")");
}
});
// Sorting by appearances
d3.select("#button3").on("click", function() {
for (var i = 1; i < Rows.length; i++) {
d3.select("#teamRow" + i)
.transition()
.duration(200)
.attr("transform", "translate(0, " + (sortedByAppearances.indexOf(teamNames[i]))*(rectHeight + rectVerticalPadding) + ")");
}
});
// Sorting by wins
d3.select("#button4").on("click", function() {
for (var i = 1; i < Rows.length; i++) {
d3.select("#teamRow" + i)
.transition()
.duration(200)
.attr("transform", "translate(0, " + (sortedByWins.indexOf(teamNames[i]))*(rectHeight + rectVerticalPadding) + ")");
}
});
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment