sonar.html

<!DOCTYPE HTML>
<!--
	Hyperspace by HTML5 UP
	html5up.net | @ajlkn
	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html lang="en">
	<head>
		<title>Sonar Crime in Vancouver - Momchil Kutev - UI/UX Designer - Portfolio - mkutev</title>
		<meta name="author" content="Momchil Kutev">
		<meta name="description" content="Momchil Kutev (mkutev) UI/UX Design Portfolio, 2019. User Experience UX, User Interface UI Design.">
		<meta name="keywords" conent="Momchil, Kutev, mkutev, portfolio, Momchil Portfolio, UX, UI, User experience, User interface, UX portfolio, UI/UX, UX/UI, mkutev portfolio">
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<link rel="stylesheet" href="assets/css/main.css" />
	</head>
	<body>

		<!-- Header -->
			<header id="header" class="custom-red">
				<a href="index.html" class="title">mk</a>
				<nav>
					<ul>
						<li><a href="index.html">Home</a></li>
						<li><a href="generic.html" class="active">Generic</a></li>
						<li><a href="elements.html">Elements</a></li>
					</ul>
				</nav>
			</header>

		<!-- Wrapper -->
			<div id="wrapper" class="custom-white">

				<!-- Main -->
					<section class="wrapper" id="top">
						<div class="inner">
							<h1 class="major red-line">Crime in Vancouver, Visualized</h1>
							<p>The following radar visualization is created using D3.js as a final project for IAT355. This visualization is intended to explore possible seasonal trends in crimes committed within the Vancouver area annually. The data used is provided by the Vancouver Police Department and can be found in the Open Data Catalogue from the City of Vancouver's <a href="http://data.vancouver.ca/datacatalogue/crime-data.htm">website</a>. The eight different types of crimes listed below are compared between 2010 up to and including 2015 and the chart for each year is listed from earliest to latest below. You can hover over the different shapes within the chart as well as over the individual points for each month. In the future, I would like to add much more interaction by combining all the charts into one visualization with a selectable legend that allows for easier comparison between the years as well as customizable charts with selectable data to be featured.</p>  

							
							<!-- <span class="image fit"><img src="images/233/233render.jpg" alt="" /></span> -->
						</div>
					</section>

					<section class="wrapper">
						<div class="inner">
							<h2>2015</h2>
							
							<div class="row">
								<div class="radar">
									<div class="radarChart2015">

									</div>
								</div>
							</row>

							<div class="row">
								<div class="sonar-legend">
									<p id="yellow">Theft From Vehicle</p>
									<p id="blue">Break and Enter</p>
									<p id="green">Mischief</p>
									<p id="pink">Offence Against a Person</p>
									<p id="teal">Other Theft</p>
									<p id="brown">Theft of Bicycle</p>
									<p id="red">Theft of Vehicle</p>
									<p id="purple">Vehicle Collision or Pedestrian Struck</p>
								</div>
							</row>
						</div>
					</section>

					
					<script src="assets/js/radarChart.js"></script>
					<script src="assets/js/radarData.js"></script>


					
					<section class="wrapper">
						<div class="inner">
							<div class="bottom-bar">
								<a href="#header" class="button big">Back To Top</a>
								<a href="index.html" class="button big">Home</a>
							</div>
						</div>
					</section>

			</div>

		<!-- Footer -->
			<footer id="footer" class="wrapper">
				<div class="inner">
					<ul class="menu">
						<li style="color:black">&copy; Momchil Kutev Portfolio. All rights reserved.</li>
					</ul>
				</div>
			</footer>

		<!-- Scripts -->
			<script src="assets/js/jquery.min.js"></script>
			<script src="assets/js/jquery.scrollex.min.js"></script>
			<script src="assets/js/jquery.scrolly.min.js"></script>
			<script src="assets/js/skel.min.js"></script>
			<script src="assets/js/util.js"></script>
			<!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]-->
			<script src="assets/js/main.js"></script>

	</body>
</html>