-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
91 lines (84 loc) · 4.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
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<link href="styles.css" rel="stylesheet">
<script src="http://d3js.org/d3.v4.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div id="top-section">
<div class="container">
<div class="row" id="title">
<h4>10 Years of School Shootings</h4>
</div>
<div class="row">
<div class="slides">
<div class="col-md-12 slide">
<div id="graph">
</div>
<div>
<center id="filters">
<b>Weapon type: </b> <select id="weapon-type"></select>
</center>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="panel">
<!-- <center>
<div id="controls">
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-2" role="group" aria-label="First group">
<button type="button" id="btn-1" class="btn btn-primary">1</button>
<button type="button" id="btn-2" class="btn btn-light">2</button>
<button type="button" id="btn-3" class="btn btn-light">3</button>
<button type="button" id="btn-4" class="btn btn-light">4</button>
</div>
</div>
</div>
</center> -->
<div className="text">
<h5>The number of school shootings each year for the past 10 years.</h5>
<p>The number of school shootings occurring each year has been increasing. This simple line chart shows just that. We also wanted to show how certain weapons are used more frequently than others. Using the drop down menu, you can see how frequently certain types or combinations of different firearms were used in school shootings over the past ten years. </p>
</div>
</div>
</div>
</div>
<div class="col-md-12 slide">
<div id="graph-d">
<h4 id="graph-d-title"></h4>
</div>
<div id="dropDown graph2-dropdown">
<h4>X-Axis</h4>
<select id="x-value">
<option value="Random Victims">Random Victims</option>
<option value="Targeted Specific Victim(s)">Targeted Victims</option>
<option value="Bullied (Y/N/ N/A)">Bullied</option>
<option value="Domestic Violence (Y/N)">Domestic Violence</option>
<option value="Pre-planned school attack">Pre-planned school attack</option>
</select>
<h4>Y-Axis</h4>
<select id="y-value">
<option value="Killed (includes shooter)">Killed (includes shooter)</option>
<option value="Wounded">Wounded</option>
<option value="Total Injured/Killed Victims">Total Injured/Killed Victims</option>
</select>
<!-- <button id="submit" onclick="setGraph()">submit</button> -->
</div>
<div className="text">
<h5>Binary Attributes of Shootings vs. Attributes of Affected People</h5>
<p>There are numerous attributes that arre difficult to understand the patterns and trends of shootings overall. This dual axis dot plot shows us
different types of causualities and their counts (killed, wounded, total injured) and yes/no data such as if it was a domestic violence relationship, targeted videos, bullying or random victims.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="index.js"></script>
</body>
</html>