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
- Web Charting libs like Highcharts, D3, libs on top of D3 like Dimple.js
- GitHub use
- Debugging how-to's
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
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
- A super simple intro with gif demos is JS For Cats: http://jsforcats.com/
- Useful for your code style: Airbnb JS Style Guide
- 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:
- 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.
- A spreadsheet: https://docs.google.com/spreadsheets/d/1sSWytfD1N1nuXkry7IZyscahj9M8lX04XJWeqrdgDZk/pubhtml
- Financial Times's use of D3 (examples): http://johnburnmurdoch.github.io/d3-london/
- Guardian and NYT graphics site: http://collection.marijerooze.nl/
- 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/