arnicas / interactive-vis-course

Repo for U of Miami course on interactive vis.

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: [email protected]

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 ([email protected]).

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.

  • https://delicious.com/arnicas/d3
  • https://delicious.com/arnicas/infovis
  • https://delicious.com/arnicas/javascript

• 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/