-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·96 lines (95 loc) · 6.42 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
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Slate Gun Deaths</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<header class="navigation-head">
<nav>
<ul class="navigation-list">
<li class="font_5 blue"><a href="#methodology" class="nav-a">Methodology</a></li>
<li class="font_5 blue"><a href="#credits" class="nav-a">Credits</a></li>
</ul>
</nav>
</header>
<div class="container full-height">
<section id="viz">
<div class="row center-items margin-top">
<div class="col-12 full-width center-container">
<div id="tooltip-container"></div>
<div class="viz full-width center-container"></div>
</div>
</div>
<div class="row">
<div class="col-12 label-div">
<h1 class="font_0">Gun Victims: <span class="location-text">USA</span></h1>
<p class="font_4">(Dec 2012 - Dec 2013)</p>
<h3 class="font_5">Total Deaths: <span class="death-count">12070</span></h3>
<h5 class="font_4"><span class="red">Female</span> Deaths: <span id="female-total">1850</span> ( <span id="female-child">77</span> Children, <span id="female-teen">69</span> Adoloscents, <span id="female-adult">1676</span> Adults )</h5>
<h5 class="font_4"><span class="blue">Male</span> Deaths: <span id="male-total">10153</span> ( <span id="male-child">155</span> Children, <span id="male-teen">503</span> Adoloscents, <span id="male-adult">9310</span> Adults )</h5>
</div>
</div>
<div class="row center-items full-height">
<div class="col-12 full-width center-container full-height">
<div id="gridtip-container"></div>
<div class="grid full-width center-container full-height"></div>
</div>
</div>
</section>
<section id="methodology">
<div class="row center-items full-height margin-top">
<div class="col-12 full-width center-container full-height margin-left">
<h3 class="font_0">Methodology: </h3>
<p class="font_5">Here are a few points about how to navigate about this visualization</p>
<ol class="font_5 margin-left">
<li>Upon loading, the first visual will be a chloropleth showing the deaths per state. Darker implies greater.</li>
<li>Click on state to zoom in onto a state and get details. This will also show a grid with details about each person</li>
<li>Double click on state to zoom out.</li>
<li>You can hover over any element to even more details.</li>
<li>The bubbles on the map are colored <span class="blue">blue</span> and <span class="red">red</span> to show male and female deaths(respectively) normalized by the population in that city/town/county.</li>
<li>On the grid, the <span class="red">reds</span> show female deaths and the <span class="blue">blues</span> show male deaths. The <span class="grey">greys</span> depicts unknown gender. The darkness of the colors are based on the age groups(Child/Adoloscent/Adult) of the victim.
Darker colors correspond to higher age group.</li>
</ol>
</div>
</div>
</section>
<section id="credits">
<div class="row center-items full-height">
<div class="col-12 full-width center-container full-height margin-left">
<h3 class="font_0">Credits: </h3>
<p class="font_5">This visualization was a project for <a href="https://www.evl.uic.edu/cs594/" target="_blank">CS 594 Visual Data Science</a>, made using
HTML, CSS, JQuery and D3.js and data from Slate Magazine. I claim no ownership or credits for the libraries used in this project and convey my sincere gratitude to the
developers, original content creators, and the data aggregators.</p>
<ul class="font_5 margin-left">
<li>Project: <a href="https://d3js.org/" target="_blank">D3.js</a><br/>License: BSD</li>
<li>Project: <a href="https://github.com/topojson/topojson" target="_blank">Topojson</a></li>
<li><a href="https://bost.ocks.org/mike/" target="_blank">Mike Bostock</a>'s <a href="https://bl.ocks.org/mbostock" target="_blank">bl.ocks</a></li>
<li>Project: <a href="https://code.jquery.com/" target="_blank">jQuery</a><br/>License: MIT and jQuery License</li>
<li>Project: <a href="http://getbootstrap.com" target="_blank">Bootstrap</a><br/>License: MIT and docs released under Creative Commons</li>
<li>Data from <a href="http://www.slate.com/articles/news_and_politics/crime/2012/12/gun_death_tally_every_american_gun_death_since_newtown_sandy_hook_shooting.html" target="_blank">Slate Magazine</a></li>
</ul>
</div>
</div>
</section>
</div>
<div class="center-container container center-containers footer margin-top">
<div class="row center-items">
<div class="col-12 center-items">
<p class="font_5">Made by <a href="https://cjagad2.people.uic.edu/" target="_blank">Ganesh Jagadeesan</a></p>
</div>
<div class="col-12 center-items">
<p class="font_4"><a href="https://github.com/ElefHead" target="_blank">Github</a> | <a href="https://www.linkedin.com/in/ganeshjcs" target="_blank">LinkedIn</a></p>
</div>
</div>
</div>
<div class=""></div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/topojson/3.0.2/topojson.min.js"></script>
<script type="text/javascript" src="index-test.js"></script>
</body>
</html>