-
Notifications
You must be signed in to change notification settings - Fork 1
/
radar.html
151 lines (132 loc) · 5.31 KB
/
radar.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">
<link rel="stylesheet" href="src/radar-chart.css">
<link rel="stylesheet" href="src/radar-main.css">
<link rel="shortcut icon" href=http://www.freshdesignweb.com/wp-content/themes/fv28/images/icon.ico />
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
</head>
<body class='background'>
<h1>Radar Chart</h1>
<p> Click on buttons to add country onto the Radar Chart.</p>
<p> The average score of schools in each country from 2011 - 2016 will display</p>
<p> Please remove countries in the same order to avoid color confusion. Also please use Chrome Browser.</p>
//for radar chart
<div class='chart-container'></div></br></br>
//display all buttons here
<div id="buttons"><li id="refresh"><a data-country= data-action="1" class="tag" id="button">Refresh</a></li><br></div>
<script type="text/javascript" src="src/radar-chart.js"></script>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="http://d3js.org/d3.v3.js"></script>
<script src="https://rawgit.com/tpreusse/radar-chart-d3/master/src/radar-chart.js"></script>
</body>
<script>
// setting the default configuration for radar
RadarChart.defaultConfig.color = function(i) { c = colorArray ; return c[i];}
//var colorScale = d3.scale.category20();
//RadarChart.defaultConfig.colors = colorScale;
RadarChart.defaultConfig.radius = 3;
RadarChart.defaultConfig.w = 450;
RadarChart.defaultConfig.h = 450;
RadarChart.defaultConfig.levels = 10;
// declaring needed variables
var colorArray = [];
var colorDict = {};
var radar_data = [];
var dict = {};
var finalData = [];
var chart = RadarChart.chart();
var cfg = chart.config(); // retrieve default config
var svg = d3.select('body').append('svg').classed('svg', 1).attr('width', cfg.w + 50).attr('height', cfg.h + cfg.h / 4);
var colorIndex = 0;
// read the file when document is ready
$(document).ready(function() {
$.ajax({
type: "GET",
url: "Radar_Country_Score.csv",
dataType: "text",
success: function(data) {extractData(data);}
});
});
// generate 50 random color
$(document).ready(function() {
for (i=0; i<50; i++)
colorArray.push("#" + ((1 << 24) * Math.random() | 0).toString(16))
});
//function to process csv data and prepare the data structure
function extractData(csv) {
var lines = csv.split(/\r\n|\n|\r/); //spliting lines
for (var i=0; i<lines.length - 1; i++) {
var data = lines[i].split(","); //splitting lines into elements
displayData(String(data[0]));
dict[data[0]] = i; //storing key value pair of country name and index for searches
var _object = {};
_object.className = String(data[0]);
axes_list = []
axes_list.push({ axis: "teaching", value: parseFloat(data[1])});
axes_list.push({ axis: "total_score", value: parseFloat(data[2])});
axes_list.push({ axis: "research", value: parseFloat(data[3])});
axes_list.push({ axis: "citations", value: parseFloat(data[4])});
axes_list.push({ axis: "income", value: parseFloat(data[5])});
_object.axes = axes_list
radar_data.push(_object)
}
}
//take action when user clicks on buttons
$("#buttons").on('click', '#button', function() {
if (this.getAttribute("data-action") == "1") {
$(this).css('color', 'white');
addRadar(this.getAttribute("data-country"));
// colorDict[$(this).text()] = colorIndex;
//colorArray.push(String($("polygon")[finalData.length - 1 ].getAttribute('style').substring(8, 25)));
// index = colorDict[$(this).text()]
$(this).css('background-color', colorArray[colorIndex]);
colorIndex++;
this.setAttribute("data-action", "2");
} else {
$(this).css('background-color', '#f2f2f3');
$(this).css('color', '#778187');
// $("a").each(function(){
// alert($(this).children().css('background-color)');
// $(this).children().css('background-color', colorArray[$(this).text()]);
// });
removeRadar(this.getAttribute("data-country"));
//colorArray.pop();
this.setAttribute('data-action', "1");
colorIndex--;
}
});
// refresh buttons for user to refresh
$("#refresh").on('click', '#button', function() {
location.reload();
});
// function for adding a new data onto radar chart
function addRadar(country) {
index = dict[country];
finalData.push(radar_data[index])
displayRadar();
}
// function for removing a new data onto radar chart
function removeRadar(country) {
for (i=0; i< finalData.length; i++) {
if (finalData[i].className == country) {
finalData.splice(i, 1);
}
displayRadar();
}}
// function for dsiplayng a new data onto radar chart
function displayRadar(){
if (finalData == 0) {
//colorArray.pop();
colorIndex--;
}
d3.selectAll("g").remove();
svg.append('g').datum(finalData).call(chart);
}
// display the buttons
function displayData(data) {
var button = $('<li id="buttonlist"><a data-country="' + data + '" data-action="1" class="tag" id="button">' + data + '</a></li>');
button.appendTo('#buttons');
}
</script>