- Free Form
- Brief presentations of prototypes
- Individual meetings & small-group work
Assignment
- Free Form
- Complete your visualization and prepare to present it at our final class meeting in two weeks.
- Everything else
- Make sure any changes you’ve made to your earlier projects have been committed and pushed to github. If there are multiple project folders for a given assignment and it's unclear which is the ‘real’ final copy, please rename its folder to start with
final.
- Add photos of all your non-digital sketches and mock-ups to the
process folder for each assignment and update the README.md file in the directory to link to/describe them.
- If you haven't committed a copy of your research presentation to the
0.research folder in the repository, please do so.
- I’ll be assigning grades based on the contents of the work directory on the server (which updates itself from your repositories every 15 minutes). Check that the copy of your folder that’s mirrored there is up-to-date by the final class meeting.
- Free Form:
- Review proposals as a class
- Meet individually to look over progress
Assignment
- Free Form
- Develop an initial prototype of your visualization
- If your prototype is static, commit your mock-ups as a (potentially multipage) PDF called
process/prototype.pdf
- Whether you're building something screen based or simply using p5.svg to generate your visuals, place your most up-to-date data files in
project/data and name your primary script project/sketch.js
- Whatever form your project takes, the prototype must use real data; this is a first draft, not a pencil sketch! If your dataset is too large to visualize fully in one week, pull out a handful of representative cases and visualize those to show the range of outcomes.
- A Thousand Suns: final crit
- Free Form
- Lightning round: report on topics & data sources
- Individual meetings & work in small groups
Assignment
- Free Form
- Select one idea to develop further for your final project and create:
- a one-page proposal,
- three concepts with two sketches apiece,
- a p5 script that loads in your collected data as either a JSON file or CSV table.
- See the “Sketches and Data” section of the assignment for details…
- Presentation: Anna on Forensic Architecture
- Book Club: Branden & Sejin on Tufte’s Beautiful Evidence
Assignment
- A Thousand Suns
- Complete your final version and commit your code and documentation in a folder called
3.mapping-quantities/final. If you have designed a static visualization, print it out at the proper scale and trim it to be full-bleed. If your project is screen-based make sure it runs correctly from the course website’s work directory.
- Fine tune the text and typography surrounding your diagram in order two provide ‘three reads’ in terms of information from headline to body text to legends & labels (similar to the three visual reads we explored in the first assignment).
- Include a brief (just a few sentences) explanation of your project’s data and how it is presented in
3.mapping-quantities/final/README.md
- Free Form
- Spend an hour brainstorming ten ideas for your final project. Focus on data that seems interesting to you for reasons you might not be able to articulate, then start posing questions that you could potentially answer with that data (either alone or in combination with other information).
- Describe each idea in a sentence or three (ideally ending with a concrete, testable question) in
4.final-project/process/ideas.md
- From your ten ideas, find five data sources on the web and document them in the file
4.final-project/process/datasources.md using the format demonstrated with the USGS example at the top of the file (and be sure to delete this once you've completed your list).
- Presentations
- Reading #2: Subtleties of Color
- To actually use your newfound understanding of color, start looking into using chroma.js in your sketches
- Note the use of the
.hex() method to convert from chroma’s color representation to p5’s on line 23 of this example
- If the chroma.js library is too heavyweight for your needs, take a look at my brewer palette generator and see if you find it easier to use. Consult this catalog to find the name of the palette you want.
Assignment
- A Thousand Suns
- Create three code-based sketches exploring your chosen design direction for depicting the testing data and your candidate representations of the external data you’ve collected.
- Focus your coding efforts on presenting the testing data. As it takes shape, refine the pencil sketches that deal with integrating your external data source. Continue cleaning and formatting that data so it presents values in precisely the form you need from a drawing standpoint. Take some first steps toward drawing your external data with code as well.
- If you end up modifying an SVG generated by your p5 code (or exported from Google Sheets), place a PDF of your modified version in the
process folder and update the process/README.md file with a description of what it depicts. Make sure you choose a filename for the PDF that makes it clear which .js file it was derived from.
- Presentation: Avishi on Amanda Cox
- Book Club: Yeojin and Anna on Tufte’s Visual Explanations
- P5 Mini-tutorials:
- Open a new Terminal in the
di-2019 folder and type make update to get the newest files
- SVG Export: You can save your p5 sketches to SVG files that can then be opened and tweaked in Illustrator. Look in the
svg-export folder for an example of what you need to add to your code to make it work.
- Table objects: See the
table-from-cvs example and follow its nested for-loop structure to step through each row and column in turn. Also look at the sequential-palette sketch to see how to calculate value ranges and map them to color ranges.
- Small group meetings and in-class work session
Assignment
- Reading #2: The Subtleties of Color
- Post your response with the tag ‘R2’ before the start of class
- A Thousand Suns
- Clean up whatever spreadsheet manipulation you did to the testing data via pivot tables and the like into a csv-friendly format that has a single header row, 1 set of data per row, and is purely rectangular (i.e., no skipped lines or multi-row/column regions). Save this to a csv in your
project/data folder where your p5 code can access it.
- Find the external data source you’ll be using for your ‘so what’ and ‘compared to what’ variables and convert it to spreadsheet form. This should probably live on Google Sheets but you should also download a csv to
project/data.
- Start a code-based sketch that minimally does the following:
- loads the testing data you’ll be using via the
preload() and loadTable() functions
- loads the external ‘context’ data you’ve collected and added to the
data folder
- graphically renders the testing data in accordance with one of your pencil sketches
- Bring in three additional pencil sketches that show different options for merging the testing data with your external data source. As before, save these images to the
process directory and explain their logic within the README.md file.
- Presentations
- Daniel on Jacques Bertin & Yeojin on Lev Manovich
- Right Twice a Day: final crit
- Exercise 3: A Thousand Suns
- Workshop: a crash course in spreadsheets
Assignment
- A Thousand Suns:
- Run
make update in your repository folder to fetch the new assignment
- Generate three exploratory visualizations based on the spreadsheet data using either Google Sheets itself or other off-the-shelf tools. Place SVG or PDF exports of these charts (after editing them in Illustrator or Sketch) in the
process folder and sum up the ‘take home message’ of each in a single sentence in the process/README.md file.
- In addition, add three pencil sketches to the process folder exploring ways in which you could represent the nuclear testing data without using a map. Focus on what aspects of the data you plan to present, which you will omit, and what needs to be summed, grouped, or averaged in order be most comprehensible.
- Pick an additional data set that you think would make for an interesting counterpoint to the nuclear testing data. Think in particular about addressing the ‘compared to what’ and ‘so what’ sides of the question in a way that either lets us understand the scale of the main data set, or gives us a deeper understanding of the political regimes, technology, culture, social developments, etc. that were going on during the relevant time periods.
- Locate a source on the web for this contextual data set and bring it to class
- Read up on using the
preload() and loadTable() commands in the p5 reference; in combination they will allow you to fetch a CSV file and load it into an object called a Table.
- Try adding some
print() statements to the starter code in the project folder to get a sense of how you can pull values out of the table by row/column coordinates, using the names in the header row, etc.
- Presentation: Lila on Giorgia Lupi
- Book Club: Jeahun, Rebecca, and Elena on Tufte’s Envisioning Information
- Right Twice a Day: in-class work
- By the end of class have three concepts (including pencil sketches) for a time visualization that includes the hours/minutes/seconds values from your ‘clock’ explorations and at least three ‘calendar’ variables of your own choosing (day of week, month, season, etc.)
- Commit your sketches to the
process folder in a file called hybrid-sketches.pdf by the end of class and detail their logic in the README.md file in that directory.
- Remember to both commit your changes locally and then push them up to github. Make sure that all your work so far is visible when you browse through the files on your github pages in the browser.
Assignment
- Right Twice a Day
- Incorporate feedback and finalize your three code-based date visualizations
- Develop one of your three ‘hybrid’ calendar + clock concepts in code for your final visualization. As before, duplicate the
project folder and title it final. Once you’ve settled on an idea, rename the folder to something with a descriptive suffix (e.g., final-radial-weekdays).
- Create a
README.md file within that final folder that gives your visualization a proper title and include a brief explanataion of how the 3 clock variables and additional date variables have been encoded into retinal variables for the final visualization. In other words, describe it well enough for someone to make sense of your visualization if you weren’t there to explain it to them
- Note that by next class you should have 7 folders total containing your visualizations from the past several weeks. Make sure the folder names all start with either
clock-#, date-#, or final. For instance:
clock-1-short-titleclock-2-another-short-titleclock-3-yet-another-titledate-1-yadda-yaddadate-2-foo-bar-bazdate-3-etc-etc-and-so-forthfinal-something-something
Presentation: Daniel on Jacques Bertin- P5 Tutorial: Normalization and ‘mapping’
- Exercise #2: in-class work & individual meetings
Assignment
- 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
- Presentation: Rebecca on Mark Lombardi
- Book Club: Daniel, Lila, and Avishi on Tufte’s Visual Display of Quantitative Information
- Tutorial & Workshop: Javascript & P5.js basics
Assignment
- Right Twice a Day
- Complete at least three representations of the current time (ignore days, weeks, moons, etc. for now) that develop on your sketches from last week.
- This time everything must be done in code. Use the
clock() function to access different attributes of the current time (a listing of its property names is included in the assignment).
- 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.
- 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 three 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 or more 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
- Presentation: Branden on Otto Neurath
- Nothing but a Number: Final crit
- Workshop: Git, the course repository, and committing changes
- Create a ‘fork’ of the course repository on GitHub: click on the Fork icon in the upper right to create a personal ‘working copy’ that you can edit
- This will take you to a page whose URL is
https://github.com/YOURNAME/di-2019; this is the copy you’ll want to work on throughout the semester
- Click the green button that reads ‘clone or download’ and choose the ‘open in desktop’ option; this will open the Github Desktop app and let you choose a location on your laptop for the files
- The Repository menu in the Github Desktop app lets you open the folder in the Finder or in Terminal—do the latter and you should be able to see the top-level contents by typing
ls and see where it lives on your hard drive by typing pwd
- Type
make config into the terminal window; you’ll only have to do this this one time, but it sets up your local copy’s connection to my master copy
- In the future I’ll ask you to type
make update to pull down changes I’ve uploaded. Try this now and hopefully you’ll see a message saying you're up-to-date
- Type
make server to start a local webserver and navigate in the browser to the 2.mapping-time folder. Try poking around in the basics and examples folders and make sure they run correctly. 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.
- Copy your work from the first project (ideally as PDFs) into the proper subdirectories of the
1.single-numbers folder then switch to the Github Desktop app and notice that it’s now listing everything you just copied as 'changed files'
- Type a message into the field in the bottom left corner that says ‘Summary (required)’ then click the blue Commit button
- Edit the
README.md files in each folder itemize the subject(s) and retinal variables you used in the various posters
- Once you’re done editing, go back to the Github Desktop app and commit those changes too
Assignment
- 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 #2: 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
- Each of these should consist of a pencil sketch or vector drawing and an explanation of how each value is being transformed into a particular retinal variable (or a combination of them)
- Explain the logic of each of the sketches in the
process/README.md file
- Take an initial swing at implementing at least one of your sketches using P5. Duplicate the template
project folder and give it a working title. Then start messing around with its sketch.js file, incorporating what you’ve learned from the tutorials and the demos in the 2.mapping-time/examples folder from the repo.
Assignment
- Nothing but a Number: Final Posters
- Pick one of your directions from this week’s sketches and develop three different posters, expanding on the information graphic at its core, the typographic treatment of its textual content, and a visual hierarchy that allows for ‘three reads’ based on distance/attention.
- Be sure to include your ‘primary’ piece of data—the original number you selected—and any (or all) of the supplemental numbers you came across in last week’s iteration (i.e., the ‘compared to what’ portion of the argument)
- Choose any aspect ratio for each poster, but limit the largest side to 17". Experiment with different sizes on the different posters and consider how your use of composition interacts with those dimensions
- Use a single type family and establish your type hierarchy by varying its size, weight, and/or width
- The textual content should include (at least):
- A short (fewer than a dozen words) title
- A slightly longer (under 3 sentences) ‘lede’ that makes the claim your graphic is there to support
- A short paragraph of ‘discussion’ that explains subtler points being made by your graphic or otherwise provides context for the subject matter you’re engaging with. This is your chance to address the ‘so what’ portion of your argument
- A citation to the source of your data
- The graphic itself should include a legend explaining anything that needs to be established about the meanings of the colors, patterns, sizes, positions, etc. Make sure this is working in harmony with both the graphic and the typographic elements on the page.
- Programming Workshop
- In preparation for next week’s in-class lab, make sure you've got the following installed/set-up:
- a text editor (consider VS Code, SublimeText, or Atom)
- a development environment (on a Mac, install the developer tools by opening the Terminal app and type
xcode-select --install; for Windows I recommend signing up for AWS/Cloud9 then creating a new ‘environment’.
- a working Node.js installation on your laptop (typing
node --version in the terminal should print out a version number, not a ‘command not found’ error)
- an account at GitHub and a copy of the GitHub Desktop client
- Depending on the extent of your prior experience with programming, you may want to take a look at:
Assignment
- Nothing but a Number
- Select one of your posters’ subjects as a starting point, whether you choose to continue using its specific number is up to you (since you may at this point have discovered a different number that holds more potential).
- Create seven new posters (again, one per day) each representing the same number, with the following variations:
- Each poster should use a different retinal variable (position, size, hue, lightness, orientation, texture, shape) to encode the value.
- To the extent it’s possible, try to use the variable quantitatively (as part of a scale) rather than categorically (simply for identification)
- Each poster should select at least one other value to be the ‘basis for comparison’ that either lets us understand the scale of the primary value or offers a surprising contrast to it
- Create a new post to contain your work and start it with a few-sentence-long description of where your number came from and what's significant about it. Each day when you add your next image to the post, label it based on the retinal variable being used, not the day of the week.
- Don’t forget to add the “Nothing but a Number” tag via the Gear menu
- 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.
- 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
- Exercise: 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
Assignment
- Catalog & Classify
- Complete your post about your chosen visualization type and be prepared to talk about it next time
- Nothing but a Number
- Each day, either find a number of interest and add it to your blob post or design a poster for the previous day's number and add it to the post as a png or jpeg
- Come to class in two weeks with pushpins and all seven of your posters printed out and ready to be tacked on the wall
