The days ahead (and behind)

Week 4


  • Right Twice a Day
    • Polish and incorporate feedback on your three code-based time visualizations
    • Convert your paper sketches into code for your three date visualizations. As before, duplicate the project folder three times and name them date-1, date-2, and date-3. Once the sketch is complete, rename each folder with a meaningful and descriptive suffix such as date-3-season-colors
  • Poor Form
    • Read Kierann Healy’s chapter on ‘badness’ in information graphics. For every reading assignment, you will be expected to post a short (250–500 word) write-up summarizing what you took to be the ‘message’ of the piece, what you agreed or disagreed with, and what you’d be curious to hear your peers’ opinions about. Be sure to add the tag "R1" to your post by clicking on the gear icon at the top of the screen and don’t forget to Publish your draft.

Week 3

  • Presentations
    • Lulu on the Washington Post & Saloni on Tufte’s Envisioning Information
    • Antoine on Mike Bostock & Shea on Muriel Cooper
  • Workshop: A Whirlwind Introduction to Javascript and P5 (take 2)
    • cd into your repository and type make update to pull down the most recent changes to the introductory materials
    • Type make server and follow along as we work through the contents of the 1.mapping-time/basics folder


  • Catalog & Classify: we will hear from everyone who didn’t get a chance to present last time
  • Exercise #1: Right Twice a Day
    • Complete at least three representations of the current wall-clock time (ignore days, weeks, moons, etc. for now) that develop on your sketches from last week.
      • Make sure each approach addresses hours, minutes, and seconds in such a way that the representation looks different over the course of a day, hour, and minute.
      • This time everything must be done in code. Start by duplicating your project folder three times and naming them clock-1, clock-2, and clock-3. Once you've completed each sketch, rename the folder with a more descriptive suffix (e.g., clock-1-radial-seconds)
    • Add 3 new sketches to your process folder that this time focus on representing at least two of the longer-term calendar variables (and for these you don't need to worry about incorporating the wall-clock time)
      • Each sketch should choose two different calendar values to represent (e.g., day-of-week, day-of-month, month, moon, season, or year) and you should use a different retinal variable for each value (i.e., 6 different retinal variables across the 3 sketches)
      • Since calendar units use much more irregular values than clocks do, pay extra attention to the progress attributes provided by the clock() function and figure out how to map their 0–1 values into an appropriate range to use for drawing

Week 2

  • Pick research topics & dates
  • Catalog & Classify discussion
  • Workshop: Creating a fork of the course repository and committing changes
    • Make sure you've got the following installed/set-up:
      1. a text editor (consider SublimeText, VS Code, or Atom)
      2. a working Node.js installation on your laptop
      3. an account at GitHub and a copy of the GitHub Desktop client
    • Create a fork of the course repository on GitHub then clone your fork (not the original repo) to your local machine using the GitHub Desktop app
    • Open a terminal window and cd into the folder of the repository you just created. Type the command make config to link your local copy to the original. In the future you can type make update to merge upstream changes (e.g., new assignments) into your local version.
    • Type make server to start a local webserver and navigate in the browser to the 1.mapping-time folder. Note that the terminal window where you typed this will start logging the pages you load. When you’re done working, type Control-C in the terminal window to shut down the server.


  • Read the P5.js introductory materials: Getting Started, the Overview, and Color (and take a peek at the Examples section while you're at it).
  • Begin Exercise #1: Right Twice a Day
    • Complete at least three representations of the current wall-clock time (ignore days, weeks, moons, etc. for now) and document your ideas with text and sketches in the process folder

Week 1

  • Assessment of student skills, levels, and interests
    • What do you want to learn in this class?
    • What sorts of data/information graphics work have you done previously?
    • Any coding or stats experience?
  • Introduction to course goals and expectations
  • Intro talk
  • Warm-up Assignment: Catalog & Classify
    • Create and publish a new post with your visualization type as its title. Assign it the tag “Catalog & Classify” in the gear menu.
    • Describe your chosen visualization type in terms of the kinds of values it represents (e.g., fractions, integers, percentages, etc.) and the sorts of comparisons it enables or discourages.
    • Explain what forms of ‘pre-processing’ need to occur between the raw data and the ink/pixels in the resultant chart.
    • Explain the ‘mapping’ by which numerical/categorical/etc values are converted into positions, sizes, colors, textures, etc.
    • Include 3 images apiece to demonstrate ‘good’ and ‘bad’ uses of this visualization type.
    • Consult the Ghost Editor Overview to help you format your text & images.
  • Exercise: Jacques Bertin and the Seven Retinal Variables
    • Download a copy of this worksheet (it’s an Illustrator-friendly PDF)
    • Using the vector drawing software of your choice, fill in all the cells of the empty grid you see sprawling before you. Each cell should represent the numerical value denoted by the column using the retinal variable corresponding to its row.
    • Note that each retinal variable has two rows devoted to it: construct a distinct ‘rule’ for how to encode the values for each and try to make them as different from one another as possible
    • Off to the side draw a key or legend that would allow a viewer to ‘decode’ the original number based on its visual representation


  • Catalog & Classify
    • Complete your post about your chosen visualization type and be prepared to talk about it next time
  • Finish your 7×2 Retinal Variable variations