-
Notifications
You must be signed in to change notification settings - Fork 0
/
csv2radar.html
110 lines (94 loc) · 2.74 KB
/
csv2radar.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
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">
<link rel="stylesheet" href="radar-chart.css">
<head>
<style>
body {
padding: 20px;
}
.radar-chart .area {
fill-opacity: 0.7;
}
.radar-chart.focus .area {
fill-opacity: 0.3;
}
.radar-chart.focus .area.focused {
fill-opacity: 0.9;
}
.area.germany, .germany .circle {
fill: #FFD700;
stroke: none;
}
.area.argentina, .argentina .circle {
fill: #ADD8E6;
stroke: none;
}
</style>
<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
<script type="text/javascript" src="radar-chart.js"></script>
</head>
<body onload='showRadar()'>
<h1>Scoreboard</h1>
<p>Include data in CSV format. The <strong>first row are the headers</strong> and the <strong>first column is the class names.</strong></p>
<textarea style="font-size:.8em" id="data" cols="60" rows="6">name,strength,intelligence,charisma,dexterity,luck
Hodor,19,2,4,4,7
Jon Snow,14,15,18,14,7
Tyrion Lannister,8,19,7,5,10
Eddard Stark,12,13,17,12,0</textarea>
<p>
<button onclick='showRadar()' class="btn btn-default" style="width:200px;height:50px;">Update!</button>
</p>
<script type="text/javascript">
function showRadar(){
var data = [];
var chart = RadarChart.chart();
var c = document.getElementById("data").value,
nebData = document.getElementById("data").value,
w = 400,
h = 400,
csv = c.split("\n").map(function(i){return i.split(",")})
headers = []
csv.forEach(function(item, i){
if(i==0){
headers = item;
}else{
newSeries = {};
item.forEach( function(v, j){
if(j==0){
newSeries.className = v;
newSeries.axes = [];
}else{
newSeries.axes.push({"axis":[headers[j]], "value": parseFloat(v)});
}
});
data.push(newSeries);
}
})
RadarChart.defaultConfig.radius = 3;
RadarChart.defaultConfig.w = w;
RadarChart.defaultConfig.h = h;
RadarChart.draw("#chart-container", data);
function animate(elem,time) {
if( !elem) return;
var to = elem.offsetTop;
var from = window.scrollY;
var start = new Date().getTime(),
timer = setInterval(function() {
var step = Math.min(1,(new Date().getTime()-start)/time);
window.scrollTo(0,(from+step*(to-from))+1);
if( step == 1){ clearInterval(timer);};
},25);
window.scrollTo(0,(from+1));
}
var divVal = document.getElementById('chart-container');
animate(divVal,600);
}
</script>
<div id="chart-container"></div>
<script type="text/javascript">
//RadarChart.defaultConfig.levelTick = true;
</script>
</body>
</html>