Skip to content

Instantly share code, notes, and snippets.

@naxxateux

naxxateux/index.html

Created July 24, 2013 14:01
Show Gist options
  • Save naxxateux/6070845 to your computer and use it in GitHub Desktop.
Save naxxateux/6070845 to your computer and use it in GitHub Desktop.
Download ZIP
RPL teams & countries (circle table view)
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<html lang="en">
<head>
<style>
body {
font-family: Arial sans-serif;
font-size: 10px;
background-color: #FFFFFF;
}
text.country {
font-size: 10px;
font-family: Arial, sans-serif;
fill: #000000;
dominant-baseline: middle;
text-anchor: end;
}
text.team {
font-size: 10px;
font-family: Arial, sans-serif;
fill: #000000;
dominant-baseline: alphabetic;
text-anchor: middle;
}
</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></title>
</head>
<body>
<div id="chart" align="center"></div>
<script type="text/javascript">
var margin = {top: 60, right: 20, bottom: 20, left: 120},
width = 1000 - margin.left - margin.right,
height = 1600 - margin.top - margin.bottom,
rMax = 15,
textPadding = 10,
teamColours,
Matrix;
d3.csv("teams_colours.csv", function(error, data) {
if (error) {
console.log(error);
} else {
teamColours = data;
d3.text("teams_countries_table.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;
});
});
var svg = d3.select("#chart")
.append("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 xScale = d3.scale.linear()
.domain([0, Matrix[0].length])
.range([width, 0]);
var yScale = d3.scale.linear()
.domain([0, Matrix.length])
.range([height, 0]);
var max = Math.max.apply(Math, Matrix.map(function(i) { return i[0];}));
var rScale = d3.scale.linear()
.domain([0, max])
.range([0, rMax]);
var numOfRows = Matrix.length;
var numOfColumns = Matrix[0].length;
// Draw country rows
for (var i = 0; i < numOfRows; i++) {
var row = svg.append("g")
.attr("class", "row")
.attr("id", i)
.attr("opacity", 1)
.attr("transform", "translate(0, " + yScale(i) + ")");
row.append("line")
.attr("x1", 0)
.attr("y1", 0)
.attr("x2", width)
.attr("y2", 0)
.attr("style", "stroke: #E5E5E5; stroke-width: 0.5");
row.append("text")
.attr("class", "country")
.attr("x", -textPadding)
.attr("y", 0)
.text(teamColours[numOfColumns + i].team);
}
// Draw team lines
for (var i = 0; i < numOfColumns; i++) {
var column = svg.append("g")
.attr("class", "column")
.attr("id", i)
.attr("opacity", 1)
.attr("transform", "translate(" + xScale(i) + ", 0)");
column.append("line")
.attr("x1", 0)
.attr("y1", 0)
.attr("x2", 0)
.attr("y2", height)
.attr("style", "stroke: #E5E5E5; stroke-width: 0.5");
column.append("text")
.attr("class", "team")
.attr("x", 0)
.attr("y", function(d) {
return (i%2 == 1 ? -textPadding : -textPadding*2.2);
})
.text(teamColours[i].team);
}
// Draw circles
for (var i = 0; i < numOfRows; i++) {
for (var j = 0; j < numOfColumns; j++) {
svg.append("circle")
.attr("cx", function(d) {
return xScale(j);
})
.attr("cy", function(d) {
return yScale(i);
})
.attr("r", function(d) {
return rScale(Matrix[i][j]);
})
.attr("fill", teamColours[numOfColumns + i].colour);
}
}
}
});
}
});
</script>
</body>
</html>
Raw
teams_colours.csv
team colour
Амкар #FAF8F0
Анжи #FAF8F0
Волга #FAF8F0
Динамо #FAF8F0
Зенит #FAF8F0
Краснодар #FAF8F0
Крылья Советов #FAF8F0
Кубань #FAF8F0
Локомотив #FAF8F0
Ростов #FAF8F0
Рубин #FAF8F0
Спартак #FAF8F0
Терек #FAF8F0
Томь #FAF8F0
Урал #FAF8F0
ЦСКА #FAF8F0
Япония #D84C4F
Южная Корея #D84C4F
Узбекистан #D84C4F
Иран #D84C4F
Австралия #D84C4F
ЮАР #ECCA53
Сенегал #ECCA53
Нигерия #ECCA53
Марокко #ECCA53
Кот-д'Ивуар #ECCA53
Конго #ECCA53
Камерун #ECCA53
Замбия #ECCA53
ДР Конго #ECCA53
Гана #ECCA53
Габон #ECCA53
Буркина-Фасо #ECCA53
Ангола #ECCA53
Эстония #7CA49E
Швеция #7CA49E
Швейцария #7CA49E
Чехия #7CA49E
Черногория #7CA49E
Хорватия #7CA49E
Франция #7CA49E
Финляндия #7CA49E
Украина #7CA49E
Турция #7CA49E
Словакия #7CA49E
Сербия #7CA49E
Румыния #7CA49E
Португалия #7CA49E
Польша #7CA49E
Молдавия #7CA49E
Литва #7CA49E
Латвия #7CA49E
Италия #7CA49E
Испания #7CA49E
Ирландия #7CA49E
Израиль #7CA49E
Грузия #7CA49E
Греция #7CA49E
Германия #7CA49E
Венгрия #7CA49E
Босния и Герцеговина #7CA49E
Болгария #7CA49E
Бельгия #7CA49E
Белоруссия #7CA49E
Армения #7CA49E
Азербайджан #7CA49E
Эквадор #6E874D
Чили #6E874D
Уругвай #6E874D
Парагвай #6E874D
Колумбия #6E874D
Венесуэла #6E874D
Бразилия #6E874D
Аргентина #6E874D
Ямайка #D35530
Коста-Рика #D35530
Гаити #D35530
Raw
teams_countries_table.csv
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 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 1 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 1 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 1 0 0 1 0 0 0 1
0 2 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 1 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 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 1 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 1 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 1 0 0 0 2
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 1 1 1 0 0
1 0 0 0 1 1 0 0 0 0 0 0 0 1 0 0
0 0 1 0 0 0 0 0 2 2 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 1 0 0 0 0 0 0 1 0 1 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 1 0 0 0 0 0
2 0 0 0 1 0 0 0 1 1 0 0 0 0 0 0
0 0 0 1 2 2 1 0 0 1 0 0 0 0 2 1
0 0 2 1 0 0 0 1 0 0 0 0 0 1 0 0
0 0 0 0 2 1 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
1 0 2 1 0 0 0 1 0 1 0 0 0 2 0 0
0 0 0 0 1 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 1
0 0 0 0 1 0 0 0 0 0 0 1 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 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 2 0 0 1 2 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 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 1
4 0 0 0 0 0 0 1 0 0 0 0 0 2 0 0
0 0 0 0 2 0 0 0 0 0 0 0 1 0 0 0
0 0 1 1 1 1 4 1 1 2 2 0 0 1 1 0
0 0 0 1 0 1 0 1 0 0 0 1 0 0 2 0
0 0 0 0 0 0 1 0 0 0 1 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 1 1
0 0 0 0 0 1 0 0 0 0 0 0 1 0 0 0
0 0 0 0 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 0
0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0
0 4 1 0 1 3 1 1 2 0 0 2 5 0 0 2
0 0 0 1 0 0 0 0 0 0 1 2 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 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment