-
Notifications
You must be signed in to change notification settings - Fork 1
/
week1a.html
309 lines (260 loc) · 18.3 KB
/
week1a.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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>1a: Introduction to interactive data viz</title>
<meta name="description" content="02.526 Interactive Data Viz, Introduction">
<meta name="author" content="Chan Chi-Loong, V/R">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="css/reveal.min.css">
<link rel="stylesheet" href="css/theme/night.css" id="theme">
<link rel="stylesheet" href="css/style.css">
<!-- If the query includes 'print-pdf', use the PDF print sheet -->
<script>
document.write( '<link rel="stylesheet" href="css/print/' + ( window.location.search.match( /print-pdf/gi ) ? 'pdf' : 'paper' ) + '.css" type="text/css" media="print">' );
</script>
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="reveal">
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides">
<section data-state="alert" data-transition="zoom">
<h1 class="shadowfont white">02.526 Interactive Data Viz</h1>
</section>
<section>
<h2>Hello</h2>
<p>My name is Chi-Loong and I'll be your adjunct lecturer for this course.</p>
<p>Just call me Chi-Loong!</p>
</section>
<section>
<h2>Past lives</h2>
<p>I spent half my career in storytelling. I was in journalism and public relations in the tech space for a decade.</p>
<p>The other half is in technology, also about a decade plus. I have had roles in tech start-ups like head of product and engineering.</p>
</section>
<section>
<h2>Current lives</h2>
<p>I run my own consulting-based visualization / code studio at <a href="https://www.vslashr.com/">V/R</a>, and have done so for the last decade.</p>
</section>
<section>
<h2>Teaching</h2>
<p>I have taught three previous semesters of interactive data visualization at SUTD's HASS <a href="https://chi-loong.github.io/HASS02.526/">masters' course</a> — this very module.</p>
<p>I am also an adjunct lecturer at SIT, and I have taught <a href="https://showcase.vslashr.com/sit_csc2005/">web dev</a> and now teach a technical <a href="https://chi-loong.github.io/CSC3007/">visualization course</a> to year 3 computer engineering grads.</p>
<p>I have also taught at code schools like General Assembly and SGCodeCampus, mainly on visualization.</p>
</section>
<section>
<h3>Community</h3>
<p>I run the local Singapore <a href="https://www.meetup.com/Data-Vis-Singapore/">Data Viz SG</a> and <a href="https://www.meetup.com/Hacks-Hackers-Singapore/">HHSG</a> meetup groups, and am part of the Data Visualization Society (SG chapter).</p>
<p>My own passion project is <a href="https://www.viz.sg/">Visualizing Singapore (viz.sg)</a>, a community site for data viz enthusiasts.</p>
</section>
<section>
<h2>Samples</h2>
<div>
<a href="https://elections.viz.sg/" target="_blank"><img src="img/SGelections.jpg"></a>
<a href="https://showcase.vslashr.com/connection2018/app/" target="_blank"><img src="img/3dviz.jpg"></a>
<a href="https://www.temasekreview.com.sg/investor/how-we-grew.html" target="_blank"><img src="img/temasekchart.jpg"></a>
</div>
<div>
<a href="https://chi-loong.github.io/covid/" target="_blank"><img src="img/covidsg.jpg"></a>
<a href="https://viz.vslashr.com/earth/" target="_blank"><img src="img/earthglobe.jpg"></a>
<a href="https://viz.sg/" target="_blank"><img src="img/vizsg.jpg"></a>
</div>
<p class="smallfont">I also do visualization prototypes and dashboards for software products. Clients include A*Star (for MOT), PSA (for MPA), Attilatech (cyber security), etc.</p>
</section>
<section>
<h3>Course vision</h3>
<p>There are three ways to approach the domain - research, technical, or industry.</p>
<p>As a practitioner in the space I tend to approach the domain from an industry perspective with a technical slant.</p>
</section>
<section>
<h3>Speakers</h3>
<p>For a masters course, I feel that the greatest value is in discussing real-life work and networking.</p>
<p>Hence I tend to invite and curate guest lectures by people in the industry. For 2023 I had 4 guest speakers, and for 2024 I hope to have at least 3.</p>
<p>Speakers range from journalists, to data scientists, to UX practitioners.</p>
</section>
<section>
<h3>Design and code</h3>
<p>This course is split up into two components — <b>design</b> and <b>code</b>.</p>
<p>In the <b>design</b> portion, we will go through the academia / research / case studies in what makes for good data visualization design.</p>
<p>In the <b>code</b> portion, we will be building interactive data visualizations for the web.</p>
</section>
<section>
<h3>On technology</h3>
<p>Visualizations can be built with all kinds of software tool / cloud-based platforms.</p>
<p>However, for an interactive visualization course I will going through how to do it natively for the <b>web</b>.</p>
<p>This namely means using <a href="https://d3js.org/" target="_blank">D3 (Data Driven Documents)</a>, the defacto data visualization library for the web.</p>
<p>I will also be touching on a smattering of other useful libraries, e.g. Leaflet, plot.js, etc.</p>
</section>
<section>
<h3>Viz tools</h3>
<img src="img/viztools.jpg"/>
<p class="smallfont">Will revisit this again in the lecture on <i>why</i> we do visualization.</p>
</section>
<section>
<h3>Why D3</h3>
<ul>
<li>If you're interested in analytics, Excel / Tableau / PowerBI are good non-coding choices.</li>
<li>If you're familiar with data science languages, Python or R has graphing libraries (ggplot2, plotly, mathlibplot, etc.)</li>
<li>D3 is used because you want to <b>build beautiful interactive visualizations</b> for the web. You can implement any interactions you want.</li>
<li>It also has comprehensive built-in <b>design patterns for visualizations</b>, like geo projections, force simulations, hierarchies, etc.</li>
<li>Lastly, it is open source and free.</li>
</ul>
</section>
<section>
<h3>Why web</h3>
<ul>
<li>For web visualization there are many libraries / tools / platforms beyond D3.</li>
<li>If you are pressed for time for a standard chart type, it might be easier to use other tools / libraries built on top of D3. For example, <a href="http://nvd3.org/" target="_blank">NVD3</a> or <a href="https://c3js.org/" target="_blank">C3.js</a>.</li>
<li>You can also use other libraries (leaflet, highcharts, etc.) to build the components you need.</li>
<li>There are even full platforms - Mapbox, Cesium, etc. that will allow you to host and build on top of those platforms.</li>
</ul>
<hr/>
<p class="smallfont">This is my bias. You are not going to get glassy visualizations for the web without coding it natively for the web.</p>
</section>
<section>
<h3>Course expectations</h3>
<p>Deploying web-based interactive visualizations is a requirement for this course.</p>
<p>You can use low code / no code tools, but a little experience in <b>HTML / CSS / JS</b> will be helpful.</p>
<p>Thus we'll go through some basic HTML / CSS / JS, but it won't be comprehensive.</p>
<hr/>
<p class="smallfont">There are lots of tutorials on the web for HTML / CSS / JS.</p>
<p class="smallfont">It will be great if you are more technical and know more — CSS /JS frameworks, web architecture frontend / backend, etc. — but it is not required for this course.</p>
</section>
<section>
<h3>Course expectations 2</h3>
<p>On the JS side, you should hopefully also know how to pull data from APIs, have some familarity in data formats like JSON (E.g. GeoJSON).</p>
<p>Beyond HTML / CSS / JS, we will also be using <b>Git</b>, a version control tool.</p>
<p>Students will be publishing their assignments and work on <b>GitHub</b> and <b>GitPages</b>.</p>
<hr/>
<p class="smallfont">If you do not have a GitHub account, please do sign up for one.</p>
<p class="smallfont">I will do a survey later, and also go through with the class on self-introduction and understand your expectations of the course.</p>
</section>
<section>
<h3>Course expectations 3</h3>
<p>However, if you prefer to use other web-based tools for projects, you are free to do so.</p>
<p>The only requirement is that you need to be able to publish your work on a GitHub repository (through GitPages).</p>
<p>For coordination for this module, we will be using communication tool <b>Slack</b>.</p>
<hr/>
<p class="smallfont">I'll collect emails from all of you folks so i can add you to the slack account.</p>
</section>
<section>
<h3>The spirit of the course</h3>
<p>I see the masters course as a learning and networking experience, and I hope you see it as something beyond grades.</p>
<p>Grade wise, as long as you complete the 5 assignments and the <a href="projects2021.html">visualization projects</a>, I will try to give you a good grade (last year were all B+ and above).</p>
<p>It is an opportunity to connect with people in this domain and to see what it is about.</p>
<p>Let's all learn and have some fun.</p>
</section>
<section>
<h3>Self-intros and questions!</h3>
</section>
<section data-state="alert" data-transition="zoom">
<h1 class="shadowfont white">1a: Introduction to Data Viz</h1>
<h3>Why data visualization?</h3>
</section>
<section>
<h2>Wiki definition</h2>
<p>To communicate data / information clearly and effectively by encoding it as graphical visual objects (e.g. points, lines).</p>
</section>
<section>
<h3>Historical viz</h3>
<a href="img/Minard.png" target="_blank"><img src="img/Minard.png"></a>
<p class="smallfont"><a href="https://en.wikipedia.org/wiki/Charles_Joseph_Minard" target="_blank">Charles Joseph Minard's</a> 1869 diagram of Napoleonic France's invasion of Russia.</p>
<p class="smallfont">It shows the number of men in Napoleon’s 1812 Russian campaign army, their movements, as well as the temperature they encountered on the return path.</p>
</section>
<section>
<h3>Historical viz 2</h3>
<a href="img/1024px-Snow-cholera-map-1.jpg" target="_blank"><img src="img/1024px-Snow-cholera-map-1.jpg" width="600"></a>
<p class="smallfont"><a href="https://en.wikipedia.org/wiki/John_Snow" target="_blank">John Snow's</a> map of the 1854 cholera outbreak in Soho, which helped debunk the then-dominant miasma theory.</p>
<p class="smallfont">Examples shamelessly stolen from <i>Edward Tufte's Visual Display of Quantitative Visualization (1983)</i></p>
</section>
<section>
<h3>Exploratory analysis or storytelling?</h3>
<img src="img/data_viz_process.png">
<p class="smallfont">A 3rd category: Engineering a data visualization product / tool to automate exploratory analysis / presentation.</p>
</section>
<section>
<h3>Visualization analysis</h3>
<img src="img/data-task-idiom.jpg">
<ul>
<li><b>What:</b> What data does the user see?</li>
<li><b>Why:</b> Why does the user want to use a viz tool?</li>
<li><b>How:</b> How is the visual encoding and design choices chosen?</li>
</ul>
<p>These three questions form the <b>data — task — idiom</b> trio.</p>
</section>
<section>
<h2>A broader definition</h2>
<p>Computer-based visualization systems provide visual representations of datasets designed to help people carry out tasks more effectively.</p>
<hr/>
<p class="smallfont">Reading: <a href="https://www.pnas.org/content/pnas/116/6/1857.full.pdf">Data visualization literacy framework</a></p>
<p class="smallfont">Reading: <a href="https://www.amazon.sg/Visualization-Analysis-Design-Tamara-Munzner/dp/1466508914">Chapter 1, Visualization Analysis and Design (Tamara Munzner)</a></p>
</section>
<section>
<h2>Course structure recap</h2>
<p>Let's take a closer look at how this <a href="index.html" target="_blank">course is structured</a>.</p>
</section>
<section>
<h2>Big picture questions 1</h2>
<ul>
<li>Why have a human in the decsision making loop?</li>
<li>Why have a computer in the loop?</li>
<li>Why use an interface / external representation?</li>
<li>Why depend on vision?</li>
</ul>
</section>
<section>
<h2>Big picture questions 2</h2>
<ul>
<li>Why visualize data in detail?</li>
<li>Why use interactivity?</li>
<li>Why is the viz idiom design space huge?</li>
<li>Why focus on tasks? i.e. why (task) over what (data) and how (idiom)</li>
</ul>
</section>
<section>
<h2>Big picture questions 3</h2>
<ul>
<li>Why focus on effectiveness? i.e. why validate visualizations?</li>
<li>Why are a lot of designs ineffective?</li>
<li>Why is validation difficult?</li>
<li>What resource limitations are there?</li>
</ul>
</section>
<section>
<h2>Questions?</h2>
<div class="plain">
<div class="rotate-icon"><a href="http://www.vslashr.com"><img width="100" src="img/VslashR_logo_white.svg"></a></div>
</div>
<p><small>Chi-Loong | V/R</small></p>
</section>
</div>
</div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.js"></script>
<script>
// Full list of configuration options available here:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: true,
theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/fade/none
// Optional libraries used to extend on reveal.js
dependencies: [
{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: 'plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
{ src: 'plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }
]
});
</script>
</body>
</html>