forked from nbremer/occupationscanvas
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
91 lines (73 loc) · 3.35 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>
<head>
<meta charset="utf-8">
<!-- Google fonts -->
<link href='https://fonts.googleapis.com/css?family=Oswald:300,400' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Merriweather+Sans:400,700' rel='stylesheet' type='text/css'>
<!-- D3.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<script src="https://d3js.org/queue.v1.min.js"></script>
<!-- stats -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r14/Stats.js"></script>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<!-- Combobox script for the search box -->
<script src="js/bootstrap-combobox.js"></script>
<link href="css/bootstrap-combobox.css" rel="stylesheet">
<!-- Stylesheet -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="cont" class="container-fluid">
<div class="row text-center" style="margin-top: 20px;">
<div class="col-sm-4">
<div id="topTitle" class="title">A Closer Look at Labor</div>
<div id="subTitle">The number of employed persons by occupation & age | US</div>
<div id="topText">In this visualization you can investigate how the 146 million employed persons in 2014 were divided up between
~550 different occupations.
The occupations are grouped and even subgrouped.
Each grey colored circle encloses all occupations that fall under its umbrella name.
Each white circle is finally an actual profession and further shows the age distribution within that occupation.
You can click on any of the circles to zoom in or search for an occupation with the search box below
</div>
<hr>
<div id="searchTitle" class="title">Find an Occupation</div>
<div class="form-group">
<select id="searchBox" class="combobox input-large form-control" style="display: none;" onchange="searchEvent(this.value)">
<option value="" selected="selected">Search...</option>
</select>
</div>
<div class="row text-center" style= "margin-top: 30px;">
<div class="col-sm-6">
<div id="legendTitle">Legend</div>
<div id="legendText">The size of each white circle is scaled according to the number of persons employed.
The bigger the circle, the more people who are working in that occupation
</div>
</div>
<div id="legendRowWrapper" class="col-sm-6">
<div id="legendTitle" style="text-align: center;">Number of employed persons</div>
<div class="legendSubTitle">in thousands</div>
<div id="legendCircles"></div>
</div>
</div>
</div>
<div class="col-sm-8">
<div id="chart"></div>
</div>
</div>
<!-- Attribution -->
<div class="row text-center">
<div class="col-sm-12">
<div id="attribution">
<span>Created by Nadieh Bremer | <a href="https://www.visualcinnamon.com">VisualCinnamon.com</a> |
Data: <a href="http://www.bls.gov/cps/cpsaat11b.htm">Bureau of Labor Statistics</a></span>
</div>
</div>
</div>
</div>
<script src="js/script.js"></script>
</body>
</html>