generated from usf-cs360-spring2020/template-bulma
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathfeedback.html
154 lines (125 loc) · 9.87 KB
/
feedback.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Feedback</title>
<!-- Load Bulma from CDN (consider saving it to repository instead) -->
<!-- https://bulma.io/ -->
<link rel="stylesheet" href="https://jenil.github.io/bulmaswatch/lux/bulmaswatch.min.css">
<!-- Load Font Awesome 5 (free) icons -->
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
</head>
<body>
<div id="navigation">
</div>
<script>
$(function(){
$("#navigation").load("navbar.html");
});
</script>
<section class="section">
<div class="container">
<!-- Begin page content -->
<div class="content">
<h2>Peer Feedback Sessions Criterion</h2>
<table class="table is-hoverable is-striped">
<thead>
<tr>
<th>Criteria</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>Visual Encodings</td>
<td>How are visual channels used to encode data? Visual channels include: position, length or size, shape, color, and other visual attributes. (This is a comment only criteria; the rating scheme is not meaningful for this criteria.)</td>
</tr>
<tr>
<td>Non-Color Encoding</td>
<td>Rate and comment on the non-color encodings on a scale of 5 (highly appropriate) to 1 (inappropriate). Consider both the data type and strength of the visual channel (or preattentive attribute) used to encode that data.</td>
</tr>
<tr>
<td>Color Encodings</td>
<td>Rate and comment on the color encodings on a scale of 5 (excellent use of color) to 1 (inappropriate use of color). Consider whether the type color scheme (diverging, sequential, categorical) is appropriate. For categorical color schemes, also consider the number of distinct colors used and whether the colors are separable. Select N/A if color is not used to encode the data.</td>
</tr>
<tr>
<td>Context</td>
<td>Rate and comment on the provided context for interpreting the visualization on a scale of 5 (excellent context provided) to 1 (insufficient context provided). Consider how visual elements such as axis and tick labels, legends, annotations, descriptive text, grid lines, and other non-data visual elements help with providing context and interpretation of the visualization.</td>
</tr>
<tr>
<td>Lie Factor</td>
<td>Rate and comment on the lie factor on a scale of 5 (no lie factor) to 1 (high lie factor). Consider whether the visualization has misleading context (e.g. misleading but properly labeled scales), weak visual encodings (e.g. choosing volume instead of area), exaggerated encodings (e.g. scaling circles by radius instead of area), or unnecessary use of 3D and depth.</td>
</tr>
<tr>
<td>Data Ink Ratio</td>
<td>Rate and comment on the data ink ratio on a scale of 5 (high data ink ratio) to 1 (low data ink ratio). Consider both whether more data ink should be added or non-data ink should be removed.</td>
</tr>
<tr>
<td>Data Density</td>
<td>Rate and comment on the data density on a scale of 5 (high data density) to 1 (low data density). Consider both the amount of data included as well as the overall size of the visualization(s).</td>
</tr>
<tr>
<td>Gestalt Principles</td>
<td>Rate and comment on the Gestalt principles on a scale of 5 (used well) to 1 (used poorly). Consider the principles of background versus foreground, proximity, and similarity.</td>
</tr>
<tr>
<td>Planned Interactivity</td>
<td>What interaction mechanisms will be used? Consider details-on-demand, highlighting, brushing, filtering, linked views, focus plus context, zooming, panning or translating, rotating, and others. (This is a comment only criteria; the rating scheme is not meaningful for this criteria.)</td>
</tr>
<tr>
<td>Planned Interaction Effectiveness</td>
<td>Rate and comment on the planned interactivity on a scale of 5 (highly effective) to 1 (ineffective). Consider whether the interactivity improves exploration, search, or engagement. Select N/A if interactivity will not be implemented.</td>
</tr>
<tr>
<td>Design and Aesthetics</td>
<td>Rate and comment on the design and aesthetics on a scale of 5 (aesthetically pleasing or beautiful) to 1 (not aesthetically pleasing).</td>
</tr>
<tr>
<td>Understanding</td>
<td>List 1 to 3 things about the data that you learned or understood by this visualization, or new questions you have about the data as a result of the visualization. (This is a comment only criteria; the rating scheme is not meaningful for this criteria.)</td>
</tr>
<tr>
<td>Visualizaion Goal</td>
<td>What is the overall goal of this visualization? Consider both what audiences should learn from the visualization, and how well it fits into the overall narrative of the project. (This is a comment only criteria; the rating scheme is not meaningful for this criteria.)</td>
</tr>
<tr>
<td>Visualization Goal</td>
<td>What is the overall goal of this visualization? Consider both what audiences should learn from the visualization, and how well it fits into the overall narrative of the project. (This is a comment only criteria; the rating scheme is not meaningful for this criteria.)</td>
</tr>
<tr>
<td>Visualizaion Effectiveness</td>
<td>Rate and comment on the visualization effectiveness on a scale of 5 (highly effective) to 1 (ineffective). Consider given the visualization goal and your understanding of the data from the prototype visualization.</td>
</tr>
</tbody>
</table>
<h2>Peer Feedback One</h2>
<iframe src="https://docs.google.com/gview?url=https://github.com/usf-cs360-spring2020/project-adityanz/raw/gh-pages/Feedback1.pdf&embedded=true"
style="width: 70%; height: 1000px">
<p>This browser does not support inline PDFs. Please download the PDF to view it: <a href="https://github.com/usf-cs360-spring2020/project-adityanz/raw/gh-pages/Feedback1.pdf">Download PDF</a></p>
</iframe>
<h2>Peer Feedback Two</h2>
<iframe src="https://docs.google.com/gview?url=https://github.com/usf-cs360-spring2020/project-adityanz/raw/gh-pages/Feedback2.pdf&embedded=true"
style="width: 70%; height: 1000px">
<p>This browser does not support inline PDFs. Please download the PDF to view it: <a href="https://github.com/usf-cs360-spring2020/project-adityanz/raw/gh-pages/Feedback2.pdf">Download PDF</a></p>
</iframe>
<h2>Instructor Feedback Sessions</h2>
<p> I ended up getting a lot of useful feedbaack from the instructor, in regards to trying to make my stacked bar and my map more linked and interactive. The Professor
ended up telling me to try and play around with the categorical and the measurements and try and see if I could create links. I ended up not stepping the colors and making them more discrete. I also ended up
using the price categories on my stacked bar and making it more interactive. I also added the % of the total bar that it represented. </p>
<h2>Implementation of Feedback</h2>
<p> Based on the feedback I got from the two peer reviews and the instructors, I decided to make sure my enconding for the stacked bar was more clear, since I was looking at the average health score based on the zip code. I also plan on adding zoom interactivity to counter the data ink and data density. I also plan on fixing the size of the data. I also ended up adding some cross interactivity with the circle packing and the map and also tried to filter out the data. </p>
</div>
</div>
</section>
<div id="footer">
</div>
<script>
$(function(){
$("#footer").load("footer.html");
});
</script>
<!-- End mobile menu responsiveness -->
</body>
</html>