Repo for U of Miami course on interactive vis.
HTML JavaScript CSS Shell
Latest commit 962b1a7 Apr 19, 2016 @arnicas Example links

README.md

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 (arnicas@gmail.com).

Data Sources To Use

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

Links to Datasets

Quantified Self

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

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

Background: D3 Books and Tutorial Materials

JS Refreshers

Debugging Help

Resources for Vis Examples