generated from usf-cs360-spring2020/template-bulma
-
Notifications
You must be signed in to change notification settings - Fork 0
/
pttpAlpha.html
197 lines (158 loc) · 7.73 KB
/
pttpAlpha.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Prototype Page - Alpha</title>
<!-- Load Bulma from CDN (consider saving it to repository instead) -->
<!-- https://bulma.io/ -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
<!-- Load Font Awesome 5 (free) icons -->
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
<style>
body {background-color: #EEF3F6;}
.hero-image {
/* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("IMG_3377.JPG");
/* Position and center the image to scale nicely on all screens */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.title {
color: white;
}
.subtitle {
color: white;
}
</style>
</head>
<body>
<!-- Page header -->
<!-- https://bulma.io/documentation/layout/hero/ -->
<section class="hero-image">
<div class="hero-body">
<div class="container">
<h1 class="title">Prototype-Alpha : Art Items on Map of San Francisco</h1>
<h2 class="subtitle">Prototype in Tableau</h2>
</div>
</div>
</section>
<!-- End page header -->
<!-- Page navigation -->
<!-- https://bulma.io/documentation/components/navbar/ -->
<nav class="navbar is-light" role="navigation" aria-label="main navigation">
<div class="container">
<div class="navbar-brand">
<a class="navbar-item is-active" href="index.html">
<span class="icon"><i class="fas fa-home"></i></span>
<span>Home</span>
</a>
<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="main-menu">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="main-menu" class="navbar-menu has-text-weight-medium">
<!-- Left navbar items -->
<div class="navbar-start">
<a class="navbar-item" href="dts.html" title="Data">
<span class="icon"><i class="fas fa-table"></i></span>
<span>Data</span>
</a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
Visualizations
</a>
<div class="navbar-dropdown">
<a class="navbar-item" href="pttpAlpha.html">
<span class="icon"><i class="fas fa-chart-line"></i></span>
<span>Prototype-Alpha: Art Items on Map of San Francisco - Non-proportional Symbol Map in Tableau (with feedback)</span>
</a>
<a class="navbar-item" href="pttpBeta2.html">
<span class="icon"><i class="fas fa-chart-line"></i></span>
<span>Prototype-Beta-OverallMap: Clustering of Artists that Use Similar Materials? - non-proportional symbol map in d3.js (with feedback)</span>
</a>
<a class="navbar-item" href="finalViz1mapHm.html">
<span class="icon"><i class="fas fa-chart-line"></i></span>
<span>Final Visualization 1: Distribution Over Time - Materials Used on Art Items in San Francisco</span>
</a>
<a class="navbar-item" href="finalViz2Hierarchical.html">
<span class="icon"><i class="fas fa-chart-line"></i></span>
<span>Final Visualization 2: Hierarchical Relationship - Types of Materials Used on Art Items in San Francisco </span>
</a>
</div>
</div>
</div>
<!-- Right navbar items -->
<div class="navbar-end">
<a class="navbar-item" href="abt.html" title="About">
<span class="icon"><i class="fas fa-info-circle"></i></span>
<span>About</span>
</a>
</div>
</div>
</div>
</nav>
<!-- End page navigation -->
<section class="section">
<div class="container">
<!-- Begin page content -->
<div class="content">
<h1 class="title">
Prototype in Tableau
</h1>
<img src="pttp002.png" width="600" height="2200">
<h3>Encoding: </h3>
<p> In this map visualization, each symbol on the map is an art item. Color is the medium of that art as shown in the legend.
</p>
<h3>Potential wrangling: </h3>
<p> Since there are many mediums in the raw data, and there are actually groups of same mediums with slight different details, in the future the data could be merged into same large categories of mediums.
For example, all the bronze, or all of the steel items could be merged into one larger "bronze" or "steel" group, and further filtering option could help for the subgroups.</p>
<h3>Potential interactivities: </h3>
<p> The symbols on the map could be designed as hovering by and show details such as artist, display titles, creation date and more. </P>
<p> There could also be filtering options provided on the website, like by artist, by display, by creation date, or by medium. Then the user could look for art items conditionally.</p>
<h2>Potential possibilities of other graphs: </h2>
<p> There could be another graph according to the user's choice, so that the information of creation date could be applied in a time plot, maybe in a heatmap.</p>
<p> As there are relationship of group and subgroup in the column of medium, there is also possibility of making a hierarchy graph. (For example metal -> Steel ->Painted Steel, etc.)</p>
<h1 class="title">
Feedback Received for Alpha Prototype
</h1>
<h3>Feedback from the Group Feedback Session</h3>
<p>"Considering the few quantitative variables in the dataset, there could be supplement datasets such as art budget by years in San Francisco, to create visualizations with more numerical values." </p>
<h3>Changes Based on the Feedback Above</h3>
<p> - Considered the “few quantitative variable” issue, explored the budget dataset, but did not move on with this approach because of the aspect of year range(only 2010-2019 in SF budget dataset but there are 1814-2018 in the Civic Art Collection dataset).
</br>- Planned to work on tree diagrams or general graph visualization, like artists as nodes and if artists use the same kind of materials, there would be links among them.
</p>
</div>
<!-- End page content -->
</div>
</section>
<!-- Page footer -->
<!-- https://bulma.io/documentation/layout/footer/ -->
<footer class="footer">
<div class="content has-text-centered is-size-7">
<p>
<a href="#top">
<span class="fas fa-arrow-up"></span>
<span class="has-text-weight-medium">Back to Top</span>
</a>
</p>
<p>
<a href="https://github.com/usf-cs360-spring2020/project-alexziweiwang" class="button is-small" style="padding-left: 1em; padding-right: 1em;" target = _blank>
<i class="fab fa-github-alt"></i> <strong>Github</strong>
</a>
<a href="https://fontawesome.com/" class="button is-small" style="padding-left: 1em; padding-right: 1em;">
<i class="fab fa-font-awesome"></i> <strong>FontAwesome</strong>
</a>
<a href="https://bulma.io" class="button is-small">
<img src="https://bulma.io/images/made-with-bulma--semiblack.png" alt="Made with Bulma" width="128" height="24">
</a>
</p>
</div>
</footer>
<!-- End page footer -->
</body>
</html>