-
Notifications
You must be signed in to change notification settings - Fork 0
/
about.html
115 lines (108 loc) · 5.51 KB
/
about.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
<!DOCTYPE HTML>
<!--
Alpha by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>About the Visualization- Alpha by HTML5 UP</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
<link rel="stylesheet" href="assets/css/main.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]-->
</head>
<body>
<div id="page-wrapper">
<!-- Header -->
<header id="header">
<h1><a href="index.html">Cat & Dog</a></h1>
<nav id="nav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="#" class="icon fa-angle-down">Menu</a>
<ul>
<li><a href="cat.html">Cat by States</a></li>
<li><a href="dog.html">Dog by States</a></li>
<li><a href="map.html">Pet on Map</a></li>
<li>
<a href="#">More Maps</a>
<ul>
<li><a href="map_election.html">Pet & Election</a></li>
<li><a href="map_income.html">Pet & Income</a></li>
<li><a href="map_ob.html">Pet & Obesity</a></li>
</ul>
<li><a href="about.html">About</a></li>
</li>
</ul>
</li>
<li></li>
</ul>
</nav>
</header>
<!-- Main -->
<section id="main" class="container">
<header>
<h2>About the Visualization</h2>
</header>
<div class="box">
<span class="image featured"></span>
<h3>Narrative visualization method</h3>
<p>This project follows the martini glass hybrid interactive structure. After three ordered scenes, which provide cat, dog owning percentages and preference, the users can explore other maps which provide comparisons between pet owning and other data. The users can also click on certain state on the map to drill down more details about that state.</p>
<div class="row">
<div class="6u 12u(mobilep)">
<h3>Scenes</h3>
<p>There are six scenes in this project, and each scene contains a chart to convey the message. All data visualizations are coded in D3. All scenes are based on same framework and use the same layout; a chart on the top and a description at the bottom.</p>
</div>
<div class="6u 12u(mobilep)">
<h3>Annotations</h3>
<p>Annotations are in every data chart. A tool tip will appear to show the data when the user mouseovers a bar in the bar chart or a state in the map. Moreover, a tool tip with further detailed data will show up when the user clicks on a bar or a state. </p>
</div>
</div>
<div class="row">
<div class="6u 12u(mobilep)">
<h3>Parameters</h3>
<p>There are several parameters through the project. At the top-right corner of each page, there is a drop-down menu which allows the user to switch to any page. There are also buttons on each page for navigate to the next or the previous page.</p>
</div>
<div class="6u 12u(mobilep)">
<h3>Triggers</h3>
<p>As discussed in the annotations section, mouseovering and clicking are triggers for user to get more detail if they would like to know more information about that state. </p>
</div>
<div class="row">
<div class="6u 12u(mobilep)">
<p> .</p>
</div>
<div class="6u 12u(mobilep)">
<h4>Reference</h4>
<ul>
<li>HTML tempalte : <a href="https://html5up.net">HTML5 UP</a></li>
<li><a href="https://bl.ocks.org/mbostock/3885304">Bar Chart</a></li>
<li><a href="http://bl.ocks.org/NPashaP/a74faf20b492ad377312">US map</a></li>
<li>Data Source of Pet Owning: AVMA U.S. Pet Ownership & Demographics Sourcebook (2012).</li>
<li>Data Source of election result: <a href="https://www.nytimes.com/elections/results/president">New York Times</a></li>
<li>Data Source of household income:<a href="http://bl.ocks.org/NPashaP/a74faf20b492ad377312"> </a><a href="https://www.census.gov/library/visualizations/2016/comm/cb16-158_median_hh_income_map.html">US Census</a></li>
<li>Data Source of obesity rate:<a href="http://bl.ocks.org/NPashaP/a74faf20b492ad377312"> </a><a href="https://stateofobesity.org/adult-obesity/">the State of Obesity</a></li>
</ul>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer id="footer">
<ul class="copyright">
<li>© Jiehuan Huang. All rights reserved.</li>
<li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
</ul>
</footer>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.dropotron.min.js"></script>
<script src="assets/js/jquery.scrollgress.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>