-
Notifications
You must be signed in to change notification settings - Fork 39
/
index.html
185 lines (181 loc) · 16.3 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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="generator" content="pandoc" />
<title></title>
<style type="text/css">code{white-space: pre;}</style>
<link rel="stylesheet" type="text/css" href="css/fixed-nav-bar.css" />
<link rel="stylesheet" type="text/css" href="css/markdown.css" />
</head>
<body>
<nav class="fixed-nav-bar">
<div id="menu" class="menu">
<a class="sitename" href="http://arnicas.github.io/interactive-vis-course/index.html">Interactive Data Vis</a>
<a class="show" href="#menu">Menu</a><a class="hide" href="#hidemenu">Menu</a>
<ul class="menu-items">
<li><a href="http://arnicas.github.io/interactive-vis-course/index.html">Course Home</a></li>
<li><a href="http://arnicas.github.io/interactive-vis-course/examples.html">Examples List</a></li>
<li><a href="http://github.com/arnicas/interactive-vis-course/">Repo</a></li>
<li><a href="http://www.ghostweather.com">Lynn's Site</a></li>
<li><a href="//twitter.com/arnicas">@arnicas</a></li>
</ul>
</div>
</nav>
<h3>On This Page...</h3>
<div id="TOC">
<ul>
<li><a href="#interactive-data-vis-course-repo">Interactive Data Vis Course Repo</a><ul>
<li><a href="#what-the-course-covers">What the Course Covers</a><ul>
<li><a href="#interactive-data-vis-design-principles-techniques-best-practices...">1. Interactive Data Vis: Design Principles, Techniques, Best-Practices...</a></li>
<li><a href="#programming-techniques-and-tools-well-cover">2. Programming Techniques and Tools We'll Cover</a></li>
<li><a href="#evaluation">3. Evaluation</a></li>
</ul></li>
<li><a href="#data-sources-to-use">Data Sources To Use</a><ul>
<li><a href="#unicef-child-mortality-fall-semester-client-optional-for-spring">UNICEF & Child Mortality (Fall Semester Client, optional for Spring)</a></li>
<li><a href="#links-to-datasets">Links to Datasets</a></li>
<li><a href="#quantified-self">Quantified Self</a></li>
</ul></li>
<li><a href="#background-d3-books-and-tutorial-materials">Background: D3 Books and Tutorial Materials</a></li>
<li><a href="#js-refreshers">JS Refreshers</a></li>
<li><a href="#debugging-help">Debugging Help</a></li>
<li><a href="#resources-for-vis-examples">Resources for Vis Examples</a></li>
</ul></li>
</ul>
</div>
<h1 id="interactive-data-vis-course-repo">Interactive Data Vis Course Repo</h1>
<p>Repo for U of Miami School of Communication course on interactive data visualization for the web by Lynn Cherny (fall 2015 and spring 2016). The repo is best viewed on github.io: <a href="http://arnicas.github.io/interactive-vis-course/" class="uri">http://arnicas.github.io/interactive-vis-course/</a>. Lynn is @arnicas on twitter.</p>
<pre><code>Office Hours: Wolfson 1020A, M & Th 1-3 or by appt.
Emails for homework: arnicas@gmail.com</code></pre>
<h2 id="what-the-course-covers">What the Course Covers</h2>
<h3 id="interactive-data-vis-design-principles-techniques-best-practices...">1. Interactive Data Vis: Design Principles, Techniques, Best-Practices...</h3>
<p>Originally intended as having a journalistic focus, the course contents will expand a little more in spring 2016 to address broader topics in visualization. (Those additions are in progress.)</p>
<ul>
<li><a href="Week1" class="uri">Week1</a>: Intro to Tools and the Course, Setup, CSVs</li>
<li><a href="Week2" class="uri">Week2</a>: Loading CSV Data, Highcharts</li>
<li><a href="Week3" class="uri">Week3</a>: Data Loading, Tables in D3</li>
<li><a href="Week4" class="uri">Week4</a>: More tables, Scales, SVG</li>
<li><a href="Week5" class="uri">Week5</a>: Bar Charts, Axes, Text Labels, Scatterplots</li>
<li><a href="Week6" class="uri">Week6</a>: Linecharts, Events, Simple Tooltips</li>
<li><a href="Week7" class="uri">Week7</a>: Improved Line Charts, Transitions</li>
<li><a href="Week8" class="uri">Week8</a>: Updates to Data, More Transitions</li>
<li><a href="Week9" class="uri">Week9</a>: Stacking Chart Types, Intro to Small Multiples</li>
<li><a href="Week10" class="uri">Week10</a>: Small Multiples, Intro to Maps</li>
<li><a href="Week11" class="uri">Week11</a>: Maps: D3, Leaflet, CartoDB...</li>
<li><a href="Week12" class="uri">Week12</a>: Storytelling Techniques: Scrollytelling, Steppers</li>
<li><a href="Week13" class="uri">Week13</a>: Animation: Lines, Play/Pause...</li>
<li><a href="Week14" class="uri">Week14</a>: Reusable charts, Other Layouts, Project Tips/Grading</li>
<li><a href="Week15" class="uri">Week15</a>: Helpful Tips: How to File a Bug Report, Debugging</li>
</ul>
<p>All the made-for-class example files are <a href="examples.html">here</a>. Many other examples are linked in each week's folder.</p>
<h3 id="programming-techniques-and-tools-well-cover">2. Programming Techniques and Tools We'll Cover</h3>
<ul>
<li>Good practices with D3.js for data vis</li>
<li>Javascript and useful libraries like jQuery, lodash</li>
<li>Web Charting libs like Highcharts, D3, libs on top of D3 like Dimple.js</li>
<li>GitHub use</li>
<li>Debugging how-to's</li>
</ul>
<h3 id="evaluation">3. Evaluation</h3>
<p>Grading based on weekly homeworks (60%) and a final project (40%) that uses many of the techniques in a storytelling project using data that interests you. This is a project course - you will be making things more than you will be reading or writing, but there will be a bit of that, too.</p>
<p>Primary emphasis is on end user experience and data honesty; secondary consideration will be good coding practices.</p>
<p><strong>Homework Due Dates</strong>: Due by 5pm on Monday before class day, unless I decide otherwise... You will be submitting links by email (<script type="text/javascript">
<!--
h='gmail.com';a='@';n='arnicas';e=n+a+h;
document.write('<a h'+'ref'+'="ma'+'ilto'+':'+e+'" clas'+'s="em' + 'ail">'+e+'<\/'+'a'+'>');
// -->
</script><noscript>arnicas at gmail dot com</noscript>).</p>
<h2 id="data-sources-to-use">Data Sources To Use</h2>
<h3 id="unicef-child-mortality-fall-semester-client-optional-for-spring">UNICEF & Child Mortality (Fall Semester Client, optional for Spring)</h3>
<ul>
<li><a href="miscfiles/APromiseRenewed_Brief_March2015.pdf">The client brief</a></li>
<li>The 2014 Key Findings Report on <a href="http://www.apromiserenewed.org/" class="uri">http://www.apromiserenewed.org/</a>: <a href="http://www.apromiserenewed.org/wp-content/uploads/2015/07/A-Promise-Renewed-2014-Key-Findings.pdf">pdf</a> (plus other publications that may be useful!)</li>
<li>Their data sites: <a href="http://data.unicef.org/index.php" class="uri">http://data.unicef.org/index.php</a>, <a href="http://mics.unicef.org" class="uri">http://mics.unicef.org</a></li>
<li>World Health Org (WHO): <a href="http://www.who.int/research/en/" class="uri">http://www.who.int/research/en/</a></li>
<li><a href="http://childmortality.org/" class="uri">http://childmortality.org/</a> - UN Inter-agency Group for Child Mortality Estimation (IGME), of which UNICEF is a member (new data coming in September)</li>
</ul>
<h3 id="links-to-datasets">Links to Datasets</h3>
<ul>
<li>Jeremy Singer-Vine's excellent tinyletter archives for Data Is Plural (and maybe get on the list!): <a href="http://tinyletter.com/data-is-plural/archive" class="uri">http://tinyletter.com/data-is-plural/archive</a>, his <a href="https://docs.google.com/spreadsheets/d/1wZhPLMCHKJvwOkP4juclhjFgqIY8fQFMemwKL2c64vk/edit#gid=0">giant spreadsheet</a></li>
<li><a href="https://delicious.com/arnicas/datasets">My delicious links to datasets</a></li>
<li><a href="http://data.worldbank.org/">World Bank Data</a></li>
<li>Sets collected by Curran Kelleher: <a href="https://github.com/curran/data" class="uri">https://github.com/curran/data</a></li>
<li>A big list of CSV datasets: <a href="https://vincentarelbundock.github.io/Rdatasets/datasets.html" class="uri">https://vincentarelbundock.github.io/Rdatasets/datasets.html</a></li>
</ul>
<h3 id="quantified-self">Quantified Self</h3>
<p>Use yourself as data! Learn about yourself! Fitbit's, sleep trackers, self-logging...Amazon shopping logs, email data, Facebook friends, etc!</p>
<ul>
<li>A long list of data sources, tools, etc. on <a href="https://en.wikipedia.org/wiki/Quantified_Self">Wikipedia</a></li>
<li>Nicolas Felton's Annual Reports: started analogue, then developed an IPhone app (<a href="http://feltron.com/apps.html" class="uri">http://feltron.com/apps.html</a>) and got digital with Processing: e.g., <a href="http://feltron.com/far14.html" class="uri">http://feltron.com/far14.html</a></li>
<li>Flowing Data links on "self-surveillance": <a href="http://flowingdata.com/category/self-surveillance/" class="uri">http://flowingdata.com/category/self-surveillance/</a></li>
<li>Dear Data" -- analogue artistic vis by @stefpos and @giogialupi: <a href="http://www.dear-data.com/all" class="uri">http://www.dear-data.com/all</a></li>
</ul>
<p>You can't improve what you don't measure :)</p>
<h2 id="background-d3-books-and-tutorial-materials">Background: D3 Books and Tutorial Materials</h2>
<ul>
<li><strong>Interactive Data Visualization for the Web</strong> ("IDVW"), Scott Murray’s book: <a href="http://alignedleft.com/work/d3-book" class="uri">http://alignedleft.com/work/d3-book</a><br />
Online version: <a href="http://chimera.labs.oreilly.com/books/1230000000345" class="uri">http://chimera.labs.oreilly.com/books/1230000000345</a>. <a href="https://github.com/alignedleft/d3-book">Code samples here</a>. <em>This is the book I'll assign most intro D3 readings from.</em></li>
<li><strong>D3 Tips and Tricks</strong> book by Malcolm MacLean, and <a href="http://www.d3noob.org/" class="uri">http://www.d3noob.org/</a></li>
<li><strong>D3.js in Action</strong> ("D3IA"), by Elijah Meeks. If you want ebook, order via Manning: <a href="http://www.manning.com/" class="uri">http://www.manning.com/</a>. This is a more advanced book than Scott's, and covers many D3 layouts we won't get to in class. Recommended for going further.</li>
<li><strong>Developing a D3 Edge</strong> by By Chris Viau, Andrew Thornton, Ger Hobbelt, and Roland Dunn: <a href="http://bleedingedgepress.com/our-books/developing-a-d3-js-edge/" class="uri">http://bleedingedgepress.com/our-books/developing-a-d3-js-edge/</a> (intermediate (i.e., more advanced than the ones above; covers good coding patterns too.)</li>
<li>Tutorials by <strong>Mike Bostock</strong>, primary author of D3: <a href="https://github.com/mbostock/d3/wiki/Tutorials" class="uri">https://github.com/mbostock/d3/wiki/Tutorials</a> (and some others listed).</li>
<li><strong>Learn JS Data</strong> from Bocoup.com: <a href="http://learnjsdata.com/index.html" class="uri">http://learnjsdata.com/index.html</a></li>
<li><strong>Blocksplorer</strong>: search for code examples in D3 blocks! <a href="http://bl.ocksplorer.org/" class="uri">http://bl.ocksplorer.org/</a></li>
<li>Great overall tips: <a href="https://northlandia.wordpress.com/2014/10/23/ten-best-practices-for-coding-with-d3/" class="uri">https://northlandia.wordpress.com/2014/10/23/ten-best-practices-for-coding-with-d3/</a></li>
<li><strong>D3 examples of Chart Types</strong>: <a href="http://christopheviau.com/d3list/gallery.html" class="uri">http://christopheviau.com/d3list/gallery.html</a></li>
<li><strong>D3 Newbie FAQ</strong>: I am working on this, and will be editing it as we encounter new ones :). <a href="https://github.com/arnicas/d3-faq" class="uri">https://github.com/arnicas/d3-faq</a></li>
<li>Videos on D3:
<ul>
<li>Knight Center D3 Course video playlists: I'll recommend some of Scott Murray's videos as backup or weekend viewing. (They don't seem to be well-indexed on YouTube, but start <a href="https://www.youtube.com/user/KnightCenterMOOC/playlists">here</a>. The code examples are <a href="https://github.com/alignedleft/data-vis-d3">here</a>.</li>
<li>These intro videos seem good too: <a href="https://www.youtube.com/user/d3Vienno/videos" class="uri">https://www.youtube.com/user/d3Vienno/videos</a></li>
</ul></li>
</ul>
<h2 id="js-refreshers">JS Refreshers</h2>
<ul>
<li>These books on HTML/CSS and JS/JQuery are good: <a href="http://www.amazon.com/Web-Design-HTML-JavaScript-jQuery/dp/1118907442/ref=sr_1_1?ie=UTF8&qid=1440438330&sr=8-1&keywords=jon+duckett" class="uri">http://www.amazon.com/Web-Design-HTML-JavaScript-jQuery/dp/1118907442/ref=sr_1_1?ie=UTF8&qid=1440438330&sr=8-1&keywords=jon+duckett</a></li>
<li>A short recap: <a href="http://learnxinyminutes.com/docs/javascript/" class="uri">http://learnxinyminutes.com/docs/javascript/</a></li>
<li>A super simple intro with gif demos is JS For Cats: <a href="http://jsforcats.com/" class="uri">http://jsforcats.com/</a></li>
<li>Useful for your code style: <strong><a href="https://github.com/airbnb/javascript/tree/master/es5">Airbnb JS Style Guide</a></strong></li>
<li>More online courses: <a href="https://www.javascript.com/resources" class="uri">https://www.javascript.com/resources</a>.</li>
</ul>
<h2 id="debugging-help">Debugging Help</h2>
<ul>
<li>Debugging with Dev Tools and D3: <a href="https://egghead.io/lessons/debugging-with-dev-tools" class="uri">https://egghead.io/lessons/debugging-with-dev-tools</a></li>
</ul>
<h2 id="resources-for-vis-examples">Resources for Vis Examples</h2>
<ul>
<li>Pinterest: some boards to poke at - crawl out for more, including newspapers:
<ul>
<li>Mine/arnicas: the dumping ground:<br />
<a href="https://www.pinterest.com/arnicas/graphs-and-diagrams/" class="uri">https://www.pinterest.com/arnicas/graphs-and-diagrams/</a></li>
<li>Mine/arnicas: Some interactives pulled out more recently: <a href="https://www.pinterest.com/arnicas/interactive-datavis/" class="uri">https://www.pinterest.com/arnicas/interactive-datavis/</a></li>
<li>JanWillem Tulp: <a href="https://www.pinterest.com/janwillemtulp/" class="uri">https://www.pinterest.com/janwillemtulp/</a></li>
<li>Tiffany Farrant-Gonzalez: <a href="https://www.pinterest.com/tiffanyfarrant/" class="uri">https://www.pinterest.com/tiffanyfarrant/</a></li>
<li>Benjamin Wiederkehr: <a href="https://www.pinterest.com/wiederkehr/" class="uri">https://www.pinterest.com/wiederkehr/</a></li>
<li>Studio TERP Inforgraphics: <a href="https://www.pinterest.com/studioterp/" class="uri">https://www.pinterest.com/studioterp/</a></li>
<li>Scientific American: <a href="https://www.pinterest.com/sciam/" class="uri">https://www.pinterest.com/sciam/</a></li>
<li><p>WSJ Graphics: <a href="https://www.pinterest.com/wiederkehr/" class="uri">https://www.pinterest.com/wiederkehr/</a></p></li>
<li><p><em>Using pinterest from Chrome: Grab the plugins.</em></p></li>
</ul></li>
<li>My delicious bookmarks - massive, sometimes useful, but noisy.
<ul>
<li><a href="https://delicious.com/arnicas/d3" class="uri">https://delicious.com/arnicas/d3</a></li>
<li><a href="https://delicious.com/arnicas/infovis" class="uri">https://delicious.com/arnicas/infovis</a></li>
<li><a href="https://delicious.com/arnicas/javascript" class="uri">https://delicious.com/arnicas/javascript</a></li>
</ul></li>
<li>News graphics:
<ul>
<li>A spreadsheet: <a href="https://docs.google.com/spreadsheets/d/1sSWytfD1N1nuXkry7IZyscahj9M8lX04XJWeqrdgDZk/pubhtml" class="uri">https://docs.google.com/spreadsheets/d/1sSWytfD1N1nuXkry7IZyscahj9M8lX04XJWeqrdgDZk/pubhtml</a></li>
<li><a href="http://newsvis.org/" class="uri">http://newsvis.org/</a></li>
<li>Financial Times's use of D3 (examples): <a href="http://johnburnmurdoch.github.io/d3-london/" class="uri">http://johnburnmurdoch.github.io/d3-london/</a></li>
<li>Guardian and NYT graphics site: <a href="http://collection.marijerooze.nl/" class="uri">http://collection.marijerooze.nl/</a></li>
</ul></li>
<li>Visualoop: <a href="http://visualoop.com/" class="uri">http://visualoop.com/</a>
<ul>
<li>Article with pointers from Visualoop: <a href="http://visualoop.com/blog/11044/30-amazing-data-viz-galleries-everyone-should-follow" class="uri">http://visualoop.com/blog/11044/30-amazing-data-viz-galleries-everyone-should-follow</a></li>
</ul></li>
<li>Sign up for the DashingD3 newsletter: Sign up for the DashingD3 newsletter if you haven't: <a href="https://www.dashingd3js.com/" class="uri">https://www.dashingd3js.com/</a></li>
</ul>
</body>
</html>