-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathhome.html~
170 lines (141 loc) · 4.73 KB
/
home.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
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href='http://fonts.googleapis.com/css?family=Fanwood+Text'
rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Cardo'
rel='stylesheet' type='text/css'>
<link
href='http://fonts.googleapis.com/css?family=Raleway:100,400,200,300'
rel='stylesheet' type='text/css'>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src="http://d3js.org/queue.v1.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<!-- <script src="js/crossfilter.min.js"></script> -->
<script src="//cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.1/crossfilter.js"></script>
<!-- <script src="js/sankey.js"></script> -->
<script src="js/interactive3.js"></script>
<script src="js/bullet.js"></script>
<script src="js/charts.js"></script>
<script src="js/feedback.js"></script>
<script type="text/javascript">
<!--
var feedList = true
function toggleFeedList() {
feedList = !feedList;
var table = $("#table-wrapper");
var label = $("#button-showflist > span");
var opt = {
duration : 500,
easing : "swing"
};
feedList ? label.text("Hide feedback list") : label
.text("Show feedback list");
table.slideToggle(opt);
}
function scroll(value) {
$("html,body").animate({scrollTop:value}, "slow");
}
//-->
</script>
<title>Information Visualization Project</title>
</head>
<body>
<!-- Contenitore della visualizzazinoe interattiva -->
<div id="wrapper">
<header id="header">The filtered coffee survey</header>
<!-- Progress bar div -->
<div id="loading" style="display: block">
<img src="images/loading.gif"/>
</div>
<!-- Contenitore dei dettagli caffè, della mappa e del riepilogo strutture -->
<div>
<!-- Contenitore degli elementi di dettaglio della regione selezionata -->
<div id="coffee-details" class="inline">
<h2 id="region-name">Italia</h2>
<div id="consumes">
<h3>Country's percentage by category</h3>
<div style="font-size:10pt;">Total green coffe imported: <span id="green-country" style="font-weight: 300;"></span> Kg</div>
<div style="font-size:10pt;">Region's green consumption: <span id="green-region" style="font-weight: 300;"></span> Kg</div>
<br/>
<div id="consume-chart" class="chart"></div>
</div>
<div id="composition">
<h3>Coffee's varieties consumes (<span id="sold-magnitude"></span> Kg)</h3>
<div id="fan-chart" class="chart"></div>
</div>
</div>
<div id="map-container" class="inline">
<!-- Contenitore della mappa geografica interattiva -->
<div id="map"></div>
</div>
<div id="hotel-container" class="inline">
<!-- Hotel rank -->
<!-- <div id="rank-wrapper" class="inline">
<p>Valutazione struttura</p>
<div id="rank"></div>
</div> -->
<div id="hotels">
<h3 class="inline">
<span> <img class="ball inline" src="images/info.png"
style="padding: 5px">
</span> <span id="hotels-number">NA</span> facilities in the selected region
</h3>
<!-- Tabella dei feedback -->
<table id="hotel-table" class="table table-hover">
<thead>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
<!-- Contenitore dell'analisi dei feedback e dei grafici temporali -->
<div id="feedback-details">
<h2>
Feedback details <span id="hotel-name" style="display: none;">Region</span>
</h2>
<!-- Grafico della composizione dei feedack dei turisti -->
<div id="turist" class="inline">
<h3>Feedback count per nationality</h3>
<div id="turist-chart" class="chart"></div>
</div>
<!-- Rappresentazione della sentiment analysis con foucs sulla struttura selezionata -->
<div id="sentiment" class="inline">
<h3>Rating driver detail [ <span id="date-extent"></span> ]</h3>
<div id="feedback-analysis">
<!-- Sentiment analysis -->
<div class="inline">
<div id="feedback"></div>
</div>
<!-- Grafico dell'andamento delle valutazioni -->
<div id="trend-analysis" class="inline"></div>
</div>
<!-- Tabella dei feedback -->
<div style="display: none;">
<h3 class="inline">
Feedback trend <a onclick="toggleFeedList();"
style="cursor: pointer; margin-left: 50px">Hide feedback list
</a>
</h3>
<div class="inline table-wrapper" style="display: none;">
<div class="table-scroll">
<table id="feedback-table" class="table table-hover">
<thead>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<footer id="footer"></footer>
</body>
</html>