-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
124 lines (108 loc) · 4.77 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
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
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="Center for Digital Research in the Humanities, University of Nebraska">
<meta name="description" content="Analysis of contracts made at several Freedmen's Bureaus in the years following the American Civil War.">
<title>Reconstructing African American Mobility after Emancipation, 1865-1867</title>
<!-- load the script loader -->
<script src="vendor/lab.min.js"></script>
<!-- bootstrap stylesheet -->
<link rel="stylesheet" href="vendor/bootstrap-3.3.7/css/bootstrap.min.css"/>
<!-- map stylesheets -->
<link rel="stylesheet" href="vendor/leaflet-1.2.0/leaflet.css">
<link rel="stylesheet" href="vendor/leaflet.fullscreen-1.4.3/leaflet.fullscreen.css"/>
<link rel="stylesheet" href="vendor/jquery-ui-custom-1.12.1/jquery-ui.min.css"/>
<!-- aurora specific stylesheet -->
<link rel="stylesheet" href="assets/style.css">
</head>
<body>
<header class="site_header">
<div class="container-fluid">
<a class="btn btn-default pull-right about_button" href="about.html" role="button">About</a>
<div class="row">
<div class="col-lg-7">
<h1>Reconstructing African American Mobility after Emancipation, 1865-1867</h1>
<h2>William G. Thomas III, Richard G. Healey, and Ian Cottingham</h2>
</div>
<div class="col-lg-4">
<h3>Labor Contracts of Upper South Freedmen's Bureau Offices</h3>
</div>
</div>
</div>
</header>
<div class="container-fluid">
<div class="row">
<!-- offices navigation -->
<div class="col-md-2">
<h4 class="office_title">Freedmen's Bureau Offices</h4>
<div class="office-btns btn-group-vertical" role="group" aria-label="Hiring Offices">
<button class="btn btn-default btn-office active" onclick="update('All');">All</button>
<button class="btn btn-default btn-office" onclick="update('Alexandria');">Alexandria</button>
<button class="btn btn-default btn-office" onclick="update('Camp Nelson');">Camp Nelson</button>
<button class="btn btn-default btn-office" onclick="update('Chattanooga');">Chattanooga</button>
<button class="btn btn-default btn-office" onclick="update('Louisville');">Louisville</button>
<button class="btn btn-default btn-office" onclick="update('Memphis');">Memphis</button>
<button class="btn btn-default btn-office" onclick="update('Petersburg');">Petersburg</button>
<button class="btn btn-default btn-office" onclick="update('Wisewell Barracks');">Wisewell Barracks</button>
</div>
<div class="panel panel-default panel_key">
<div class="panel-body">
<p>Click on the lines and circle markers to view more information</p>
</div>
</div>
</div><!-- /col-md-2 -->
<!-- map -->
<div class="col-md-10">
<div id="map"></div>
</div>
</div><!-- /row -->
<!-- charts -->
<div class="charts row">
<div id="genderChart" class="col-md-3">
<p>Gender of Contracted Individuals</p>
</div>
<div id="occupationChart" class="col-md-3">
<p>Occupation of Contracted Individuals</p>
</div>
<div id="dclassChart" class="col-md-3">
<p>Destination of Contracted Individuals</p>
</div>
<div id="groupChart" class="col-md-3">
<p>Group Type of Contracts</p>
</div>
</div>
<!-- table of contracts -->
<div class="contracts">
<h2>Contracts for <span id="officeTitle">All</span> <small>(Click column headings to sort)</h2>
</div>
</div><!-- /container -->
<script>
$LAB
.setOptions({ AllowDuplicates:false })
.script("data/contracts_geojson.js")
.script("data/destination_geojson.js")
.script("data/contracts.js")
.script("data/destination_class.js")
.script("data/gender.js")
.script("data/group.js")
.script("data/occupation.js")
.script("data/rr_1861_geojson.js")
.script("data/rr_1870_geojson.js")
// require everything that uses d3
.script("vendor/d3-3.5.6/d3.min.js").wait()
.script("assets/pieChart.js")
.script("assets/table.js")
// bootstrap
.script("vendor/jquery-3.2.1/jquery.min.js").wait()
.script("vendor/bootstrap-3.3.7/js/bootstrap.min.js")
// leaflet
.script("vendor/leaflet-1.2.0/leaflet.min.js").wait()
.script("vendor/leaflet.fullscreen-1.4.3/leaflet.fullscreen.js")
.script("vendor/jquery-ui-custom-1.12.1/jquery-ui.min.js").wait()
.script("vendor/leaflet.slider.js").wait()
.script("assets/map.js").wait()
// everything must be done before script can be loaded
.script("assets/script.js")
</script>
</body>
</html>