-
Notifications
You must be signed in to change notification settings - Fork 51
/
syllabus.html
272 lines (272 loc) · 15.2 KB
/
syllabus.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
---
layout: default
title: Syllabus
---
<h1>Syllabus</h1>
<p>To enroll, see <a href="https://bannerweb.wpi.edu/pls/prod/hwwkrnbw.P_DisplayDept?sel_term=201901&sel_ptrm=A&sel_dept=CS&sel_desc=Computer+Science&sel_level=05&sel_campus=A">course listing in WPI</a>.</p>
<p><strong>Required Textbook:</strong></p>
<p><a href="https://www.amazon.com/Visualization-Analysis-Design-AK-Peters/dp/1466508914/ref=sr_1_1?ie=UTF8&qid=1504184029&sr=8-1&keywords=Visualization+Analysis+%26+Design+by+Tamara+Munzner"><span style="font-weight: 400;">Visualization Analysis & Design by Tamara Munzner (2014)</span></a><span style="font-weight: 400;"> (ISBN 9781466508910)</span></p>
<p> </p>
<p><strong>Reference Material (optional, but awesome)</strong><span style="font-weight: 400;">:</span></p>
<ul>
<li style="font-weight: 400;"><span style="font-weight: 400;">Interactive Data Visualization for the Web by Scott Murray 2nd Edition (2017)</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">D3.js in Action by Elijah Meeks 2nd Edition (2017)</span><span style="font-weight: 400;"></span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">Semiology of Graphics by Jacques Bertin (2010)</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">The Grammar of Graphics by Leland Wilkinson</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">ggplot2 Elegant Graphics for Data Analysis by Hadley Wickham</span></li>
</ul>
<p> </p>
<p><strong>Course Description:</strong></p>
<p><span style="font-weight: 400;">This course is all about data visualization, the art and science of turning data into readable graphics. We’ll explore how to design and create data visualizations based on data available and tasks to be achieved. This process includes data modeling, data processing (such as aggregation and filtering), mapping data attributes to graphical attributes, and strategic visual encoding based on known properties of visual perception as well as the task(s) at hand. Students will also learn to evaluate the effectiveness of visualization designs, and think critically about each design decision, such as choice of color and choice of visual encoding. Students will create their own data visualizations, and learn to use Open Source data visualization tools, especially D3.js. Students will also read papers from the current and past visualization literature and create video presentations of their findings.</span></p>
<p> </p>
<p><strong>Prerequisites:</strong></p>
<p><span style="font-weight: 400;">Some programming experience in any language. Ideally you have taken a course on computer graphics, but this is not strictly required.</span></p>
<p> </p>
<p><strong>Learning Outcomes:</strong></p>
<p><span style="font-weight: 400;">By the completion of this course, learners will be able to:</span></p>
<ul>
<li style="font-weight: 400;"><span style="font-weight: 400;">Design and create data visualizations.</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">Conduct exploratory data analysis using visualization.</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">Craft visual presentations of data for effective communication.</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">Use knowledge of perception and cognition to evaluate visualization design alternatives.</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">Design and evaluate color palettes for visualization based on principles of perception.</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">Apply data transformations such as aggregation and filtering for visualization.</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">Identify opportunities for application of data visualization in various domains.</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">Critique existing visualizations based on data visualization theory and principles.</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">Use JavaScript with D3.js to develop interactive visualizations for the Web.</span></li>
</ul>
<p> </p>
<p><strong>Course Content:</strong></p>
<table style="width: 805px;">
<tbody>
<tr>
<td style="width: 50.3977px;">
<p><strong>Class</strong></p>
</td>
<td style="width: 171.307px;">
<p><strong>Material to be Covered </strong></p>
</td>
<td style="width: 555.852px;">
<p><strong>Homework Assignments/Projects</strong></p>
</td>
</tr>
<tr>
<td style="width: 50.3977px;">
<p><span style="font-weight: 400;">1</span></p>
</td>
<td style="width: 171.307px;">
<p><span style="font-weight: 400;"> Overview of Data Visualization, Introduction to Web Technologies</span></p>
</td>
<td style="width: 555.852px;">
<p><strong>Reading</strong><span style="font-weight: 400;">: Chapter. 1 “What’s Vis, and Why Do It?”</span><span style="font-weight: 400;"></span></p>
<p><span style="font-weight: 400;"><strong>Lectures</strong>:</span></p>
<ul>
<li><span style="font-weight: 400;">Why Visualize Data?</span></li>
<li><span style="font-weight: 400;">Introduction to SVG and CSS.</span></li>
<li><span style="font-weight: 400;">Introduction to JavaScript.</span></li>
<li><span style="font-weight: 400;">Introduction to VizHub.</span></li>
<li><span style="font-weight: 400;">Making a Face with D3.js.<br /></span></li>
</ul>
<p><strong>Assignments</strong><span style="font-weight: 400;">:</span></p>
<ul>
<li><span style="font-weight: 400;">Introduce yourself via video.</span></li>
<li><span style="font-weight: 400;">Find and describe a data visualization relating to current events.</span></li>
<li><span style="font-weight: 400;">Tweak a face with D3.js.</span></li>
</ul>
</td>
</tr>
<tr>
<td style="width: 50.3977px;">
<p><span style="font-weight: 400;">2</span></p>
</td>
<td style="width: 171.307px;">
<p><span style="font-weight: 400;">The Shapes of Data</span></p>
</td>
<td style="width: 555.852px;">
<p><strong>Reading</strong><span style="font-weight: 400;">:</span></p>
<ul>
<li><span style="font-weight: 400;">Chapter 2 “What: Data Abstraction”</span></li>
<li><span style="font-weight: 400;">Chapter 3 “Why: Task Abstraction”</span><span style="font-weight: 400;"></span></li>
</ul>
<p><span style="font-weight: 400;"><strong>Lectures</strong>:</span></p>
<ul>
<li><span style="font-weight: 400;">Input for Visualization: Data and Tasks</span></li>
<li><span style="font-weight: 400;">Loading and Parsing Data with D3.js</span></li>
</ul>
<p><strong>Assignments</strong><span style="font-weight: 400;">:</span></p>
<ul>
<li><span style="font-weight: 400;">Find and describe 3 datasets that you’d like to potentially visualize for your project.</span></li>
<li><span style="font-weight: 400;">Load and parse those 3 datasets using D3.js.</span></li>
</ul>
</td>
</tr>
<tr>
<td style="width: 50.3977px;">
<p><span style="font-weight: 400;">3</span></p>
</td>
<td style="width: 171.307px;">
<p><span style="font-weight: 400;"> Marks and Channels</span></p>
</td>
<td style="width: 555.852px;">
<p><strong>Reading</strong><span style="font-weight: 400;">: Chapter 5 “Marks and Channels”</span></p>
<p><strong>Lectures:</strong></p>
<ul>
<li><span style="font-weight: 400;">Encoding Data with Marks and Channels</span></li>
<li><span style="font-weight: 400;">Rendering Marks and Channels with D3.js and SVG</span></li>
<li><span style="font-weight: 400;">Introduction to D3 Scales</span></li>
<li><span style="font-weight: 400;">Creating a Scatter Plot with D3.js</span></li>
</ul>
<p><strong>Assignments</strong><span style="font-weight: 400;">:</span></p>
<ul>
<li><span style="font-weight: 400;">Re-create one of the small graphics from Figure 5.1 (page 94) using D3.js.</span></li>
</ul>
</td>
</tr>
<tr>
<td style="width: 50.3977px;">
<p><span style="font-weight: 400;">4</span></p>
</td>
<td style="width: 171.307px;">
<p><span style="font-weight: 400;">Common Visualization Idioms</span></p>
</td>
<td style="width: 555.852px;">
<p><strong>Reading</strong><span style="font-weight: 400;">: Chapter 7 “Arrange Tables”</span></p>
<p><span style="font-weight: 400;"><strong>Lectures</strong>:</span></p>
<ul>
<li><span style="font-weight: 400;">Reusable Dynamic Components using the General Update Pattern</span>
<ul>
<li><span style="font-weight: 400;">Reusable Scatter Plot</span></li>
</ul>
</li>
<li><span style="font-weight: 400;">Common Visualization Idioms with D3.js</span>
<ul>
<li><span style="font-weight: 400;">Bar Chart, Vertical & Horizontal</span></li>
<li><span style="font-weight: 400;">Pie Chart and Coxcomb Plot</span></li>
<li><span style="font-weight: 400;">Line Chart</span></li>
<li><span style="font-weight: 400;">Area Chart</span></li>
</ul>
</li>
</ul>
<p><strong>Assignment</strong><span style="font-weight: 400;">:</span><span style="font-weight: 400;"><br /></span></p>
<p><span style="font-weight: 400;">Create a visualization of the dataset you chose for your project using D3.js, following one of the idioms discussed, including axes and legends.</span></p>
</td>
</tr>
<tr>
<td style="width: 50.3977px;">
<p><span style="font-weight: 400;">5</span></p>
</td>
<td style="width: 171.307px;">
<p>Visualization of Spatial Data, Networks, and Trees</p>
</td>
<td style="width: 555.852px;">
<p><strong>Reading</strong><span style="font-weight: 400;">:</span></p>
<ul>
<li><span style="font-weight: 400;">Chapter 8 “Arrange Spatial Data”</span></li>
<li><span style="font-weight: 400;">Chapter 9 "Arrange Networks and Trees"</span></li>
</ul>
<p><span style="font-weight: 400;"><strong>Lectures</strong>:</span></p>
<ul>
<li><span style="font-weight: 400;">Making Maps</span></li>
<li><span style="font-weight: 400;">Visualizing Trees and Networks</span><span style="font-weight: 400;"></span></li>
</ul>
<p><strong>Assignment</strong><span style="font-weight: 400;">:</span><span style="font-weight: 400;"><br /></span></p>
<ul>
<li><span style="font-weight: 400;">If your project dataset has a spatial, network, or tree aspect, visualize it.</span></li>
</ul>
</td>
</tr>
<tr>
<td style="width: 50.3977px;">
<p><span style="font-weight: 400;">6</span></p>
</td>
<td style="width: 171.307px;">
<p><span style="font-weight: 400;">Using Color and Size in Visualization</span></p>
</td>
<td style="width: 555.852px;">
<p><strong>Reading</strong><span style="font-weight: 400;">: </span><span style="font-weight: 400;"><br /></span><span style="font-weight: 400;">Ch. 10 “Map Color and Other Channels”</span></p>
<p><span style="font-weight: 400;"><strong>Lectures</strong>:</span></p>
<ul>
<li><span style="font-weight: 400;">Encoding Data using Color</span></li>
<li><span style="font-weight: 400;">Encoding Data using Size</span><span style="font-weight: 400;"></span></li>
<li><span style="font-weight: 400;">Stacked & Grouped Bar Chart</span></li>
<li><span style="font-weight: 400;">Stacked Area Chart & Streamgraph</span></li>
<li><span style="font-weight: 400;">Line Chart with Multiple Lines</span></li>
</ul>
<p><strong>Assignment (Project)</strong><span style="font-weight: 400;">:</span><span style="font-weight: 400;"><br /></span><span style="font-weight: 400;">Add color to (or refine the palette of) your project using D3.js and one of the tools discussed.</span></p>
</td>
</tr>
<tr>
<td style="width: 50.3977px;">
<p><span style="font-weight: 400;">7</span></p>
</td>
<td style="width: 171.307px;">
<p><span style="font-weight: 400;">Interaction Techniques</span></p>
</td>
<td style="width: 555.852px;">
<p><strong>Reading</strong><span style="font-weight: 400;">: </span><span style="font-weight: 400;"><br /></span><span style="font-weight: 400;">Chapter 11 “Manipulate View”</span></p>
<p><span style="font-weight: 400;"><strong>Lectures</strong>:</span></p>
<ul>
<li><span style="font-weight: 400;">Adding interaction with Unidirectional Data Flow</span></li>
<li><span style="font-weight: 400;">Using UI elements to control a scatter plot</span></li>
<li><span style="font-weight: 400;">Panning and Zooming on a Globe</span></li>
<li><span style="font-weight: 400;">Adding tooltips</span></li>
</ul>
<p><strong>Assignment (Project)</strong><span style="font-weight: 400;">:</span><span style="font-weight: 400;"><br /></span><span style="font-weight: 400;">Add one of the interaction techniques discussed to your project using D3.js.</span></p>
</td>
</tr>
<tr>
<td style="width: 50.3977px;">
<p><span style="font-weight: 400;">8</span></p>
</td>
<td style="width: 171.307px;">
<p><span style="font-weight: 400;">Multiple Linked Views</span></p>
</td>
<td style="width: 555.852px;">
<p><strong>Reading</strong><span style="font-weight: 400;">: </span><span style="font-weight: 400;"><br /></span><span style="font-weight: 400;">Chapter 12 “Facet into Multiple Views”</span></p>
<p><span style="font-weight: 400;"><strong>Lectures</strong>:</span></p>
<ul>
<li><span style="font-weight: 400;">Small Multiples</span></li>
<li><span style="font-weight: 400;">Linked Highlighting with Brushing</span></li>
<li><span style="font-weight: 400;">Linked Navigation: Bird's Eye Map</span></li>
</ul>
<p><strong>Assignment (Project)</strong><span style="font-weight: 400;">:</span><span style="font-weight: 400;"><br /></span><span style="font-weight: 400;">Combine your 2 visualizations from week 4 with some form of linked interaction.</span></p>
</td>
</tr>
<tr>
<td style="width: 50.3977px;">
<p><span style="font-weight: 400;">9</span></p>
</td>
<td style="width: 171.307px;">
<p><span style="font-weight: 400;">Data Reduction</span></p>
</td>
<td style="width: 555.852px;">
<p><strong>Reading</strong><span style="font-weight: 400;">: </span><span style="font-weight: 400;"><br /></span><span style="font-weight: 400;">Chapter 13 “Reduce Items and Attributes”</span></p>
<p><span style="font-weight: 400;"><strong>Lectures</strong>:</span></p>
<ul>
<li><span style="font-weight: 400;">Histograms</span></li>
<li><span style="font-weight: 400;">Aggregating Data with Group-By</span></li>
<li><span style="font-weight: 400;">Hexbin Mapping</span></li>
<li><span style="font-weight: 400;">Crossfiltering</span></li>
</ul>
<p><strong>Assignment (Project)</strong><span style="font-weight: 400;"><br /></span><span style="font-weight: 400;">Create a histogram or aggregated bar chart of your project dataset.</span></p>
</td>
</tr>
<tr>
<td style="width: 50.3977px;">
<p><span style="font-weight: 400;">10</span></p>
</td>
<td style="width: 171.307px;">
<p><span style="font-weight: 400;">Focus + Context</span></p>
</td>
<td style="width: 555.852px;">
<p><strong>Reading</strong><span style="font-weight: 400;">: </span><span style="font-weight: 400;"><br /></span><span style="font-weight: 400;">Chapter 14 “Focus + Context”</span></p>
<p><span style="font-weight: 400;"><strong>Lectures</strong>:</span></p>
<ul>
<li><span style="font-weight: 400;">Building a Migrant Deaths Dashboard</span></li>
</ul>
<p><strong>Assignment (Project)</strong><span style="font-weight: 400;">:</span><span style="font-weight: 400;"><br /></span><span style="font-weight: 400;">Use Focus + Context idiom in your project.</span></p>
</td>
</tr>
</tbody>
</table>
<p><i><span style="font-weight: 400;">Note: Weekly assignments may be subject to change, and will be given in detail week by week.</span></i></p>