Skip to content

Commit 34ed773

Browse files
author
Vincent Timofti
committed
nav bar
1 parent f583f95 commit 34ed773

7 files changed

+133
-9
lines changed

‎css/style.css

+5
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
body {
2+
padding-top: 20px;
3+
padding-bottom: 20px;
4+
}
5+
16
.design2 .dropdown {
27
position: absolute;
38
top: 30px;

‎data/happiness-male-female.csv

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
CountryCode;question_code;mean_male;mean_female
2+
IS;Y11_Q41;8,3;7,4
3+
ME;Y11_Q41;7,5;7,5
4+
MK;Y11_Q41;7,1;6,5
5+
RS;Y11_Q41;7,2;7
6+
TR;Y11_Q41;6,9;5,3
7+
XK;Y11_Q41;6,4;5,9
8+
AT;Y11_Q41;7,7;7,7
9+
BE;Y11_Q41;7,5;7,6
10+
BG;Y11_Q41;6,3;6,6
11+
CY;Y11_Q41;7,8;7,6
12+
CZ;Y11_Q41;7,1;7,2
13+
DE;Y11_Q41;7,3;7,5
14+
DK;Y11_Q41;8,2;8
15+
EE;Y11_Q41;6,7;7,2
16+
EL;Y11_Q41;6,5;6,1
17+
ES;Y11_Q41;7,7;7,4
18+
FI;Y11_Q41;8;7,7
19+
FR;Y11_Q41;7,4;6,9
20+
HR;Y11_Q41;7,3;6,8
21+
HU;Y11_Q41;7;6,9
22+
IE;Y11_Q41;7,5;7,4
23+
IT;Y11_Q41;7,2;6,7
24+
LT;Y11_Q41;7;7,1
25+
LU;Y11_Q41;7,9;7,1
26+
LV;Y11_Q41;6,6;7,2
27+
MT;Y11_Q41;7,2;6,9
28+
NL;Y11_Q41;7,7;7
29+
PL;Y11_Q41;7,3;6,3
30+
PT;Y11_Q41;7,3;7,6
31+
RO;Y11_Q41;7,2;8,2
32+
SE;Y11_Q41;7,7;7,5
33+
SI;Y11_Q41;7,1;6,9
34+
SK;Y11_Q41;6,9;6,9
35+
UK;Y11_Q41;7,6;7,2

‎design1.html

+1
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
<script src="js/jquery-2.2.4.js"></script>
77
<script src="js/bootstrap.js"></script>
88
<script type="text/javascript" src="js/d3.js"></script>
9+
910
<style>
1011
html {
1112
display: table;

‎design2copy.html

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<html>
2+
<head>
3+
<meta charset="utf-8">
4+
<title>Design #2</title>
5+
<link rel="stylesheet" href="css/bootstrap.css">
6+
<script src="js/jquery-2.2.4.js"></script>
7+
<script src="js/bootstrap.js"></script>
8+
<script type="text/javascript" src="js/d3.js"></script>
9+
<link rel="stylesheet" href="css/style.css">
10+
</head>
11+
<body>
12+
<script type="text/javascript" src="js/design2.js"></script>
13+
14+
<div class="container design2">
15+
<h1 class="text-center">Happiness index</h1>
16+
<div class="dropdown">
17+
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
18+
Choose a theme
19+
<span class="caret"></span>
20+
</button>
21+
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu1">
22+
<li><a href="#">Happiness index</a></li>
23+
<li><a href="#">Happiness index: gender comparison</a></li>
24+
<li><a href="#">Satisfaction with education</a></li>
25+
<li><a href="#">Satisfaction with present job</a></li>
26+
<li><a href="#">Satisfaction with present standard of living</a></li>
27+
<li><a href="#">Satisfaction with accommodation</a></li>
28+
<li><a href="#">Satisfaction with family life</a></li>
29+
<li><a href="#">Satisfaction with health</a></li>
30+
<li><a href="#">Satisfaction with social life</a></li>
31+
<li><a href="#">Satisfaction with economic situation of the country</a></li>
32+
</ul>
33+
</div>
34+
35+
<div id="svg-container"><svg></svg></div>
36+
<div id="info-container">
37+
<div id="country"></div>
38+
<div id="mean"></div>
39+
</div>
40+
<div id="legend">
41+
</div>
42+
</div>
43+
</body>
44+
</html>

‎index.html

+27-7
Original file line numberDiff line numberDiff line change
@@ -6,19 +6,39 @@
66
<link rel="stylesheet" href="css/bootstrap.css">
77
<script src="js/jquery-2.2.4.js"></script>
88
<script src="js/bootstrap.js"></script>
9+
<script src="js/d3.js"></script>
10+
<script src="js/nav.js"></script>
11+
<link rel="stylesheet" href="css/style.css">
912
</head>
1013
<body>
1114
<div class="container">
15+
16+
<nav class="navbar navbar-default">
17+
<div class="container-fluid">
18+
<!-- Brand and toggle get grouped for better mobile display -->
19+
<div class="navbar-header">
20+
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
21+
<span class="sr-only">Toggle navigation</span>
22+
<span class="icon-bar"></span>
23+
<span class="icon-bar"></span>
24+
<span class="icon-bar"></span>
25+
</button>
26+
<a class="navbar-brand" href="#">IGR204: Happiness in Europe</a>
27+
</div>
28+
29+
<!-- Collect the nav links, forms, and other content for toggling -->
30+
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
31+
<ul class="nav navbar-nav">
32+
<li><a href="#">Design #1</a></li>
33+
<li><a href="#">Design #2</a></li>
34+
<li><a href="#">Design #3</a></li>
35+
</ul>
36+
</div><!-- /.navbar-collapse -->
37+
</div><!-- /.container-fluid -->
38+
</nav>
1239
<div class="page-header">
1340
<h1>IGR204: Happiness in Europe</h1>
1441
</div>
15-
16-
<ul class="nav nav-pills">
17-
<li role="presentation" class="active"><a href="design1.html">Design #1</a></li>
18-
<li role="presentation"><a href="design2.html">Design #2</a></li>
19-
<li role="presentation"><a href="design3.html">Design #3</a></li>
20-
</ul>
21-
2242
</div>
2343
</body>
2444
</html>

‎js/nav.js

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
$(document).ready(function() {
2+
$("nav a").click(function(event) {
3+
var text = event.target.text;
4+
console.log(text);
5+
6+
$("nav li").removeClass("active");
7+
$(event.target).parent().addClass("active");
8+
9+
switch(text) {
10+
case "Design #1":
11+
break;
12+
case "Design #2":
13+
console.log("ok");
14+
break;
15+
case "Design #3":
16+
break;
17+
default:
18+
}
19+
})
20+
})

‎svg/europe.svg

+1-2
Loading

0 commit comments

Comments
 (0)