-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
104 lines (80 loc) · 3.24 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
<!DOCTYPE html>x
<html lang="en">
<!-- <body bgcolor="#D3D3DE"> -->
<body bgcolor="#18111e">
<head >
<meta charset="utf-8">
<title>Blocks of Stops</title>
<link rel="stylesheet" type="text/css" href="overall_main.css">
</head>
<!-- <h1 id="topOfPage" class = 'headline' >Blocks of Stops</h1> -->
<div id="topOfPage" align='center'>
<h1 class='headline' >Stop-and-Frisk in NYC By The Numbers</h1>
<p class='caption'>More information and charts on this topic can be found <a href="https://natashamathur.github.io/nypd_activity_visualized/">here</a>.</p>
</div>
<br></br>
<script src="https://d3js.org/d3.v4.min.js"></script>
<body align='center'>
<h1 class='headline'>Number of Stops from 2009 - 2016: </h1>
<p class='caption' id="yearCaption"></p>
<button class="secondButton" id="all_years"> Rise </button>
</div>
<div class="by_year">
<script src="by_year.js"></script>
</div>
<p class='caption' id="mrCaption"></p>
<div class="by_mr">
<script src="murders.js"></script>
</div>
<br></br>
<br></br>
<br></br>
<h1 class=headline id="Sliders">Focusing on 2011: </h1>
<p class='caption' id="raceCaption"></p>
<div>
<button class="clickedButton" id="raceByPopulation">by Population</button>
<button class="secondButton" id="raceByStops">by Stops</button>
</div>
<div class="rb">
<script src="race2.js"></script>
</div>
<p class= 'caption' id="genderCaption"></p>
<div>
<button class="clickedButton" id="genderByPopulation">by Population</button>
<button class="secondButton" id="genderByStops">by Stops</button>
</div>
<div class="gender_breakdowns">
<script src="gender_breakdowns.js"></script>
</div>
<p id = "boroughCaption" class='caption'> </p>
<div id = "buttons">
<button class="clickedButton" id="boroughByPopulation">by Population</button>
<button class="secondButton" id="boroughByStops">by Stops</button>
</div>
<div class="borough_breakdowns">
<script src="borough_breakdowns.js"></script>
</div>
<p id=outCaption class='caption'> Stop-and-Frisk was initially explained as a way to find and stop people who would later commit crimes.</p>
<div id = "buttons">
<button class="secondButton" id="OutcomeMover">Next: </button>
</div>
<div class="outcomesB">
<script src="outcome_breakdown.js"></script>
</div>
<br></br>
<h1 class='headline' id="Frisked"> Who was frisked? </h1>
<p id=mC class='caption'></p>
<div>
<button class="secondButton" id="MosaicMover">Next Group: </button>
</div>
<div class="mosaic_by_frisk">
<script = src="mosaic_frisk.js"></script>
</div>
<button class="topButton"><a href="#topOfPage">Back to Top</a></button>
<br></br>
<p class='caption'><a href="https://github.com/natashamathur">Natasha Mathur</a> (University of Chicago, MSCAPP'19)<br>Data Sources :
<a href="https://data.cityofnewyork.us/Public-Safety/The-Stop-Question-and-Frisk-Data/ftxv-d5ix/data">NYC Open Data</a>, <a href="https://www.criminaljustice.ny.gov/crimnet/ojsa/indexcrimes/Regions.pdf">Division of Criminal Justice Services</a>
<br>
This page was made using Javascript and D3, and the code can be found <a href="https://github.com/natashamathur/interacting_with_stop_and_frisk">here</a>!<p>
</body>
</html>