Skip to content

Instantly share code, notes, and snippets.

@naxxateux

naxxateux/Hattori_Hanzo-webfont.svg

Last active December 20, 2015 02:39
Show Gist options
  • Save naxxateux/6058281 to your computer and use it in GitHub Desktop.
Save naxxateux/6058281 to your computer and use it in GitHub Desktop.
Download ZIP
RPL teams & countries visualization (chord diagram)
Display the source blob
Display the rendered blob
Raw
Hattori_Hanzo-webfont.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<title></title>
</head>
<body>
<div id="chart" align="center"></div>
<script type="text/javascript">
var margin = {top: 60, right: 60, bottom: 60, left: 60},
width = 1000 - margin.left - margin.right,
height = 1000 - margin.top - margin.bottom,
numberOfTeams = 16,
outerRadius = Math.min(width - margin.left - margin.right, height - margin.top - margin.bottom) * 0.5,
innerRadius = outerRadius * 0.95,
sectorPadding = .04,
fadingDuration = 50,
selectionColor = "#A83A3A",
tickLineColor = "#000000",
tickTextColor = "#000000",
hintCircleStrokeColor = "#fafcf7",
sectionBarDividerColor = "#fafcf7",
sectionBarColorAll = "#DEDC00",
sectionBackgroundColor = "#FAE3DE",
sectionCrossColor = "#454545",
tickLineLength = 10,
tickLineWidth = 0.5,
tickTextPadding = 0,
chordsInitialOpacity = 0.7,
chordsFadedOpacity = 0.1,
hintInitialOpacity = 0,
hintFadedOpacity = 1,
hintCirclePadding = -20,
hintCircleRadius = 8,
hintCircleStrokeWidth = 2,
detailedInfoYScale = d3.scale.linear().domain([0, numberOfTeams - 1]).range([-outerRadius, outerRadius]),
detailedInfoPadding = 100,
sectionTextHorizontalPadding = 35,
sectionTextVerticalPadding = 10,
sectionBarHorizontalPadding = 35,
sectionBarVerticalPadding = 25,
sectionPercentHorizontalPadding = 5,
sectionBarWidth = 150,
sectionBarHeight = 10,
sectionBarDividerWidth = 1,
crossSize = 6,
crossLineWidth = 2,
barDrawingDuration = 50,
hidingDuration = 50,
legendBottomPadding = 30,
teamClickStatusArray,
sectionIndex = 0,
lastClickedTeamIndex = 0,
sameSectorFlag = false,
teamColors,
Matrix;
function getNonZeroIndicies(matrix) {
var indicies = [];
for (var i = 0; i < matrix.length; i++) {
if (matrix[i] > 0) { indicies.push(i); }
}
return indicies;
}
function newZeroArray(len) {
var rv = new Array(len);
while (--len >= 0) {
rv[len] = 0;
}
return rv;
}
function rowSum(data, index) {
var sum = 0;
for (var i = 0; i < data[index].length; i++) {
sum += data[index][i];
}
return sum;
}
d3.csv("teams_colours.csv", function(error, data) {
if (error) {
console.log(error);
} else {
teamColors = data;
d3.text("rpl_countries.csv", function(error, unparsedData) {
if (error) {
console.log(error);
} else {
Matrix = d3.csv.parseRows(unparsedData).map(function(row) {
return row.map(function(value) {
return +value;
});
});
teamClickStatusArray = newZeroArray(Matrix.length);
var chord = d3.layout.chord()
.padding(sectorPadding)
.matrix(Matrix);
// Creating initial svg
var svg = d3.select("#chart").append("svg")
.attr("width", width + margin.left + margin.right + sectionBarWidth + sectionBarHorizontalPadding*2)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + (width + margin.left + margin.right)/2 + ", " + (height + margin.top + margin.bottom)/2 + ")");
// Creating group for ticks
var ticks = svg.append("g")
.selectAll("g")
.data(chord.groups)
.enter().append("g")
.attr("class", function(d) { return "tick" + d.index; })
.attr("transform", function(d) { return "rotate(" + (((d.endAngle + d.startAngle)/2) * 180 / Math.PI - 90) + ")" + " translate(" + outerRadius + ", 0)"; });
// Drawing chords
svg.append("g")
.attr("class", "chord")
.selectAll("path")
.data(chord.chords)
.enter().append("path")
.attr("d", d3.svg.chord().radius(innerRadius))
.style("fill", function(d) { return teamColors[d.target.index].color; })
.style("opacity", chordsInitialOpacity);
// Drawing circle hints
var teamHints = svg.append("g")
.attr("class", "teamHints")
.selectAll("g")
.data(chord.chords)
.enter().append("g")
.attr("transform", function(d) { return "rotate(" + (((d.source.endAngle + d.source.startAngle)/2) * 180 / Math.PI - 90) + ")" + " translate(" + innerRadius + ", 0)"; })
.style("opacity", hintInitialOpacity);
teamHints.append("circle")
.attr("cx", hintCirclePadding)
.attr("r", hintCircleRadius)
.style("fill", function(d) { return teamColors[d.target.index].color; })
.style("stroke", hintCircleStrokeColor)
.style("stroke-width", hintCircleStrokeWidth);
teamHints.append("text")
.attr("class", "hint")
.attr("x", hintCirclePadding)
.attr("transform", function(d) { return "rotate(" + -(((d.source.endAngle + d.source.startAngle)/2) * 180 / Math.PI - 90) + ", " + hintCirclePadding + ", " + 0 + ")"; })
.text(function(d) { return d.source.value; });
var countryHints = svg.append("g")
.attr("class", "countryHints")
.selectAll("g")
.data(chord.chords)
.enter().append("g")
.attr("transform", function(d) { return "rotate(" + (((d.target.endAngle + d.target.startAngle)/2) * 180 / Math.PI - 90) + ")" + " translate(" + innerRadius + ", 0)"; })
.style("opacity", hintInitialOpacity);
countryHints.append("circle")
.attr("cx", hintCirclePadding)
.attr("r", hintCircleRadius)
.style("fill", function(d) { return teamColors[d.target.index].color; })
.style("stroke", hintCircleStrokeColor)
.style("stroke-width", hintCircleStrokeWidth);
countryHints.append("text")
.attr("class", "hint")
.attr("x", hintCirclePadding)
.attr("transform", function(d) { return "rotate(" + -(((d.target.endAngle + d.target.startAngle)/2) * 180 / Math.PI - 90) + ", " + hintCirclePadding + ", " + 0 + ")"; })
.text(function(d) { return d.target.value; });
// Returns an event handler for fading a given chord group, showing circle hints & colouring teams & countries
function fade(chordOpacity, selectColor, hintOpacity, index) {
svg.selectAll(".chord path")
.filter(function(d) { return d.source.index != index && d.target.index != index; })
.transition()
.duration(fadingDuration)
.style("opacity", chordOpacity);
svg.selectAll(".countryHints g")
.filter(function(d) { return d.source.index === index; })
.transition()
.duration(fadingDuration)
.style("opacity", hintOpacity);
svg.selectAll(".teamHints g")
.filter(function(d) { return d.target.index === index; })
.transition()
.duration(fadingDuration)
.style("opacity", hintOpacity);
svg.select(".tick" + index)
.transition()
.duration(fadingDuration)
.style("fill", selectColor);
var indicies = getNonZeroIndicies(Matrix[index]);
indicies.forEach( function (value) {
svg.select(".tick" + value)
.transition()
.duration(fadingDuration)
.style("fill", selectColor);
});
}
// Fade specific chords & get the detailed info section for any team
function processSectorClick(index) {
// Fading block
if (lastClickedTeamIndex != 0) {
fade(chordsInitialOpacity, tickTextColor, hintInitialOpacity, lastClickedTeamIndex - 1);
}
if (index != lastClickedTeamIndex - 1) {
fade(chordsFadedOpacity, selectionColor, hintFadedOpacity, index);
lastClickedTeamIndex = index + 1;
sameSectorFlag = false;
}
if (!sameSectorFlag) {
fade(chordsFadedOpacity, selectionColor, hintFadedOpacity, index);
lastClickedTeamIndex = index + 1;
sameSectorFlag = true;
} else {
sameSectorFlag = false;
}
// Detailed info block
if (index < numberOfTeams && teamClickStatusArray[index] == 0 ) {
// Draw legend
if (sectionIndex == 0) {
var legend = svg.append("g")
.attr("class", "legend")
.attr("transform", "translate(" + (outerRadius + detailedInfoPadding + sectionBarHorizontalPadding + sectionBarWidth/2) + ", " + (-outerRadius - legendBottomPadding) + ")");
legend.append("text")
.attr("class", "legend-percent")
.text("50 %");
legend.append("text")
.attr("x", -sectionBarWidth/2)
.attr("class", "legend-left")
.text("ЛЕГИОНЕРЫ");
legend.append("text")
.attr("x", sectionBarWidth/2)
.attr("class", "legend-right")
.text("РОССИЯНЕ");
}
// Append detailed info section
var section = svg.append("g")
.attr("class", "info" + sectionIndex)
.attr("transform", "translate(" + (outerRadius + detailedInfoPadding) + ", " + detailedInfoYScale(sectionIndex) + ")")
.attr("cursor", "pointer")
.on("mouseover", function () { d3.select(this).select(".background").style("opacity", 1); })
.on("mouseout", function () { d3.select(this).select(".background").style("opacity", 0); })
.on("click", function(d) { // Remove section on click
d3.select(".info" + (teamClickStatusArray[index] - 1)).remove();
for (var i = 0; i < numberOfTeams; i++) {
if (teamClickStatusArray[i] > teamClickStatusArray[index]) {
d3.select(".info" + (teamClickStatusArray[i] - 1))
.transition()
.duration(hidingDuration)
.attr("transform", "translate(" + (outerRadius + detailedInfoPadding) + ", " + detailedInfoYScale(teamClickStatusArray[i] - 2) + ")")
.attr("class", "info" + (teamClickStatusArray[i] - 2));
teamClickStatusArray[i] = teamClickStatusArray[i] - 1;
}
}
sectionIndex--;
teamClickStatusArray[index] = 0;
// Remove legend
if (sectionIndex == 0) {
d3.select(".legend").remove();
}
});
// Draw faded background with cross sign
var background = section.append("g")
.attr("class", "background")
.style("opacity", 0);
background.append("rect")
.attr("width", sectionBarHorizontalPadding + sectionBarWidth + sectionBarHorizontalPadding)
.attr("height", sectionBarVerticalPadding + sectionBarHeight + sectionTextVerticalPadding)
.style("fill", sectionBackgroundColor);
var cross = background.append("g")
.attr("class", "cross")
.attr("transform", "translate(" + (sectionBarHorizontalPadding*2 + sectionBarWidth - crossSize) + ", " + crossSize + ")");
cross.append("line")
.attr("x1", -crossSize/2)
.attr("x2", crossSize/2)
.attr("y1", -crossSize/2)
.attr("y2", crossSize/2)
.style("stroke", sectionCrossColor)
.style("stroke-width", crossLineWidth);
cross.append("line")
.attr("x1", -crossSize/2)
.attr("x2", crossSize/2)
.attr("y1", crossSize/2)
.attr("y2", -crossSize/2)
.style("stroke", sectionCrossColor)
.style("stroke-width", crossLineWidth);
// Append team name
section.append("text")
.attr("class", "detailed")
.attr("x", sectionBarHorizontalPadding + sectionBarWidth/2)
.attr("y", sectionTextVerticalPadding)
.text(function(d) { return teamColors[index].team; });
// Append bar
section.append("rect")
.attr("x", sectionBarHorizontalPadding)
.attr("y", sectionBarVerticalPadding)
.attr("width", sectionBarWidth)
.attr("height", sectionBarHeight)
.attr("fill", sectionBarColorAll);
var widthOfForeigners = Math.floor(rowSum(Matrix, index)*sectionBarWidth/teamColors[index].nOfPlayers);
section.append("rect")
.attr("x", sectionBarHorizontalPadding)
.attr("y", sectionBarVerticalPadding)
.attr("width", 0)
.attr("height", sectionBarHeight)
.attr("fill", teamColors[index].color)
.transition()
.duration(barDrawingDuration)
.attr("width", widthOfForeigners);
section.append("rect")
.attr("x", sectionBarHorizontalPadding + sectionBarWidth/2 - sectionBarDividerWidth)
.attr("y", sectionBarVerticalPadding)
.attr("width", sectionBarDividerWidth)
.attr("height", sectionBarHeight)
.attr("fill", sectionBarDividerColor);
// Append percent text
var percentOfForeigners = Math.floor(rowSum(Matrix, index)*100/teamColors[index].nOfPlayers);
section.append("text")
.attr("class", "percent")
.attr("x", sectionPercentHorizontalPadding)
.attr("y", sectionBarVerticalPadding + sectionBarHeight/2)
.style("fill", function(d) { return teamColors[index].color; })
.text(percentOfForeigners + " %");
section.append("text")
.attr("class", "percent")
.attr("x", sectionBarHorizontalPadding + sectionBarWidth + sectionPercentHorizontalPadding)
.attr("y", sectionBarVerticalPadding + sectionBarHeight/2)
.style("fill", sectionBarColorAll)
.text((100 - percentOfForeigners) + " %");
teamClickStatusArray[index] = sectionIndex + 1;
sectionIndex++;
}
}
// Drawing sectors
svg.append("g").selectAll("path")
.data(chord.groups)
.enter().append("path")
.attr("class", function(d) { return "sector" + d.index; })
.attr("cursor", "pointer")
.style("fill", function(d) { return teamColors[d.index].color; })
.attr("d", d3.svg.arc().innerRadius(innerRadius).outerRadius(outerRadius))
.on("click", function(d) { return processSectorClick(d.index); });
// Drawing team & country names
ticks.append("text")
.attr("class", "tick")
.attr("x", function(d) { return d.endAngle > Math.PI ? -tickTextPadding - tickLineLength : tickLineLength + tickTextPadding; })
.attr("transform", function(d) { return d.endAngle > Math.PI ? "rotate(180)" : null; })
.style("text-anchor", function(d) { return d.endAngle > Math.PI ? "end" : "start"; })
.text(function(d) { return teamColors[d.index].team; });
}
});
}
});
</script>
</body>
</html>
Raw
rpl_countries.csv
0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0 0 2 0 0 0 0 0 0 0 1 0 0 1 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 0 0 0 0 0 0
0 0 0 0 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 0 0 1 0 0 0 0 0 0 0 0 0 0 2 0 0 1 0 1 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 4 0 0 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 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 2 0 1 0 0 2 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 1 0 0 0 1 0 0 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 0 0 0 0 0 0 1 0 2 0 0 0 1 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 1 1 1 0 0 1
0 0 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 0 0 0 1 0 0 1 2 0 0 2 0 0 0 0 0 1 0 0 0 0 0 0 1 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 1 0 0 2 1 0 0 0 0 0
0 0 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 0 0 1 0 0 0 0 2 0 0 1 1 0 0 0 0 0 0 1 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 3 0 0 0 1 1 0 0 0 0
0 0 0 0 0 0 0 0 0 0 0 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 0 0 0 2 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 2 0 0 0 1 0 0 0 0 1 0 0 0 4 0 0 0 1 0
0 0 0 0 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 0 0 0 0 0 0 1 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 1 1 0 1 0 1 1 0 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 0 0 0 0 2 0 0 0 1 1 0 1 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 2 0 0 0 1 0 0 0 0 0
0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 1 0 0 0 0 0 1 0 2 1 0 0 1 0 0 1 1 0 0 0 0 0 0 1 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 2 0 0 1 0 0
0 0 0 0 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 1 0 0 1 1 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 2 0 1 1 0 0 2 0 0 0 0 0 1 0 0 0 0 0 0 2 0 1 0 1 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 0 1 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 1 1 1 0 0 0 0 0 0 0 1 0 0 0 0 0 2 0 0 0 0 1 2 0 0 0
0 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 0 0 1 1 1 0 0 0 0 0 0 0 3 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 5 0 0 1 0 0 0 0 0 0
0 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 1 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 2 0 0 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 1 0 0 0 0 0
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 0 0 0 0 0 0 0 0 0 2 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 2 0 0 0 0
0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 2 1 1 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 1 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 2 1 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 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 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 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 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 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 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 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 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 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 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 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 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 0 0 2 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 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 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 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 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 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 1 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 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 0 0 1 1 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 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 0 0 0 0 2 2 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 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 0 0 0 0 1 0 1 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 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 0 0 0 0 0 1 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 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 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 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 1 0 0 0 1 1 0 1 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 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 0 0 0 0 0 1 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 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 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 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 0 0 1 0 0 0 1 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 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 2 2 1 0 0 1 0 0 0 0 2 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 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 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 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 1 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 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 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 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 0 1 0 0 0 0 0 0 3 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 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 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 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 0 1 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 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 2 1 0 0 0 1 0 1 0 0 0 2 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 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 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 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 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 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 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 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 0 0 1 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 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 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 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 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 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 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 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 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 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 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 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 1 0 2 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 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 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 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 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 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 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 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 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 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 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 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 0 1 2 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 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 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 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 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 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 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 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 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 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 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 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 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 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 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 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 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 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 1 0 1 3 1 1 2 0 0 2 5 0 0 2 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 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 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 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 0 0 0 0 0 1 0 0 0 0 0 2 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 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 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 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 1 1 1 4 1 1 2 2 0 0 1 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 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 0 1 0 0 0 1 0 0 2 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 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 0 0 0 0 0 1 2 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 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 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 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 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 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 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
Raw
style.css
@font-face {
font-family: 'hattori_hanzolight';
src: url('http://cs537203.vk.me/u212522/doc/f229d8ac2aa6/Hattori_Hanzo-webfont.eot');
src: url('http://cs537203.vk.me/u212522/doc/f229d8ac2aa6/Hattori_Hanzo-webfont.eot?#iefix') format('eot'),
url('http://cs538413.vk.me/u212522/doc/cda872afc6c5/Hattori_Hanzo-webfont.woff') format('woff'),
url('http://cs537304.vk.me/u212522/doc/d2249c432a6d/Hattori_Hanzo-webfont.ttf') format('truetype'),
url('Hattori_Hanzo-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
@font-face {
font-family: 'hattori_hanzolight';
src: url('Hattori_Hanzo-webfont.svg') format('svg');
}
}
body {
background-color: #fafcf7;
}
text {
font-family: 'hattori_hanzolight', sans-serif;
cursor: default;
}
text.tick {
font-size: 13px;
dominant-baseline: mathematical;
letter-spacing: .08em;
}
text.hint {
font-size: 11px;
fill: #FFFFFF;
dominant-baseline: mathematical;
text-anchor: middle;
}
text.detailed {
font-size: 13px;
dominant-baseline: hanging;
text-anchor: middle;
letter-spacing: .08em;
}
text.percent {
font-size: 12px;
dominant-baseline: mathematical;
text-anchor: start;
}
text.legend-percent{
font-size: 10px;
fill: #878787;
dominant-baseline: mathematical;
text-anchor: middle;
}
text.legend-left{
font-size: 10px;
fill: #878787;
dominant-baseline: mathematical;
text-anchor: end;
}
text.legend-right{
font-size: 10px;
fill: #878787;
dominant-baseline: mathematical;
text-anchor: start;
}
Raw
teams_colours.csv
team color nOfPlayers
АМКАР #00295A 44
АНЖИ #00295A 44
ВОЛГА #00295A 43
ДИНАМО #00295A 47
ЗЕНИТ #00295A 69
КРАСНОДАР #00295A 65
КРЫЛЬЯ СОВЕТОВ #00295A 50
КУБАНЬ #00295A 49
ЛОКОМОТИВ #00295A 53
РОСТОВ #00295A 50
РУБИН #00295A 45
СПАРТАК #00295A 69
ТЕРЕК #00295A 45
ТОМЬ #00295A 41
УРАЛ #00295A 45
ЦСКА #00295A 44
Япония #E53F08
Ямайка #8C1881
Южная Корея #E53F08
ЮАР #F5A100
Эстония #0069B5
Эквадор #64AF2A
Швеция #0069B5
Швейцария #0069B5
Чили #64AF2A
Чехия #0069B5
Черногория #0069B5
Хорватия #0069B5
Франция #0069B5
Финляндия #0069B5
Уругвай #64AF2A
Украина #0069B5
Узбекистан #E53F08
Турция #0069B5
Словакия #0069B5
Сербия #0069B5
Сенегал #F5A100
Румыния #0069B5
Португалия #0069B5
Польша #0069B5
Парагвай #64AF2A
Нигерия #F5A100
Молдавия #0069B5
Марокко #F5A100
Литва #0069B5
Латвия #0069B5
Кот-д'Ивуар #F5A100
Коста-Рика #8C1881
Конго #F5A100
Колумбия #64AF2A
Камерун #F5A100
Италия #0069B5
Испания #0069B5
Ирландия #0069B5
Иран #E53F08
Израиль #0069B5
Замбия #F5A100
ДР Конго #F5A100
Грузия #0069B5
Греция #0069B5
Германия #0069B5
Гана #F5A100
Гаити #8C1881
Габон #F5A100
Венесуэла #64AF2A
Венгрия #0069B5
Буркина-Фасо #F5A100
Бразилия #64AF2A
Босния и Герцеговина #0069B5
Болгария #0069B5
Бельгия #0069B5
Белоруссия #0069B5
Армения #0069B5
Аргентина #64AF2A
Ангола #F5A100
Азербайджан #0069B5
Австралия #E53F08
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment