interactive-vis-course

by arnicas

Repo for U of Miami course on interactive vis.

196 Stars 39 Forks Last release: Not found 230 Commits 0 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

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=sr11?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/

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.