Interactive Data Vis Course Repo

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: http://arnicas.github.io/interactive-vis-course/. Lynn is @arnicas on twitter.

Office Hours: Wolfson 1020A, M & Th 1-3 or by appt.
Emails for homework: arnicas@gmail.com

What the Course Covers

1. Interactive Data Vis: Design Principles, Techniques, Best-Practices...

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.)

Week1: Intro to Tools and the Course, Setup, CSVs
Week2: Loading CSV Data, Highcharts
Week3: Data Loading, Tables in D3
Week4: More tables, Scales, SVG
Week5: Bar Charts, Axes, Text Labels, Scatterplots
Week6: Linecharts, Events, Simple Tooltips
Week7: Improved Line Charts, Transitions
Week8: Updates to Data, More Transitions
Week9: Stacking Chart Types, Intro to Small Multiples
Week10: Small Multiples, Intro to Maps
Week11: Maps: D3, Leaflet, CartoDB...
Week12: Storytelling Techniques: Scrollytelling, Steppers
Week13: Animation: Lines, Play/Pause...
Week14: Reusable charts, Other Layouts, Project Tips/Grading
Week15: Helpful Tips: How to File a Bug Report, Debugging

All the made-for-class example files are here. Many other examples are linked in each week's folder.

2. Programming Techniques and Tools We'll Cover

Good practices with D3.js for data vis
Javascript and useful libraries like jQuery, lodash
Web Charting libs like Highcharts, D3, libs on top of D3 like Dimple.js
GitHub use
Debugging how-to's

3. Evaluation

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.

Primary emphasis is on end user experience and data honesty; secondary consideration will be good coding practices.

Homework Due Dates: Due by 5pm on Monday before class day, unless I decide otherwise... You will be submitting links by email ().

Data Sources To Use

UNICEF & Child Mortality (Fall Semester Client, optional for Spring)

The client brief
The 2014 Key Findings Report on http://www.apromiserenewed.org/: pdf (plus other publications that may be useful!)
Their data sites: http://data.unicef.org/index.php, http://mics.unicef.org
World Health Org (WHO): http://www.who.int/research/en/
http://childmortality.org/ - UN Inter-agency Group for Child Mortality Estimation (IGME), of which UNICEF is a member (new data coming in September)

Links to Datasets

Jeremy Singer-Vine's excellent tinyletter archives for Data Is Plural (and maybe get on the list!): http://tinyletter.com/data-is-plural/archive, his giant spreadsheet
My delicious links to datasets
World Bank Data
Sets collected by Curran Kelleher: https://github.com/curran/data
A big list of CSV datasets: https://vincentarelbundock.github.io/Rdatasets/datasets.html

Quantified Self

Use yourself as data! Learn about yourself! Fitbit's, sleep trackers, self-logging...Amazon shopping logs, email data, Facebook friends, etc!

A long list of data sources, tools, etc. on Wikipedia
Nicolas Felton's Annual Reports: started analogue, then developed an IPhone app (http://feltron.com/apps.html) and got digital with Processing: e.g., http://feltron.com/far14.html
Flowing Data links on "self-surveillance": http://flowingdata.com/category/self-surveillance/
Dear Data" -- analogue artistic vis by @stefpos and @giogialupi: http://www.dear-data.com/all

You can't improve what you don't measure :)

Background: D3 Books and Tutorial Materials

Interactive Data Visualization for the Web ("IDVW"), Scott Murray’s book: http://alignedleft.com/work/d3-book
Online version: http://chimera.labs.oreilly.com/books/1230000000345. Code samples here. This is the book I'll assign most intro D3 readings from.
D3 Tips and Tricks book by Malcolm MacLean, and http://www.d3noob.org/
D3.js in Action ("D3IA"), by Elijah Meeks. If you want ebook, order via Manning: http://www.manning.com/. 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.
Developing a D3 Edge by By Chris Viau, Andrew Thornton, Ger Hobbelt, and Roland Dunn: http://bleedingedgepress.com/our-books/developing-a-d3-js-edge/ (intermediate (i.e., more advanced than the ones above; covers good coding patterns too.)
Tutorials by Mike Bostock, primary author of D3: https://github.com/mbostock/d3/wiki/Tutorials (and some others listed).
Learn JS Data from Bocoup.com: http://learnjsdata.com/index.html
Blocksplorer: search for code examples in D3 blocks! http://bl.ocksplorer.org/
Great overall tips: https://northlandia.wordpress.com/2014/10/23/ten-best-practices-for-coding-with-d3/
D3 examples of Chart Types: http://christopheviau.com/d3list/gallery.html
D3 Newbie FAQ: I am working on this, and will be editing it as we encounter new ones :). https://github.com/arnicas/d3-faq
Videos on D3:
- 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 here. The code examples are here.
- These intro videos seem good too: https://www.youtube.com/user/d3Vienno/videos

JS Refreshers

These books on HTML/CSS and JS/JQuery are good: 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 short recap: http://learnxinyminutes.com/docs/javascript/
A super simple intro with gif demos is JS For Cats: http://jsforcats.com/
Useful for your code style: Airbnb JS Style Guide
More online courses: https://www.javascript.com/resources.

Debugging Help

Debugging with Dev Tools and D3: https://egghead.io/lessons/debugging-with-dev-tools

Resources for Vis Examples

Pinterest: some boards to poke at - crawl out for more, including newspapers:
- Mine/arnicas: the dumping ground:
  https://www.pinterest.com/arnicas/graphs-and-diagrams/
- Mine/arnicas: Some interactives pulled out more recently: https://www.pinterest.com/arnicas/interactive-datavis/
- JanWillem Tulp: https://www.pinterest.com/janwillemtulp/
- Tiffany Farrant-Gonzalez: https://www.pinterest.com/tiffanyfarrant/
- Benjamin Wiederkehr: https://www.pinterest.com/wiederkehr/
- Studio TERP Inforgraphics: https://www.pinterest.com/studioterp/
- Scientific American: https://www.pinterest.com/sciam/
- WSJ Graphics: https://www.pinterest.com/wiederkehr/
- Using pinterest from Chrome: Grab the plugins.
My delicious bookmarks - massive, sometimes useful, but noisy.
News graphics:
- A spreadsheet: https://docs.google.com/spreadsheets/d/1sSWytfD1N1nuXkry7IZyscahj9M8lX04XJWeqrdgDZk/pubhtml
- http://newsvis.org/
- Financial Times's use of D3 (examples): http://johnburnmurdoch.github.io/d3-london/
- Guardian and NYT graphics site: http://collection.marijerooze.nl/
Visualoop: http://visualoop.com/
- Article with pointers from Visualoop: http://visualoop.com/blog/11044/30-amazing-data-viz-galleries-everyone-should-follow
Sign up for the DashingD3 newsletter: Sign up for the DashingD3 newsletter if you haven't: https://www.dashingd3js.com/