forked from Ecohen4/data-viz
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
307 lines (271 loc) · 10.8 KB
/
index.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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<style>
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote {
margin: 0;
padding: 0;
}
body {
font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", Arial, sans-serif;
font-size: 10px;
line-height: 15px;
color: #737373;
background-color: white;
margin: 6px 9px 6px 9px;
}
table {
margin: 10px 0 15px 0;
border-collapse: collapse;
}
td,th {
border: 1px solid #ddd;
padding: 3px 10px;
}
th {
padding: 5px 10px;
}
a {
color: #0069d6;
}
a:hover {
color: #0050a3;
text-decoration: none;
}
a img {
border: none;
}
p {
margin-bottom: 9px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #404040;
line-height: 36px;
}
h1 {
margin-bottom: 15px;
font-size: 26px;
}
h2 {
font-size: 20px;
}
h3 {
font-size: 16px;
}
h4 {
font-size: 14px;
}
h5 {
font-size: 13px;
}
h6 {
font-size: 12px;
}
hr {
margin: 0 0 19px;
border: 0;
border-bottom: 1px solid #ccc;
}
blockquote {
padding: 9px 9px 9px 9px;
margin-bottom: 9px;
font-family:georgia,serif;
font-style: italic;
}
blockquote:before {
content:"\201C";
font-size:30px;
margin-left:-10px;
font-family:georgia,serif;
color:#eee;
}
blockquote p {
font-size: 11px;
font-weight: 300;
line-height: 15px;
margin-bottom: 0;
font-style: italic;
}
code, pre {
font-family: Monaco, Andale Mono, Courier New, monospace;
}
code {
background-color: #fee9cc;
color: rgba(0, 0, 0, 0.75);
padding: 1px 3px;
font-size: 12px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
pre {
display: block;
padding: 14px;
margin: 0 0 18px;
line-height: 16px;
font-size: 11px;
border: 1px solid #d9d9d9;
white-space: pre-wrap;
word-wrap: break-word;
}
pre code {
background-color: #fff;
color:#737373;
font-size: 11px;
padding: 0;
}
sup {
font-size: 0.83em;
vertical-align: super;
line-height: 0;
}
* {
-webkit-print-color-adjust: exact;
}
@media screen and (min-width: 914px) {
body {
width: 854px;
margin:10px auto;
}
}
@media print {
body,code,pre code,h1,h2,h3,h4,h5,h6 {
color: black;
}
table, pre {
page-break-inside: avoid;
}
}
</style>
<title>Data Visualization</title>
<script type="text/x-mathjax-config">MathJax.Hub.Config({tex2jax:{inlineMath:[['$$$','$$$']]}});</script><script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
</head>
<body>
<h1>Data Visualization</h1>
<pre><code>Quantitative Methods in the Social Sciences (QMSS)
Graduate School of Arts and Sciences (GSAS)
Columbia University
</code></pre>
<h2>Course Details</h2>
<p>Course: QMSS G4063 Spring 2015<br/>
Lecture: MW 1:10pm-2:25pm at 313 Fayerweather<br/>
Office Hours: W 2:30pm-3:30pm at IAB 270C</p>
<h2>Instructor</h2>
<p>Elliot Cohen, Ph.D.<br/>
Lecturer in the Department of Statistics<br/>
Columbia University</p>
<h2>Course Description</h2>
<p>This course offers a rigorous introduction to data visualization from theory to implementation. Drawing on a combination of lectures, readings, discussions and coding, we will translate the timeless concepts of Minard, Playfair, Tufte and Wilkinson to new and diverse fields of study. Students will receive a coding crash-course in R, JavaScript, CSS, HTML and D3. The goal is not to become computer scientists, but to build the requisite foundation for modern implementation of exploratory and explanatory data visualizations. Students will have the opportunity to work in small teams to create interactive data visualizations worthy of their portfolios. The final deliverable will be a research-driven data visualization with accompanying prose in the form of a conference paper submission. A working knowledge of R from at least one previous class is highly recommended.</p>
<h2>Deliverables</h2>
<ul>
<li><strong>Quizzes (30%)</strong>
Quizzes are essential for assessing student learning and pedagogical efficacy. There will be 4 quizzes in total; students may pick their best three to count towards their final grade.</li>
<li><strong>Homework (30%)</strong>
Students will complete at least three assignments and submit them to the course repository as pull requests. All submissions must follow a "<em>Year-Month-Day-YourName-AssignmentName.FileExtension</em>" naming convention. Assignments will serve as progress indicators on key concepts, methods and techniques.</li>
<li><strong>Semester Project (30%)</strong>
Students will have the opportunity to work in small teams to create data visualizations worthy of their portfolios. The final deliverable will be a well-articulated, research-driven data visualization and accompanying prose in the form of a conference paper submission. Students will have considerable leeway in choosing a project topic and finding an appropriate conference or forum for submission.</li>
<li><strong>Class Participation (10%)</strong>
<ul>
<li>Attendance</li>
<li>Being awake, attentive and respectful</li>
<li>Being helpful to peers and the class as a whole</li>
<li>Contributing to group work and peer code reviews</li>
</ul>
</li>
</ul>
<h2>Required Reading</h2>
<ul>
<li><a href="http://www.jstor.org/stable/pdfplus/2965153.pdf?&acceptTC=true&jpdConfirm=true&acceptTC=true&acceptTC=true">Joint Committee on Standards for Graphic Presentation</a>. 1915. <em>American Statistical Association</em>, 14 (112): 790-797.</li>
<li>Edward R. Tufte. 2001. <a href="http://www.amazon.com/The-Visual-Display-Quantitative-Information/dp/0961392142">The visual display of quantitative information.</a> Cheshire, Conn.: Graphics Press, c2001.</li>
<li>Leland Wilkinson. 2005. <a href="http://link.springer.com/book/10.1007/0-387-28695-0">The grammar of graphics</a>. New York: Springer, 2005.</li>
<li>Hadley Wickham. 2009. <a href="http://www.bioinformaticslaboratory.nl/twikidata/pub/Education/ComputinginR/ggplot2-book.pdf">ggplot2: elegant graphics for data analysis</a></li>
<li>Norman Matloff. 2011. <a href="http://www.amazon.com/The-Art-Programming-Statistical-Software/dp/1593273843/ref=pd_sim_b_2?ie=UTF8&refRID=1T2KB926VAHCZJPH02K0">The art of R programming</a>. San Francisco : No Starch Press, c2011.</li>
<li>Scott Murray. 2013. <a href="http://www.amazon.com/gp/product/1449339735/ref=ox_sc_act_title_4?ie=UTF8&psc=1&smid=AUSV0VS9I8UVB">Interactive data visualization for the web.</a> Sebastopol, CA: O'Reilly Media, 2013.</li>
</ul>
<h2>Learning Objectives</h2>
<p>... and resources to help you get there</p>
<ul>
<li><a href="http://www.sealthreinhold.com/tuftes-rules/rule_four.php">Tufte's Rules</a>. Above all else, show the data.</li>
<li>Grammar of Graphics. Wilkinson's theory and Wickham's implementation.</li>
<li>Meet your computer
<ul>
<li>command line</li>
<li>text editors</li>
<li>file paths</li>
</ul>
</li>
<li>Working with data in <code>R</code>
<ul>
<li><a href="http://ecohen4.github.io/data-viz/r/R-tutorial.html">Basic training</a></li>
<li>Data analysis with <code>plyr</code></li>
<li>Data visualization with <code>ggplot</code></li>
<li>Scripting, debugging and writing functions</li>
<li>Reproducible research and dynamic output with <a href="http://rmarkdown.rstudio.com/RMarkdownReferenceGuide.pdf">Rmarkdown</a></li>
</ul>
</li>
<li>Communicating & sharing your results in the browser
<ul>
<li>github.io</li>
<li><code>HTML</code>, <code>CSS</code>, <code>JavaScript</code></li>
<li>Interactive visualization with <code>D3</code></li>
</ul>
</li>
<li>Version control and collaboration with <code>github</code>
<ul>
<li><a href="http://readwrite.com/2013/09/30/understanding-github-a-journey-for-beginners-part-1">Don't get scared, get started!</a></li>
<li><a href="https://help.github.com/articles/set-up-git/">Github Help</a></li>
<li><a href="http://skli.se/2012/09/22/introduction-to-git/">Git intro for readers</a></li>
<li><a href="https://www.youtube.com/watch?v=LXoWxrTdXkM">Git intro for visual and auditory learners</a></li>
<li><a href="http://skli.se/2012/10/07/git-workflow-beginner/">Git workflow for beginners</a></li>
<li><a href="https://help.github.com/articles/fork-a-repo">Forking</a></li>
<li><a href="https://www.youtube.com/watch?v=ifAEho6BmH0&list=PLg7s6cbtAD17uAwaZwiykDci_q3te3CTY">Sharing and Collaborating</a></li>
</ul>
</li>
</ul>
<h2>Get Started Now!</h2>
<ul>
<li>Install <a href="http://www.r-project.org/">R</a> and <a href="http://www.rstudio.com/products/rstudio/download/">RStudio</a></li>
<li>Read about <a href="http://rmarkdown.rstudio.com/">RMarkdown</a></li>
<li>Install <a href="http://git-scm.com/download">git</a></li>
<li>Create a <a href="https://github.com/">github</a> account if you don't already have one</li>
<li><p>Fork the class repo. Your assignments will be submitted as pull requests!</p>
<pre><code> git clone https://github.com/YOUR-NAME/data-viz.git
cd data-viz
git remote add upstream https://github.com/ecohen4/data-viz.git
</code></pre></li>
</ul>
<h2>Submit Assignments</h2>
<p>Your assignments will be submitted as pull requests to the class repository on github! Suppose you saved changes on your own <code>gh-pages</code> branch and would like to submit a ‘clean’ pull request with only your files and the commits you want. This is pretty easy.</p>
<h3>Option 1: Basic way with file checkouts (losing history):</h3>
<pre><code>git checkout upstream/gh-pages #you will be on a ‘detached HEAD’
git checkout -b hw1 #checkout a new branch called 'hw1'
git checkout <branch> <folder/filename> #pluck a folder/file from another branch but stay on the current branch (in this case 'hw1').
git add <folder/filename>
git commit -m "add only the right files on new clean branch"
git push -u hw1 #push commits to a new branch called hw1.
</code></pre>
<p>Your new <code>hw1</code> branch now has a copy of the folder/file(s) your plucked from elsewhere. Your working tree is still on the 'hw1' branch and you can continue to work on the files and commit+push further changes as frequently as you like.</p>
<h3>Option 2: Advanced way with Rebase (history re-written)</h3>
<p>Rebasing rewrites history of a branch, in a really clever way. Each commit becomes a new commit, on top of a new beginning point. This is probably the most common way of making a clean pull request.</p>
<pre><code>git checkout gh-pages
git checkout -b hw1
git fetch upstream
git rebase -i origin/gh-pages
</code></pre>
<p>At this point you’re given a list, where you can pick, squash, or remove commits from your branch. Remember, a branch is just a collection of commits. If, for example, you only want to include the last few commits, simply delete all the others and allow rebase to continue. You should now have a branch that contains only the commits you want.</p>
</body>
</html>