-
Notifications
You must be signed in to change notification settings - Fork 0
/
hcmain.html
194 lines (165 loc) · 9.95 KB
/
hcmain.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
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
<html lang="en"><head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="Visualization Project">
<meta name="author" content="Mark Berman">
<link rel="icon" href="../../favicon.ico">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<link href="css/starter-template.css" rel="stylesheet">
<link href="css/totalhatecrimeincidents.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/d3-annotation/1.18.0/d3-annotation.css" />
<link href="css/d3-tip.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<title>Domestic Hate Crime (2005 - 2015)</title>
</head>
<body>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">CS498 - Final Project</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="hcmain.html">Home</a></li>
<li ><a href="hcbiassum.html">Scene 2</a></li>
<li ><a href="hcoffendsum.html">Scene 3</a></li>
<li ><a href="hcjumpoff.html">Scene 4</a></li>
<li ><a href="hcexploration.html">Final</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<!-- Begin page content -->
<div class="container"> <!-- start of main container -->
<div class="alert alert-info" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span></button>
<strong></strong> Tooltips are available. Use your mouse to hover over any circle on the line chart to see its tooltip.
</div>
<div class="container">
<div class="col-lg-12">
<div class="page-header">
<h2>Hate Crime in the United States: 2005 - 2015</h2>
</div>
<p class="lead">Stories of domestic hate crime seem to dominate cable television news and Facebook feeds. How rampant is it; and are there ways to quantify it? The answer is yes, courtesy of the <b>Department of Justice's (DOJ's) Uniform Crime Reporting</b> program.</p>
<div class="text-center">
<button type="button" class="btn btn-link btn-lg" data-toggle="modal" data-target="#myModal"><p class="lead">About How the DOJ Tracks and Reports Hate Crimes As Part of Its Uniform Crime Reporting Program</p></button>
</div>
</div>
</div>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<object type="application/pdf" data="docs/abouthatecrime_final.pdf" width="100%" height="500" style="height: 85vh;">No Support</object>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="container">
<div class="col-lg-12">
<p class="lead">The Department of Justice has been tracking domestic hate crimes since 1995. This is in response to section 534 of the United States Code which states the following:</p>
<blockquote class="blockquote">
<p class="mb-0">“The Attorney General shall acquire data, for each calendar year, about crimes that manifest evidence of prejudice based on race, gender and gender identity, religion, disability, sexual orientation, or ethnicity, including where appropriate the crimes of murder, non-negligent manslaughter; forcible rape; aggravated assault, simple assault, intimidation; arson; and destruction, damage or vandalism of property.”
</p>
</blockquote>
<p class="lead">The highest levels of reported hate crimes occurred during the run up to the 2008 presidential election in which Barack Obama was the first person of color to be elected to the office of the President of the United States. Hate crimes, reported by 15,000 state and local law enforcement agencies to the FBI, dropped by 25 percent during President Obama’s first term in office. The low water mark for hate crimes occurred in 2014 with 5479 incidents reported to the FBI. 2015 – the latest reporting period – saw an increase in hate crime reporting. While the magnitude of this increase is marginal, 2015 marked the start of a divisive presidential campaign which polarized the American public. The divisive rhetoric of the campaign may have galvanized more offenders to commit hate crimes. We will need to wait until the end of 2017 when the Department of Justice releases hate crime statistics for 2016 to see if the upward spike in 2015 was the beginning of a trend or an aberration. Reporting by the Southern Poverty Law Center and the national news sources indicate that hate crimes are on the rise, but we will have to wait until the 2016 Department of Justice report is released to the public.
</p>
<p class="lead">While we are not able to quantify hate crime levels for 2016 and 2017 as of yet, it is safe to assume that hate crime is still a blemish on the American experience.
</p>
<br>
<h4 class="text-center">Hate Crime Incidents</h4>
<h5 class="text-center">(2005 - 2015)</h5>
<div id="totalincidents-svg"></div> <!-- main hate crime incident image goes here -->
</div>
</div>
<br>
<br>
<br>
<br>
<br>
<div class="container" id="aboutVisualizationX" style="padding-bottom: 30px;"> <!-- /start aboutVisualizationX container -->
<div class="text-center">
<button type="button" class="btn btn-default btn-lg" data-toggle="modal" data-target="#myModal2">
About the Vizualization</button>
</div>
<!-- Modal -->
<div id="myModal2" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<object type="application/pdf" data="docs/cs498-finalProjectEssay.pdf" width="100%" height="500" style="height: 85vh;">No Support</object>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div> <!-- /end aboutVisualizationX container -->
<div class="container"> <!-- /start of next page container -->
<div class="col-lg-12 text-center" >
<a href="hcbiassum.html">
<button type="button" class="btn btn-default btn-lg btn-primary">
<span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span>Next
</button></a>
</div>
</div> <!-- /end of next page container -->
</div> <!-- /end of main container -->
<footer class="footer text-center">
<div class="container">
<p class="text-muted"></p>
<strong>Author <a href="https://www.linkedin.com/in/mark-berman-b965961/" target="_blank">Mark Berman</a></strong>
</div>
</footer>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-annotation/1.18.0/d3-annotation.js"></script>
<!--<script src="lib/d3-annotation.min.js"></script> -->
<script src="lib/d3-tip.js"></script>
<script src="lib/totalhatecrimeincidents.js"></script>
<script>
window.setTimeout(function() {
$(".alert").fadeTo(500, 0).slideUp(500, function(){
$(this).remove();
});
}, 10000);
</script>
</body>
</html>