-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·1016 lines (853 loc) · 47.9 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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="airplane accident visualization">
<meta name="author" content="">
<link rel="icon" href="img/web-icon.png">
<title>Castle in the Sky</title>
<!-- Bootstrap Core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" media="screen" />
<link rel="stylesheet" type="text/css" href="xbf/worldmap-AirplaneAccidents.css" media="screen" />
<link rel="stylesheet" href="Xinyuan/css/causeAndPhase.css">
<link rel= "stylesheet" type="text/css" href="ruizhao/rz_css/gunviz.css" media= "all">
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,900,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="xusi/xs_css/style.css">
<script type="text/javascript" src="ruizhao/rz_libraries/dictionary.js"></script>
<script type="text/javascript" src="ruizhao/rz_libraries/easeljs-0.5.0.min.js"></script>
<script type="text/javascript" src="ruizhao/rz_libraries/TweenMax.min.js"></script>
<script type="text/javascript" src="ruizhao/rz_libraries/BezierPlugin.min.js"></script>
<script type="text/javascript" src="ruizhao/rz_libraries/Tooltip.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-3509031-10']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<link href="css/grayscale.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
<h4 class="modal-title" id="myModalLabel">Accident Narritive</h4>
</div>
<div class="modal-body" data-spy="scroll" data-target="modal-body"id = "modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn xsbtn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
<h4 class="modal-title" id="myModalLabel2">Safety Rating Criteria</h4>
</div>
<div class="modal-body" data-spy="scroll" data-target="modal-body" id = "modal-body2">
<div class="modal-body narra">
<p>
The safety rating for each airline is based on a comprehensive analysis utilising information from the world's aviation governing body and leading association along with governments and crash data. Each airline has the potential to earn seven stars. For more information see the <a href="disclaimer.php">disclaimer</a>.
</p>
<p>
The 7 star safety assessment criteria for all airlines is as follows
</p>
<h2>Is the airline IOSA certified?</h2>
<p>
If yes two stars are awarded; if not, no star is given.
</p>
<h3>What is IOSA Certification?</h3>
<p>
The IATA* Operational Safety Audit (IOSA) certification audit is an internationally recognised and accepted evaluation system designed to assess the operational management and control systems of an airline. IOSA uses internationally recognised audit principles and is designed to conduct audits in a standardised and consistent manner. Airlines are re evaluated every two years. Registering for IOSA certification and auditing is not mandatory therefore an airline that does not have IOSA certification may have either failed the IOSA audit or alternatively chosen not to participate. <br>
*<abbr title="International Air Transport Association" class="initialism">IATA</abbr> (International Air Transport Association)
</p>
<h2>Is the airline on the European Union (EU) Blacklist?</h2>
<p>
If no a full star is awarded; if yes then no star is given.
</p>
<h3>What is the EU Blacklist?</h3>
<p>
A list of airlines banned from flying into European airspace due to safety concerns arising from alleged poor aircraft maintenance and/or regulatory oversight. Airlines banned by the EU may have a flawless safety record however the potential risk towards passenger safety is deemed by the EU as too high and a ban is put in place.
</p>
<h2>Has the airline maintained a fatality free record for the past 10 years?</h2>
<p>
If yes the airline is awarded a full star; if not then no star is given.
</p>
<p>
A fatality is deemed as the death of crew and/or passengers whilst on board the aircraft due to an accident. If deaths occurred through acts of terrorism, highjackings OR pilot suicide they have not been included. If an airline suffered a fatal accident through no fault of its own such as a runway incursion on the active runway (an incident where an unauthorized aircraft, vehicle or person is on a runway) this has also not been included.
</p>
<h2>Is the airline FAA endorsed?</h2>
<p>
If yes a full star is awarded; if not, no star is given.
</p>
<h3>What is FAA endorsement?</h3>
<p>
In the United States, the Federal Aviation Authority (FAA) has a list that bans countries (not airlines) from flying into American Airspace. The ban arises from a deemed inability to adhere to international aviation standards for aircraft operations and maintenance. According to the FAA Web site, “those that do not meet these international standards cannot initiate new service and are restricted to current levels of any existing service to the United States while corrective actions are underway”. An airline or airlines from a prohibited country may have a flawless safety record however the potential risk to safety is deemed too high by the FAA to allow operations in American airspace.
</p>
<h2>Does the country of airline origin meet all 8 ICAO safety parameters?</h2>
<p>
If yes TWO stars are awarded to the airline. However, if the one criteria that is below the average is so by less than 15 per cent it is considered a pass. If 5 to 7 of the criteria are met one star is awarded. If the country only meets up to four criteria no star is given.
</p>
<h3>What is ICAO and what are the 8 parameters?</h3>
<p>
The International Civil Aviation Organization (ICAO) was created to promote the safe and orderly development of international civil aviation throughout the world. It sets standards and regulations necessary for aviation safety, security, efficiency and regularity, as well as for aviation environmental protection. The 8 ICAO audit parameters that pertain to safety are; Legislation, Organization, Licensing, Operations, Airworthiness, Accident Investigation, Air Navigation Service and Aerodromes. For more information on a particular country visit: <a href="http://www.icao.int/safety/Pages/USOAP-Results.aspx" target="_blank">http://www.icao.int/safety/Pages/USOAP-Results.aspx</a>.
</p>
<h2>Has the airline's fleet been grounded by the country's governing aviation safety authority due to safety concerns?</h2>
<p>
If yes an additional star will be taken off the total for five years from the time of grounding.
</p>
<h2>Does the airline operate only Russian built aircraft? </h2>
<p>
If yes an additional star will be taken off the total.
</p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn xsbtn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Navigation -->
<nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
Menu <i class="fa fa-bars"></i>
</button>
<a class="navbar-brand page-scroll" href="#page-top">
<i class="fa fa-plane"></i> <span class="light">Airplane</span> accidents
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-right navbar-main-collapse">
<ul class="nav navbar-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
<a href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="#about">MH370</a>
</li>
<li>
<a class="page-scroll" href="#download">WORLDMAP</a>
</li>
<li>
<a class="page-scroll" href="#contact">ANALYSIS</a>
</li>
<li>
<a class="page-scroll" href="#airplan">Evaluation</a>
</li>
<li>
<a class="page-scroll" href="#about-us">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Intro Header -->
<header class="intro">
<div class="intro-body">
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<br><br><br><br>
<h1 class="brand-heading">Damn it! We are going to Crash!</h1>
<br><br><br>
<p class="intro-text">All over the world, thousands of people died in airplane accidents every year.
<br>What can we learn from such tragedies?</p>
<a href="#about" class="btn btn-circle page-scroll">
<i class="fa fa-angle-double-down animated"></i>
</a>
</div>
</div>
</div>
</div>
</header>
<!-- About Section -->
<section id="about">
<div class="container content-section">
<div class="row">
<div class="col-lg-12 text-center">
<h1 class="brand-heading">About MH370</h1>
<br>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<ul class="timeline">
<li>
<div class="timeline-image">
<img class="img-circle img-responsive" src="img/about/1.jpg" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<br><br>
<h4>March 8, 2014</h4>
</div>
<div class="timeline-body">
<p class="text-muted">Malaysia Airlines Flight MH370, carrying 239 passengers, vanished on its way from Kuala Lumpur to Beijing.</p>
<p class="text-muted2">Death: <i class="fa fa-male"></i> <i class="fa fa-times"></i> 137, <i class="fa fa-female"> </i> <i class="fa fa-times"></i> 93, <i class="fa fa-child"></i> </i> <i class="fa fa-times"></i> 7 </p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-image">
<img class="img-circle img-responsive" src="img/about/3.jpg" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-body">
<h4>RESCUE:</h4>
<p class="text-muted">Disappointed by the official investigations, grieving and frustrated relatives of passengers are still scouring the southern Indian Ocean coast for possible evidence that might help to unlock the mystery of their fate.</p>
<p class="text-muted2">“Vulnerable life, gone in light, leaving behind the beloved all in black…”</p>
</div>
</div>
<!--
<div class="timeline-body">
<iframe width="360" height="202" src="https://www.youtube.com/embed/ZQHl5SmA08A" frameborder="0" allowfullscreen></iframe>
</div>
-->
</li>
<li>
<div class="timeline-image">
<img class="img-circle img-responsive" src="img/about/2.jpg" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-body">
<br><br><br>
<p class="text-muted">Prayers from all over the world wishing for bringing MH370 back home safely.</p>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
<section id="about3" class="container content-section text-center">
<div id="container">
<div class="header">
<h1>STATISTICS OF MALAYSIA AIRLINES FLIGHT 370</h1>
<br>
<br>
</div>
<div id="peoplebox">
<span id="peoplecount" onselectstart="return false;">0</span>
<br>
<span id="peoplelabel" onselectstart="return false;">PEOPLE DIED ON MH370</span>
</div>
<div id="yearsbox">
<span id="yearscount" onselectstart="return false;">0</span>
<br>
<span id="yearlabel" onselectstart="return false;">STOLEN YEARS ON MH370</span>
</div>
<img id="questionMark" src="ruizhao/rz_img/questionMark.gif" />
<div id="c">
<canvas id="stage" width="940" height="650"></canvas>
<canvas id="distributionView" width = "940" height="650"></canvas>
<canvas id="overstage" width="940" height="650"></canvas>
</div>
<span class= "leftWhiteLabel percent" id= "pctTop" onselectstart="return false;">0%</span>
<!--span class= "leftWhiteLabel number" id= "numTop" onselectstart="return false;">0</span-->
<span class= "leftWhiteLabel filterName" id= "topFilter"></span>
<!--<button id= "distSwitch" onclick="gunviz.testMouseDown('axismimic')" onmouseover="gunviz.delayMove('axismimic')" onmouseout="gunviz.delayMove('notaxismimic')">+</button>-->
<hr class="axis" style="top: 346px; border-width: 0px 2px 1px 2px;">
<hr class="axis" style="top: 350px; border-width: 0px 2px 0px 2px;">
<span class="axisLabel" style="left: 50px;">AGE 0</span>
<span class="axisLabel" style="left: 964px;">100</span>
<div id="distSwitch"></div>
<span class= "leftWhiteLabel percent" id= "pctBot" onselectstart="return false;">0%</span>
<!--span class= "leftWhiteLabel number" id= "numBot" onselectstart="return false;">0</span-->
<span class= "leftWhiteLabel filterName" id= "botFilter"></span>
<span class= "rightWhiteLabel" id= "topHistLabel"></span>
<ul id= "menuBox">
<!--li>
<a class="menuTitle" onselectstart="return false;" onclick="gunviz.sortArrays('nofilter')">
NO FILTER
</a>
</li-->
<li>
<a data="SEX" class="menuTitle" id="sexes" onselectstart="return false;" onclick="gunviz.sortArrays('', $(this))">
SEX
</a>
<ul id= "Group3" class= "menuGroup">
<li id= "maleButton" onclick="gunviz.sortArrays('male', $(this))">MEN</li>
<li onclick="gunviz.sortArrays('female', $(this))">WOMEN</li>
</ul>
</li>
<li>
<a data="AGE GROUP" class="menuTitle" id="ages" onselectstart="return false;" onclick="gunviz.sortArrays('', $(this))">
AGE GROUP
</a>
<ul id= "Group4" class= "menuGroup">
<li onclick="gunviz.sortArrays('child', $(this))">CHILDREN 0-18</li>
<li id= "yadultButton" onclick="gunviz.sortArrays('yadult', $(this))">YOUNG ADULT 0-30</li>
<li id= "oadultButton" onclick="gunviz.sortArrays('oadult', $(this))">PEOPLE OVER 30</li>
</ul>
</li>
<li>
<a data="Nation" class="menuTitle" id="nations" onselectstart="return false;" onclick="gunviz.sortArrays('', $(this))">
NATION
</a>
<ul id= "Group5" class= "menuGroup">
<li onclick="gunviz.sortArrays('China', $(this))">China</li>
<li id= "MalaysiaButton" onclick="gunviz.sortArrays('Malaysia', $(this))">Malaysia</li>
<li id= "FranceButton" onclick="gunviz.sortArrays('France', $(this))">France</li>
<li id= "RussiaButton" onclick="gunviz.sortArrays('Russia', $(this))">Russia</li>
<li id= "AustraliaButton" onclick="gunviz.sortArrays('Australia', $(this))">Australia</li>
<li id= "UkraineButton" onclick="gunviz.sortArrays('Ukraine', $(this))">Ukraine</li>
<li id= "CanadaButton" onclick="gunviz.sortArrays('Canada', $(this))">Canada</li>
<li id= "IndonesiaButton" onclick="gunviz.sortArrays('Indonesia', $(this))">Indonesia</li>
<li id= "ItalyButton" onclick="gunviz.sortArrays('Italy', $(this))">Italy</li>
<li id= "USAButton" onclick="gunviz.sortArrays('USA', $(this))">USA</li>
<li id= "AustriaButton" onclick="gunviz.sortArrays('Austria', $(this))">Austria</li>
<li id= "NetherlandsButton" onclick="gunviz.sortArrays('Netherlands', $(this))">Netherlands</li>
<li id= "New_ZealandButton" onclick="gunviz.sortArrays('New_Zealand', $(this))">New Zealand</li>
</ul>
</li>
</ul>
</div>
</section>
<!-- Download Section -->
<section id="download" class="content-section text-center">
<div class="download-section-2">
<div class="container">
<div class="col-lg-12">
<h1>HOW MANY PEOPLE HAVE DIED BECAUSE OF AIRPLANE ACCIDENTS?</h1>
<p>The number of people died in Air Crash accidents from 1908 to 2015 is around <font size = "6px" color = "red">105479</font>.<br>
The survival rate of passengers on a fatal plane crash is <font size = "6px" color = "red">24%</font>.<br>
Recently aviation has been considerably safer;
still, <font size = "6px" color = "red">170</font> incidents or so have taken place every year from 2009 to 2015.</p>
<a href="#map-page" class="btn btn-default btn-lg">Click to see the Sad World Map <i class="fa fa-plane"></i></a>
</div>
</div>
</div>
</section>
<section id="download4" class="mysection container content-section">
<div id="map-page">
<div id="map">
<svg>
<defs>
<linearGradient id="originLinkStroke1" spreadMethod="pad">
<stop offset="10%" stop-color="#ef3753"></stop>
<stop offset="50%" stop-opacity="10%" stop-color="#7887a0"></stop>
<stop offset="90%" stop-color="#00d7ed"></stop>
</linearGradient>
<linearGradient id="originLinkStroke2" spreadMethod="pad">
<stop offset="10%" stop-color="#00d7ed"></stop>
<stop offset="50%" stop-opacity="10%" stop-color="#7887a0"></stop>
<stop offset="90%" stop-color="#ef3753"></stop>
</linearGradient>
<linearGradient id="asylumLinkStroke1" spreadMethod="pad">
<stop offset="10%" stop-color="#ef3753"></stop>
<stop offset="50%" stop-opacity="10%" stop-color="#7887a0"></stop>
<stop offset="90%" stop-color="#00d7ed"></stop>
</linearGradient>
<linearGradient id="asylumLinkStroke2" spreadMethod="pad">
<stop offset="10%" stop-color="#00d7ed"></stop>
<stop offset="50%" stop-opacity="10%" stop-color="#7887a0"></stop>
<stop offset="90%" stop-color="#ef3753"></stop>
</linearGradient>
</defs>
</svg>
</div>
<div id="map-timeline">
<div id="play-button" class="frame play">
<a></a>
</div>
<svg>
</svg>
</div>
<div id="map-nav-background">
</div>
<div id="map-nav-head">
<div id="year-region" class="ppppp">
<span id="year"></span>
<span id="year-border">❘</span>
<span id="region"></span>
</div>
<div id="story-head" class="ppppp"></div>
</div>
<div id="map-nav-body" >
<div id="stats" >
<dl>
<dt class="map-nav-title">Accidents Detail</dt>
<hr>
<!--
-->
<dt id="peopleNumInAP-mode" class="map-nav-sub-title"></dt>
<!-- <dt class="region">WORLD</dt> -->
<dd id="peopleNumInAP" class="value-mode-value"></dd>
<dt id="top-label" class="map-nav-sub-title"></dt>
<dd id="top-values" class="value-mode-value-sub"></dd>
</dl>
</div>
</div>
<div id="world-zoom-button">
</div>
</div>
</section>
<section id="contact" class="content-section text-center">
<div class="download-section">
<div class="container">
<div class="col-lg-10 col-lg-offset-1">
<h1>ANALYSIS of CAUSES AND PHASES</h1>
<p>The causes of most crashes fall into four categories: Pilot Error, Mechanical, Weather, and Sabotage.
<br>Among the series of phases that an aircraft experiences, "En route" has the highest accident rate.</p>
</div>
</div>
</div>
</section>
<section id="contact3" class="container content-section text-center">
<div class="row">
<div class="col-md-6"> <div id="sunburst_chart"></div></div>
<div class="col-md-6"> <div id="sunburst_show"></div></div>
</div>
</section>
<section id="contact4" class="container content-section text-center">
<div class="row">
<form class="form-inline pull-left input-sm" id="phaseForm">
<div class="form-group">
<label class="sr-only" for="StartYear">Start Year</label>
<input type="text" class="form-control" id="StartYear" value="1900" placeholder="Start Year(>=1990)">
</div>
<div class="form-group">
<label class="sr-only" for="EndYear">End Year</label>
<input type="text" class="form-control" id="EndYear" value="2014" placeholder="End Year(<=2014)">
</div>
<button type="button" class="btn btn-primary" id="PhaseSubmit" onclick="updatePhaseChart()">Submit</button>
</form>
<div class="col-md-12">
<div id="plane_status"></div>
</div>
<div class="col-md-12">
<div id="phase_chart"></div>
</div>
</div>
</section>
<section id="airplan" class="content-section text-center">
<div class="xsairlines">
<div class="container">
<div class="col-lg-8 col-lg-offset-2">
<br><br><br>
<h1>Evaluation and Comparision</h1>
<br>
<p>Airplane accidents can be catastrophic, we want to be as safe as possible. From past accidents and airlines rankings, we can choose to stay a little far away from danger...</p>
<br><br><br>
</div>
</div>
</div>
</section>
<section id="airplan" class="container content-section text-center">
<div class="row">
<h1 class = "sxsheader1">Air Accidents by Month and Year</h1>
<h2>From 1919 to 2014</h2>
<div class="row">
<div class="col-md-0.5">
</div>
<div class="col-md-4">
<div class="input-group input-group-type">
<button id="total_fatalities" class="xsbtn typebtn btn-secondary" type="button">Fatalities</button>
<button id="total_accidents" class="xsbtn typebtn btn-secondary" type="button">Accidents</button>
</div>
</div>
</div>
<div class="row">
<div class="row">
<div class="col-md-5">
<div id="barchart_month"></div>
<div id="areachart"></div>
</div>
<div class="col-md-7">
<div id="linechart"></div>
</div>
</div>
</div>
</section>
<section id="airplan2" class="content-section">
<div class = "container">
<div class="text-center">
<h1 class = "sxsheader1">Airlines Evaluation</h1>
<h2>Which is safer?</h2>
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4">
<div class="input-group">
<input type="text" id = "ajax" list="json-datalist" class="form-control" placeholder="Type in airlines to compare ...">
<span class="input-group-btn"><button id="add-airline" class="addbtn btn-secondary" type="button">Add</button>
</span>
<!--<span class="input-group-btn"><button id="cmp-airline" class="btn btn-secondary" type="button">Compare</button></span>-->
<datalist id="json-datalist"></datalist>
<!--<button type="button" class="btn btn-secondary" id="add-airline">Add</button>-->
</div>
</div>
<div class="col-md-4"></div>
</div>
<div class="row">
<div class="input-group wrapper" id = "selected-plane-list">
<!--<button type="button" class="btn btn-secondary">Secondary</button>-->
</div>
</div>
<div class = "row">
<div class="col-md-4 rankcol">
<div id = "ranking">
</div>
</div>
<div class="col-md-8">
<div id = "airline-cmp"></div>
</div>
</div>
</div>
</section>
<!-- Team Section -->
<section id="about-us" class="content-section text-center">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h1 class="section-heading">Our Amazing Team</h1>
<h3 class="section-subheading text-muted">The castle in the sky</h3>
<br>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="team-member">
<img src="img/team/1.jpg" class="img-circle-my " alt="">
<br>
<h4>Xu Si</h4>
<p class="text-muted">MS @EE</p>
<ul class="list-inline social-buttons">
<li><a href="#"><i class="fa fa-twitter"></i></a>
</li>
<li><a href="#"><i class="fa fa-facebook"></i></a>
</li>
<li><a href="#"><i class="fa fa-linkedin"></i></a>
</li>
</ul>
</div>
</div>
<div class="col-sm-3">
<div class="team-member">
<img src="img/team/2.jpg" class="img-circle-my" alt="">
<br>
<h4>Bingfeng Xia</h4>
<p class="text-muted">MS @CSE</p>
<ul class="list-inline social-buttons">
<li><a href="#"><i class="fa fa-twitter"></i></a>
</li>
<li><a href="#"><i class="fa fa-facebook"></i></a>
</li>
<li><a href="#"><i class="fa fa-linkedin"></i></a>
</li>
</ul>
</div>
</div>
<div class="col-sm-3">
<div class="team-member">
<img src="img/team/3.jpg" class="img-circle-my" alt="">
<br>
<h4>Xinyuan Wang</h4>
<p class="text-muted">MS @CSE</p>
<ul class="list-inline social-buttons">
<li><a href="#"><i class="fa fa-twitter"></i></a>
</li>
<li><a href="#"><i class="fa fa-facebook"></i></a>
</li>
<li><a href="#"><i class="fa fa-linkedin"></i></a>
</li>
</ul>
</div>
</div>
<div class="col-sm-3">
<div class="team-member">
<img src="img/team/4.jpg" class="img-circle-my" alt="">
<br>
<h4>Rui Zhao</h4>
<p class="text-muted">MS @CSE</p>
<ul class="list-inline social-buttons">
<li><a href="#"><i class="fa fa-twitter"></i></a>
</li>
<li><a href="#"><i class="fa fa-facebook"></i></a>
</li>
<li><a href="#"><i class="fa fa-linkedin"></i></a>
</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-8 col-lg-offset-2 text-center">
</div>
</div>
</div>
</section>
<section id="about-us2" class="container content-section text-center">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<h1>Contact us</h1>
<p>Feel free to email us to provide some feedback on our visualization, give us suggestions or new dataset, or just say hi.</p>
<p><a href="mailto:[email protected]">[email protected]</a>
</p>
<ul class="list-inline banner-social-buttons">
<li>
<a href="" class="btn btn-default btn-lg"><i class="fa fa-twitter fa-fw"></i> <span class="network-name">Twitter</span></a>
</li>
<li>
<a href="" class="btn btn-default btn-lg"><i class="fa fa-github fa-fw"></i> <span class="network-name">Github</span></a>
</li>
<li>
<a href="" class="btn btn-default btn-lg"><i class="fa fa-google-plus fa-fw"></i> <span class="network-name">Google+</span></a>
</li>
</ul>
</div>
</div>
</section>
<section id="ref" class="container content-section ref">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<h2 align="center">Reference</h2>
<!--<p>Feel free to email us to provide some feedback on our visualization, give us suggestions or new dataset, or just say hi.</p>-->
<!--<p><a href="mailto:[email protected]">[email protected]</a>-->
<!--</p>-->
</div>
</div>
<br> <br>
<div class="row">
<div class="col-md-3">
<h3>Inspiration</h3>
<ul>
<li>Wolrd Map of Air Accidents: Our inspiration comes from <a href="http://www.therefugeeproject.org/" target="_blank">the refugee </a>visualization.</li>
<li>Life Span of MH 370 Passengers: We borrow the ideas from <a href="http://guns.periscopic.com/?year=2013" target="_blank">the famous Gun Shot</a> visualization</li>
</ul>
</div>
<div class="col-md-3">
<h3>Datasets</h3>
<ul>
<li>Air Accidents: All the <a href="http://www.planecrashinfo.com" target="_blank">air accidents</a> data from 1919 to today.</li>
<li>Airline Ratings: <a href="http://www.planecrashinfo.com" target="_blank">Safety ratings</a> of 403 airlines and detailed rating criteria.</li>
<li>Accidents Causes: <a href="http://www.planecrashinfo.com/cause.htm" target="_blank">Different causes</a> of air accidents.</li>
<li>MH 370 Lists: A <a href="http://news.qq.com/zt2014/mlxyhb/list.htm" target="_blank">list of passengers</a> on the missing MH 370 airplane.</li>
</ul>
</div>
<div class="col-md-3">
<h3>Images</h3>
<ul>
<li>International school students light candles to <a href="http://www.ibtimes.com/malaysia-airlines-flight-mh370-prayers-continue-search-rescue-teams-scour-globe-missing-airliner" target="_blank">pray for passengers</a> aboard Malaysia Airlines flight MH370, in Zhuji, Zhejiang province, March 10, 2014.</li>
<li>Relatives <a href="http://www.ibtimes.com.au/mh370-underwater-search-suspended-2-months-people-feel-sad-angry-1342244" target="_blank"> crying and praying for</a>their lost lovers in the early morning, at Lido Hotel, in Beijing April 8, 2014</li>
<li><a href="http://shoebat.com/wp-content/uploads/2016/02/30D2F4D200000578-3428090-image-a-41_1454449518286.jpg" target="_blank">Causes</a> of air accidents, by Harun Maruf</li>
<li>An <a href="http://resize.indiatvnews.com/en/centered/newbucket/750_533/2016/03/plane-hijack-1459256239.jpg" target="_blank">air hijacking</a> example.</li>
<li>Solar Impulse ground crew perform<a href="http://www.abb-conversations.com/wp-content/uploads/2015/03/ABB_Solar_Impulse_Varanasi_Landing_029WEB.jpg" target="_blank"> pre-flight checks</a> before takeoff just a few hours later </li>
</ul>
</div>
<div class="col-md-3">
<h3>Tools</h3>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool" target="_blank">Color Picker</a> (Color Selection)</li>
<li>
<a href="http://d3js.org/" target="_blank">d3.js</a> (Visualizations)
</li>
<li>
<a href="http://getbootstrap.com/getting-started/" target="_blank">Bootstrap</a> (Webpage layout)
</li>
<li>
<a href="http://fortawesome.github.io/Font-Awesome/icons/" target="_blank">Font Awesome</a> (Plane icons)
</li>
<li>
<a href="http://www.adobe.com/products/photoshop.html?sdid=KKQIN&ttsrccat=sem-ww-di-ps-brand&mv=search&s_kwcid=AL!3085!3!155836184327!e!!g!!photoshop&ef_id=WBDFsQAAACwFK7py:20161212194922:s" target="_blank">Photoshop</a> (Edit Images)
</li>
<li>
<a href="https://github.com/" target="_blank">GitHub</a> (Project Cooperation)
</li>
<li>
<a href="http://www.wechat.com/en/" target="_blank">WeChat</a> (Communication Platform)
</li>
</ul>
</div>
</div>
</section>
<!-- Map Section
<div id="map"></div>
-->
<!-- Footer -->
<footer>
<div class="container content-section text-center">
<p class = "my-footer">Copyright © "Damn it, we are going to crash", Final project of CS171 Visualization 2016 @Harvard</p>
</div>
</footer>
<!-- jQuery -->
<script src="vendor/jquery/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<!-- Plugin JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<!-- Google Maps API Key - Use your own API key to enable the map feature. More information on the Google Maps API can be found at https://developers.google.com/maps/ -->
<!--
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCRngKslUGJTlibkQ3FkfTxj3Xss1UlZDA&sensor=false"></script>
-->
<!-- Theme JavaScript -->
<script src="js/grayscale.js"></script>
<!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> -->
<script src="js/jquery.min.js"></script>
<script src="js/jquery-migrate.min.js"></script>
<!--
<script src="js/jquery.autoellipsis.min.js"></script>
-->
<script src="js/bootstrap.min.js"></script>
<script src="js/d3.min.js"></script>
<script src="js/topojson.min.js"></script>
<script src="js/queue.min.js"></script>
<script src="js/d3.tip.js"></script>
<script src="xbf/worldmap-AirplaneAccidents.js"></script>
<script src="Xinyuan/js/fisheye.js"></script>
<script src="Xinyuan/js/causeAndPhase.js"></script>
<script src="Xinyuan/js/sunburstChart.js"></script>
<script src="Xinyuan/js/sunburstShow.js"></script>
<script src="Xinyuan/js/planeStatus.js"></script>
<script src="Xinyuan/js/phaseChart.js"></script>
<script src="xusi/xs_js/barchart_month.js"></script>
<script src="xusi/xs_js/Areachart.js"></script>
<script src="xusi/xs_js/linecharts.js"></script>
<script src="xusi/xs_js/Airlines.js"></script>
<script src="xusi/xs_js/Airline_cmp.js"></script>
<script src="xusi/xs_js/Allratings.js"></script>
<script src="xusi/xs_js/jquery.autocomplete.js"></script>
<script src="xusi/xs_js/queue.v1.min.js"></script>
<script src="xusi/xs_js/bootstrap.min.js"></script>
<!-- Load data, create visualizations -->
<script src="xusi/xs_js/main.js"></script>
<script type="text/javascript" src="ruizhao/rz_js/gunviz.js"></script>
<script>
var periTooltip = periscopic.ui.Tooltip;
//periTooltip.DEFAULT_STROKE_THICKNESS = 1;
periTooltip.DEFAULT_STROKE_COLOR = 'rgba(0,0,0,0.2)';
periTooltip.DEFAULT_RADIUS = 5;
periTooltip.DEFAULT_TIP_WIDTH = 4;
periTooltip.DEFAULT_COPY_CLASS = 'tooltipCopy';
function showList(e) {
$(this).children("ul").addClass("shownList");
}
function hideList() {
$(this).children("ul").removeClass("shownList");
}
function moveOnList(e) {
e.stopPropagation();
}
$("#menuBox > li").hover(showList, hideList).click(hideList).mousemove(moveOnList);
function stop() {
createjs.Ticker.removeAllListeners();
TweenMax.killAll();
}
function showCanvas(canvasid) {
document.getElementById(canvasid).style.display = "block";
}
function hideCanvas(canvasid) {
document.getElementById(canvasid).style.display = "none";
}
function exportAndView(canvasid) {
var data = document.getElementById(canvasid).toDataURL("image/png");
var screenshot = document.createElement("img");
screenshot.src = data;
$(document.body).html(screenshot);
}
var activePersonTooltip;
//declare mouseover delay here so the yearsTooltip has access to it
var delayWatcher;
var uiTooltips = (function() {
var yearsTooltip = new periscopic.ui.Tooltip();
$("#yearsbox").hover(makeYearsLabel, removeYearsLabel).mousemove(moveOnList);
$("#questionMark").hover(makeYearsLabel, removeYearsLabel).mousemove(moveOnList);
function makeYearsLabel(e) {
clearTimeout(delayWatcher);
var w = $("#yearsbox").width();
var h = $("#yearsbox").height();
var numPpl = $("#peoplecount").html();
yearsTooltip.copy("We determine the potential lifespans of victims from different countries using data from the World Health Organization.");
yearsTooltip.horizontal(false)
.mirror(false)
.copyClass("bigTooltip")
.x(w - 10).y(h + 5);
yearsTooltip.el()
.appendTo("#yearsbox");
yearsTooltip.setTipPosition(1).shrinkWidth(250);
yearsTooltip.render().position();
yearsTooltip.el().show();
e.stopPropagation();
}
function removeYearsLabel() {
yearsTooltip.el().hide();
}
var mTooltip = new periscopic.ui.Tooltip();
mTooltip.horizontal(false)
.mirror(false)
.copyClass("methodsTooltip");
function makeMethods() {
var w = $("#container").width();
var h = $("#container").height();
var div = document.createElement('div');
div.setAttribute("id", "shadow");
div.style.backgroundColor = "rgba(20,20,20,0.8)";
div.style.width = w;
div.style.height = h;
div.style.position = "absolute";
div.style.top = "0px";
div.style.zIndex = 2;
document.getElementById("container").appendChild(div);
mTooltip.el()
.appendTo("#container");
mTooltip.render().position();
mTooltip.el().show();
$("#shadow").click(removeMethods);
mTooltip.el().find('.close').click(removeMethods);
}
function removeMethods() {
mTooltip.el().hide();
$("#shadow").remove();
}
return {
makeYearsLabel : makeYearsLabel,
removeYearsLabel : removeYearsLabel,
makeMethods : makeMethods,
removeMethods : removeMethods
}
}());
</script>
<script>
(function(i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function() {