-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
60 lines (53 loc) · 2.62 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
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Hate Crime in the US</title>
<link rel='stylesheet' href='css/reset.css' type='text/css' />
<link rel='stylesheet' href='css/style.css' type='text/css' />
</head>
<body>
<div id='map'>
<div id='controls'>
</div>
<div id='attribution'>
Produced by <a href="http://twitter.com/ChadLawlis" target="_blank">Chad Lawlis</a>. Maps designed in <a href="http://tilemill.com" target="_blank">TileMill</a>.<br>Map data © <a href="http://openstreetmap.org" target="_blank">OpenStreetMap</a> contributors, CC BY-SA.
</div>
<div class='wax-legend'></div>
</div>
<div id='header'>
<h1><span>Hate Crime</span> in the US</h1>
<ul class='layers' id='map-navigation'>
<li><a class='active' data-layer='chadlawlis.hate-10' data-year='10' href='#'>2010</a></li>
<li><a data-layer='chadlawlis.hate-08' data-year='08' href='#'>2008</a></li>
<li><a data-layer='chadlawlis.hate-06' data-year='06' href='#'>2006</a></li>
<li><a data-layer='chadlawlis.hate-04' data-year='04' href='#'>2004</a></li>
</ul>
</div>
<div id='sidebar'>
<div id='about'>
<h1>Each year, the <span>Federal Bureau of Investigation</span> collects and produces the <span><ital>Hate Crime Statistics</ital></span> publication, presenting data regarding crimes that were motivated in whole or in part by a bias against the victim's perceived <span>race</span>, <span>religion</span>, <span>ethnicity</span>, <span>sexual orientation</span>, or <span>disability</span>.<br><br>This site is a compilation of this data from 2004 to 2010 on a biennial basis, broken down by state. Explore the data by navigating through the year tabs above while toggling the agencies layer on or off using the switch below. Hover over each state and its agency marker for more information.</h1>
</div>
<div id='agency-header'>
<h1>Agencies:</h1>
<ul class='toggle-agencies' id='agency-navigation'>
<li><a class='active toggle-agencies' data-layer='chadlawlis.hate-dot-10' href='#'>Toggle Off</a></li>
</ul>
</div>
<div id='tooltip'></div>
</div>
<div id='fbi-logo'>
<a href="http://fbi.gov" target="_blank"><img src="logos/FBI-micro.png" width="40"></a>
</div>
<div id='ds-logo'>
<a href="http://developmentseed.org" target="_blank"><img src="logos/ds-logo.png" width="40"></a>
</div>
<div id='ds-wordmark'>
<a href="http://developmentseed.org" target="_blank"><img src="logos/ds-wordmark.png" width="80"></a>
</div>
<script src='js/jquery.min.js'></script>
<script src='js/modestmaps.min.js'></script>
<script src='js/wax.mm.min.js'></script>
<script src='js/app.js'></script>
</body>
</html>