Skip to content

Instantly share code, notes, and snippets.

@naxxateux

naxxateux/colours.csv

Last active December 20, 2015 03:48
Show Gist options
  • Save naxxateux/6066405 to your computer and use it in GitHub Desktop.
Save naxxateux/6066405 to your computer and use it in GitHub Desktop.
Download ZIP
RPL teams & countries visualization (arc diagram)
Raw
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
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<html lang="en">
<head>
<style>
body {
font-family: Arial sans-serif;
font-size: 10px;
background-color: #F3E0BD;
}
</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: 60, bottom: 60, left: 60},
width = 1800 - margin.left - margin.right,
height = 1000 - margin.top - margin.bottom,
minRadius = 1,
maxRadius = 5,
teamColours,
Matrix;
function newFilledArray(len, val) {
var rv = new Array(len);
while (--len >= 0) {
rv[len] = val;
}
return rv;
}
function rowSum(data, index) {
var sum = 0;
for (var i = 0; i < data[index].length; i++) {
sum += data[index][i];
}
return sum;
}
function colSum(data, index) {
var sum = 0;
for (var i = 0; i < data.length; i++) {
sum += data[i][index];
}
return sum;
}
function maxRowColSum(data) {
var rowSums = newFilledArray(data.length, 0);
var colSums = newFilledArray(data[0].length, 0);
for (var i = 0; i < data.length; i++) {
for (var j = 0; j < data[i].length; j++) {
rowSums[i] += data[i][j];
colSums[j] += data[i][j];
}
}
return d3.max(rowSums.concat(colSums));
}
d3.csv("colours.csv", function(error, data) {
if (error) {
console.log(error);
} else {
teamColours = data;
d3.text("teams_countries_horizontal.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([0, width]);
var rScale = d3.scale.linear()
.domain([0, maxRowColSum(Matrix)])
.range([minRadius, maxRadius]);
var numOfRows = Matrix.length;
var numOfColumns = Matrix[0].length;
// Draw arcs
for (var i = 0; i < numOfRows; i++) {
for (var j = 0; j < numOfColumns; j++) {
if (Matrix[i][j] != 0) {
svg.append("g")
.append("path")
.style("fill", "none")
.style("stroke", function(d) {
return teamColours[j].colour;
})
.style("stroke-width", 0.3)
.attr("d", function(d) {
return "M " + xScale(i) + " " + height + " A " + (xScale(j) - xScale(i))/2 + " " + (xScale(j) - xScale(i))/2 + " 0 0 1 " + xScale(j) + " " + height;
});
}
}
}
// Draw team circles
for (var i = 0; i < numOfRows; i++) {
svg.append("circle")
.attr("cx", function(d) {
return xScale(i);
})
.attr("cy", height)
.attr("r", function(d) {
return rScale(rowSum(Matrix, i));
})
.attr("fill", function(d) {
return teamColours[i].colour;
});
}
// Draw country circles
for (var i = Matrix.length; i < numOfColumns; i++) {
svg.append("circle")
.attr("cx", function(d) {
return xScale(i);
})
.attr("cy", height)
.attr("r", function(d) {
return rScale(colSum(Matrix, i));
})
.attr("fill", function(d) {
return teamColours[i].colour;
});
}
}
});
}
});
</script>
</body>
</html>
Raw
teams_countries_horizontal.csv
0 0 0 0 0 0 0 0 0 0 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 2 0 0 0 0 1 0 1 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 1 0 0 0 0 0 2 1 1 1 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 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 1 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 2 0 1 2 0 0 0 0 0 0 0 0 0 0 0 0 0 1 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 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 2 0 0 1 1 0 0 1 0 0 0 0 0 0 0 0 1 1 0 0 0 1 1 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 1 0 0 0 1 0 1 2 0 2 0 0 1 0 1 0 0 0 0 1 0 0 0 0 2 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 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 2 0 1 1 0 0 0 0 0 0 0 0 0 0 1 0 0 0 1 1 0 0 0 1 0 1 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 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 0 0 0 0 2 0 0 0 0 0 0 4 0 1 0 0 0 2 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 1 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 1 0 0 0 0 0 1 0 0 1 0 0 0 1 0 0 0 0 0 0 0 1 0 1 1 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 1 0 0 0 1 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 2 0 0 1 0 1 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 1 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 1 0 0 0 1 0 0 0 1 0 0 0 0 0 1 0 1 0 0 0 1 0 2 1 0 1 0 1 1 0 0 0 1 0 0 0 0 0 0 1 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 1 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 1 0 1 0 0 0 0 0 0 1 0 0 2 0 1 2 0 0 0 0 0 0 2 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 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 1 0 0 0 0 1 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 0 1 1 1 0 0 0 0 0 0 0 0 0 1 0 0 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 1 0 0 0 1 1 0 0 0 0 0 3 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 5 0 0 0 0
0 0 0 0 0 0 0 0 0 0 0 0 0 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 1 0 0 2 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 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 2 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 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 1 0 0 0 0 0 0 1 0 1 0 0 0 0 0 0 0 0 0 2 1 0 0 0 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 1 0 0 0 0 2 0 0 0 0
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment