Skip to content

Instantly share code, notes, and snippets.

@naxxateux

naxxateux/index.html

Created November 10, 2013 19:35
Show Gist options
  • Save naxxateux/7402755 to your computer and use it in GitHub Desktop.
Save naxxateux/7402755 to your computer and use it in GitHub Desktop.
Download ZIP
Cold war conflicts
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<html lang="en">
<head>
<link rel="stylesheet" href="wars.css">
<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>
<script type="text/javascript" src="wars.js"></script>
<title></title>
</head>
<body>
<div id="chart" align="center"></div>
</body>
</html>
Raw
wars-list.csv
name status
Иранский кризис all
Первая Индокитайская война all
Гражданская война в Греции usa
Конфликт в Пуэрто-Рико usa
Война в Корее all
Вьетнамская война all
Операция в заливе Свиней — Куба usa
Вторая оккупация Доминиканской Республики usa
Гражданская война в Камбодже usa
Гражданская война в Лаосе all
Первый кризис в Тайваньском проливе usa
Ливанский кризис 1958 года usa
Кубинская революция all
Второй кризис в Тайваньском проливе usa
Венгерское восстание ussr
Конголезский кризис all
Карибский кризис all
Гражданская война в Колумбии usa
Война на истощение ussr
Операция «Дунай» — Чехословакия ussr
Пограничный конфликт на острове Даманский ussr
Военный переворот в Чили usa
Гражданская война в Анголе all
Война в Афганистане all
Гражданская война в Сальвадоре usa
Гражданская война в Мозамбике ussr
Гражданская война в Никарагуа all
Вторжение на Гренаду usa
Гражданская война в Ливане usa
Операция «Каньон Эльдорадо» — Ливия usa
Операция «Искренние намерения» — Персидский залив usa
Вторжение в Панаму usa
Война в Персидском заливе usa
Операция «Возрождение надежды» — Сомали usa
Операция «Поддержка демократии» — Гаити usa
Операция «Обдуманная сила» — Югославия usa
Приднестровский конфликт russia
Осетино-ингушский конфликт russia
Гражданская война в Таджикистане russia
Первая чеченская война russia
Вторжение боевиков в Дагестан russia
Операция «Лиса пустыни» — Ирак usa
Война НАТО против Югославии usa
Вторая чеченская война russia
Операция «Несокрушимая свобода» — Афганистан usa
Операция «Несокрушимая свобода» — Филиппины usa
Операция «Несокрушимая свобода» — Африканский рог usa
Гаитянский антиправительственный мятеж usa
Операция «Несокрушимая свобода» — Западная Сахара usa
Война в Ираке usa
Война в северо-западном Пакистане usa
Борьба с терроризмом в Йемене usa
Вторая гражданская война в Либерии usa
Вооружённый конфликт в Южной Осетии russia
Исламистский терроризм на Северном Кавказе russia
Операция «Рассвет Одиссея» — Ливия usa
Raw
wars-matrix.csv
1 0 0 0 0 0 0 0 0 1 2 0 0 0
0 3 0 0 0 0 0 0 0 0 2 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 2 0 0 0
5 2 4 0 0 0 0 0 0 5 2 0 0 0
5 2 0 0 0 0 0 0 0 5 2 0 0 0
5 2 0 0 0 0 0 0 0 5 2 0 0 0
5 2 10 0 13 0 0 0 0 5 2 13 0 10
0 2 10 11 13 0 0 0 0 0 2 13 0 10
6 0 10 11 13 0 0 0 0 6 0 13 0 10
6 0 10 0 13 0 0 0 0 6 15 13 0 10
6 0 10 0 13 0 0 0 0 6 0 13 0 10
6 0 10 12 13 14 0 0 0 6 0 13 0 10
6 0 10 0 13 0 0 0 0 6 0 13 0 10
6 0 10 16 0 0 0 0 0 6 16 0 0 10
6 7 10 16 0 0 0 0 0 6 16 0 0 10
6 0 10 16 17 0 0 0 0 6 16 17 0 10
6 0 10 16 0 0 0 0 0 6 16 0 0 10
6 0 10 16 18 0 0 0 0 6 16 0 0 10
6 8 10 16 18 0 0 0 0 6 16 0 0 10
6 8 10 0 18 0 0 0 0 6 0 0 0 10
6 0 10 0 18 0 0 0 0 6 19 0 0 10
6 0 10 0 18 0 0 0 0 6 19 20 0 10
6 0 10 0 18 0 0 0 0 6 19 0 21 10
6 9 10 0 18 0 0 0 0 6 19 0 0 10
6 9 10 0 18 0 0 0 0 6 0 0 0 10
6 9 10 0 18 0 0 0 0 6 0 0 0 10
6 9 10 22 18 0 0 0 0 6 0 0 0 10
0 9 10 0 18 0 0 0 0 0 0 0 0 10
0 9 10 23 18 0 0 0 0 0 23 0 0 10
0 0 0 23 18 0 0 0 0 0 23 0 0 0
0 0 0 23 18 0 0 0 0 0 23 26 0 0
0 0 0 23 18 0 0 0 0 0 23 26 0 0
0 0 25 23 18 24 0 0 0 24 23 26 0 0
0 0 25 23 18 24 0 0 0 24 23 26 0 0
0 0 25 23 18 24 27 0 0 24 23 26 27 0
0 29 25 23 18 24 27 0 0 24 23 26 27 0
28 29 25 23 18 24 27 0 0 24 23 26 27 0
0 29 25 23 18 24 27 0 0 24 23 26 27 0
0 0 25 23 18 24 27 0 0 24 23 26 27 0
0 30 25 23 18 24 27 0 0 24 23 26 27 0
31 0 25 23 18 24 27 0 0 24 23 26 27 0
31 0 25 23 18 24 27 0 0 24 23 26 27 0
0 32 25 23 18 24 27 0 0 24 23 26 27 0
33 32 25 0 18 0 27 0 0 0 0 0 27 0
33 0 25 0 18 0 0 0 0 0 0 0 0 0
0 34 25 0 18 0 0 0 0 37 38 39 0 0
0 34 0 0 18 0 0 0 0 0 0 39 0 0
35 34 0 0 18 0 0 0 0 40 0 39 0 0
35 0 36 0 18 0 0 0 0 40 0 39 0 0
0 0 0 0 18 0 0 0 0 40 0 39 0 0
0 0 0 0 18 0 0 0 0 0 0 39 0 0
0 42 0 0 18 0 0 0 0 0 0 0 0 0
43 0 0 0 18 0 0 0 0 41 44 0 0 0
0 0 0 0 18 0 0 0 0 0 44 0 0 0
45 0 0 0 18 0 0 0 0 0 0 0 0 0
45 46 47 0 18 0 0 0 0 0 0 0 0 0
45 46 47 0 18 50 0 53 0 0 0 0 0 0
45 46 47 48 18 50 51 0 0 0 0 0 0 0
45 46 47 0 18 50 51 0 0 0 0 0 0 0
45 46 47 0 18 50 51 0 0 0 0 0 0 0
45 46 47 49 18 50 51 0 0 0 0 0 0 0
45 46 47 49 18 50 51 0 0 54 0 0 0 0
45 46 47 49 18 50 51 0 0 0 55 0 0 0
45 46 47 49 18 50 51 52 0 0 55 0 0 0
45 46 47 49 18 50 51 52 56 0 55 0 0 0
45 46 47 49 18 0 51 52 0 0 55 0 0 0
45 46 47 49 18 0 51 52 0 0 55 0 0 0
Raw
wars.css
body {
background-color: #e8e0d7;
}
text {
font-family: Arial, sans-serif;
}
text.year-tick-legend {
font-size: 10px;
text-anchor: start;
dominant-baseline: hanging;
}
rect.rect-usa {
fill: #2544b3;
opacity: 1;
}
rect.rect-ussr {
fill: #a62a3f;
opacity: 1;
}
rect.rect-russia {
fill: #a62a3f;
opacity: 1;
}
rect.rect-all {
fill: #ed6a31;
opacity: 1;
}
line.year-tick {
stroke: #b0bdd9;
stroke-width: 0.5;
opacity: 1;
}
Raw
wars.js
// Global variables
var WarsNames;
var WarsMatrix;
var nOfYears;
var yScale;
var rectWidth = 20;
var rectHeight = 35;
var margin = {
top: 20,
right: 20,
bottom: 20,
left: 20
};
var width = 700 - margin.right - margin.left;
var height = 2400 - margin.top - margin.bottom;
// Utilities
function getRowSum(data, index) {
var sum = 0;
for (var i = 0; i < data[index].length; i++) {
sum += data[index][i];
}
return sum;
}
function getColSum(data, index) {
var sum = 0;
for (var i = 0; i < data.length; i++) {
sum += data[i][index];
}
return sum;
}
// Main unit
d3.csv("wars-list.csv", function(error, data) {
if (error) {
console.log(error);
} else {
WarsNames = data;
d3.text("wars-matrix.csv", function(error, data) {
if (error) {
console.log(error);
} else {
WarsMatrix = d3.csv.parseRows(data).map(function(row) {
return row.map(function(value) {
return +value;
});
});
nOfYears = WarsMatrix.length;
xScale = d3.scale.linear()
.domain([0, WarsMatrix[0].length])
.range([100, width]);
// Draw initial SVG
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 wars = svg.append("g")
.attr("class", "wars");
for (var i = 0; i < nOfYears; i++) {
for (var j = 0; j < WarsMatrix[0].length; j++) {
if (WarsMatrix[i][j] > 0) {
wars.append("rect")
.attr("class", "rect-" + WarsNames[WarsMatrix[i][j] - 1].status)
.attr("x", xScale(j))
.attr("y", i * rectHeight)
.attr("width", rectWidth)
.attr("height", rectHeight);
}
}
}
var years = svg.append("g")
.attr("class", "years");
for (var i = 0; i < nOfYears; i++) {
if ((i + 1946) % 10 === 0) {
years.append("line")
.attr("class", "year-tick")
.attr("x1", 0)
.attr("y1", i * rectHeight)
.attr("x2", width)
.attr("y2", i * rectHeight);
years.append("text")
.attr("class", "year-tick-legend")
.attr("x", 0)
.attr("y", i * rectHeight + 5)
.text(i + 1946);
}
}
}
});
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment