-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
71 lines (54 loc) · 3.8 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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Website short description." />
<meta name="keywords" content="website main keywords" />
<title>CS 526 CG II Proj 1</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header"><h1>CS 526 CG II Proj 1</h1></div>
<div id="sub_header">Jie Jiang</div>
<div id="main_content_top"></div>
<div id="main_content">
<div class="content">
<h2>X-guy</h2>
<p></p>
<p></p>
<p class="quote">The X-guy, who fights a never ending battle for truth and justice, and always takes the CTA instead of flying or driving in the city. </p>
<p>This application is basically a interactive map of Chicago, where you can fly around and check crime and traffic information within it. </p>
<p>This map tracks the real-time Chicago L lines train tracking information. So any train showing on the map should be the actual location they are at right now. The map also visualized past Chicago crime records that pre-downloaded from City of Chicago Data Center. You can filter certain those records to get a more brief view or you can aggregate all data on the map for an overview. I also used some past crime records to simulate a real-time crime monitor system. So our virtual hero can find somewhere to go instead of hanging around the city with his skin tight jeans.</p>
<h2>Credits</h2>
<p>1. Real-time CTA-L-line train tracking information comes directly from CTA with their developers' API</p>
<p>From their API, a developer can get a xml file with detailed information regarding all active trains on a specific line. I use their train id to track each train and update its position every 20 seconds. I attached the train id with the train in the map, in order to give a sense motion for the observers.</p>
<p>2. Community names and boundaries, crime records, CTA-L-line route and stations information come from Chicago Data Portal.</p>
<p>For communities' boundaries and names, I extract the information by parsing a xml file, connects all points along the edge of each community and put its name in the middle. The only issue with this is, some points on the edge stays too close and the omegalib seems to complain a lot about it.(not necessarily identical, even when they're just close together.) So I did set a threshold to eliminate this problem. And actually it makes the line looks better since it kinda smooth it out. </p>
<p>For crime records, I built a MySQL database and loaded filterred records into my laptop. And I can access the data through a mysql connector for python. This approach did save some start up time for me, but I have to handle with the lag from communication. That would be talked in details later.</p>
</div>
<div class="menu">
<div class="menu_title">All about the project</div>
<ul>
<li><a href="./index.html" class="menu_link">Introduction</a></li>
<li><a href="./howto.html" class="menu_link">How_to</a></li>
<li><a href="./funstuff.html" class="menu_link">fun stuff</a></li>
</ul>
<div class="menu_title">Resources</div>
<ul>
<li><a href="https://github.com/jjsjann123/CS526_cave" class="menu_link">github_source</a></li>
</ul>
<div class="menu_title">I have no friends, still me</div>
<ul>
<li><a href="http://www.flickr.com/photos/alex_jann_2012/" class="menu_link">flickr</a></li>
<li><a href="https://www.facebook.com/jie.jiang.10888" class="menu_link">facebook</a></li>
</ul>
</div>
<div id="clear"></div>
</div>
<div id="main_content_bottom">
</div>
<div id="footer"><strong>Copyright © 2007</strong> | <a href="#">Jie Jiang</a> | <b>Design by</b> <a href="http://www.pikanai.com">Pikanai.com</a></div>
</div>
</body>
</html>