-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
91 lines (87 loc) · 3.73 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSRankings可视化</title>
<link href="css/index.css" type="text/css" rel="stylesheet" />
<link href="css/d3-tip.css" type="text/css" rel="stylesheet" />
<link href="css/jquery.range.css" type="text/css" rel="stylesheet" />
</head>
<body>
<script src="js/jquery/jquery-3.2.1.min.js"></script>
<script src="js/jquery/jquery-3.2.1.js"></script>
<script src="js/jquery/jquery.range.js"></script>
<script src="js/d3/d3-v5.12.0/d3.min.js"></script>
<script src="js/d3/d3-tip.js"></script>
<script>
// global layout variables
var num_top_k = 50;
var linechart_w = 900 + 75, linechart_h = 75,
barchart_w = 800, barchart_h = 500,
sunburst_w = 800, sunburst_h = 400;
</script>
<!-- 主视图：折线图 -->
<div class="svgContainer" id="linechartdiv">
<h1 align="center">
CSRankings: Top Faculties
</h1>
<div class="btn-group" data-toggle="buttons" style="position: relative; left: 260px;">
<h3>
Select an area：
<label for="" class="btn btn-primary">
<input type="radio" name="selected_area" onclick="read_data(this.value, begin_year_linechart, end_year_linechart, num_top_k)" checked="checked" value="AI">AI
</label>
<label for="" class="btn btn-primary">
<input type="radio" name="selected_area" onclick="read_data(this.value, begin_year_linechart, end_year_linechart, num_top_k)" value="Systems">Systems
</label>
<label for="" class="btn btn-primary">
<input type="radio" name="selected_area" onclick="read_data(this.value, begin_year_linechart, end_year_linechart, num_top_k)" value="Theory">Theory
</label>
<label for="" class="btn btn-primary">
<input type="radio" name="selected_area" onclick="read_data(this.value, begin_year_linechart, end_year_linechart, num_top_k)" value="Interdisciplinary Areas">Interdisciplinary Areas
</label>
</h3>
</div>
<div style="position: relative; left: 260px;">
<h3> Select range of years： </h3>
<input type="hidden" id="year-slider" value="2010,2018" />
<script>
$(document).ready(function() {
$('#year-slider').jRange({
from: 1970,
to: 2019,
step: 1,
format: '%s',
width: 300,
showLabels: true,
showScale: false,
isRange: true,
width: 450,
theme: "theme-green",
ondragend: function() {
let v = document.getElementById('year-slider')
.getAttribute('value');
v = v.split(',');
begin_year_linechart = parseInt(v[0]);
end_year_linechart = parseInt(v[1]);
read_data(area_linechart, begin_year_linechart, end_year_linechart, num_top_k);
}
});
});
</script>
</div>
<br>
<!--<svg id="linechartSVG">
</svg>-->
</div>
<!-- top 10 publication：条形图 -->
<div class="svgContainer" id="barchartdiv">
</div>
<!-- 领域组成：sunburst图 -->
<div class="svgContainer" id="sunburstdiv">
</div>
<script src="js/vis2_barchart.js"></script>
<script src="js/vis1_linechart.js"></script>
<script src="js/vis3_sunburst.js"></script>
</body>
</html>