- Presentations: Robin on Jacques Bertin & Zhibang on Tufte’s The Visual Display of Quantitative Information
- Final check-in on Stones Unturned
Assignment
- Stones Unturned
- Finish design/development & come to class ready to present your work and describe your process
- Everything else
- Any updates to earlier projects must be checked-in and pushed to your github accounts by the 18th
- Mapping tutorials
- Stones Unturned
Assignment
- Stones Unturned
- Continue developing your prototype and have a rough draft of your finished project ready next week.
- Presentations
- Xingwei on Georgia Lupi
- Xingyang on Forensic Architecture & Michael on William Playfair
- Tutorial
- Stones Unturned
Assignment
- Stones Unturned
- Integrate your diagram and map into a single, cohesive view on one web page.
- If your diagram sits alongside the map, figure out the overall page layout that makes their relation to one another obvious and harmonious
- If the diagram only appears when you interact with the map (e.g., via a tooltip), be sure to implement this
- In all cases we should now only be looking at actual data, not mockups, from now on
- Presentation: John on Otto Neurath
- Tutorials (refer to the examples directory for details)
- Using
map() and lodash to create scatterplots
- Converting timestamps to objects and using moment.js to deal with calendar math.
- Meet in small groups to look over your sketches for Exercise 3
Assignment
- Stones Unturned
- Explore the direction selected in class and prototype the different component views that will make up your final visualization:
- Your spatial visualization should now be implemented using leaflet to present markers and popups in the style of your choosing (though the contents of the popups can be placeholder for now if they depend on your diagrammatic design)
- Your diagrammatic design should be implemented using p5 and display somewhere on the same page as your map.
- The diagram and map don’t need to be fully integrated yet but come to class with a clear idea of how they will interact with one another and take some first code-based steps in that direction
- Read up on the various ways to add interactivity to your p5 sketch in the Beyond the Canvas tutorial and the
create* functions (for sliders, buttons, etc.) listed in the DOM section of the reference and begin experimenting with them
- Presentations:
- Yujun on Catalogtree & Yiran on Hans Rosling
- Inhye on Ben Fry
- A Thousand Suns: final crit
Assignment
- Stones Unturned
- Open a terminal window in the
dvia-2019 folder and type make update to pull the new assignment down from github.
- Start off by making pencil sketches for your non-spatial ‘diagrammatic’ representation of the data in the feeds. As always, bring in at least three different approaches that vary in terms of the information being depicted and the data → retinal variable mapping. The point of these sketches is not to accurately represent the data as it exists but to illustrate your strategy for mapping the quantities, times, text strings, etc. to formal elements. These three sketches should be conceptually different from one another; not just stylistic tweaks of the same idea.
- Place your sketches in the
process folder.
- Describe in the
README.md file both the logic of your diagram designs and how they'll relate to the map representation on screen (i.e., is one a sidebar or inset to the other, are the graphics summarizing all earthquakes or do they detail specific ones selected from the map, etc.).
- On the mapping side of things, figure out what your approach will be in terms of the tile set for the basemap, what kinds of markers you’ll be adding, what additional areas (in the form of lines or filled polygons) you’ll be calling attention to, and which attributes from the USGS data you’ll be using directly. Implement these decisions in the
project folder (or copies of it if you explore multiple directions).
- Presentations: Yujun & Soonk on Catalogtree
- Exercise 3
- Small group meetings and in-class work session
Assignment
- A Thousand Suns
- Choose one of your three directions to develop and create a completed version of it.
- Using either the external data source you collected or a dataset collected by one of your classmates incorporate at least one additional variable into your representation beyond the original set of CSVs in the repository.
- As always, feel free to bring in multiple variants if different options for how to solve a design problem/represent the data occur to you.
- Presentation: Amanda on Tahir Hemphill
- P5 Mini-tutorials:
- Open a new Terminal in the
dvia-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.
- Brewer palettes: 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.
- 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
- 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.
- If you end up modifying an SVG generated by your p5 code, 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.
- Presentations
- Neil on Lev Manovich & Qinglu on Nicholas Felton
- 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
Assignment
- 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
- Marisa on W.E.B Du Bois & Nour on Mike Bostock
- Lee on Tufte’s Envisioning Information
- Right Twice a Day: final crit
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 screenshots or PDF exports of these charts 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.
- Reading #2: The Subtleties of Color
- Post your response with the tag ‘R2’ before the start of class
- Kieran Healy chapter: discussion
- 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.
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
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
- 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.
- 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
Assignment
- 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
- 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:
- a text editor (consider SublimeText, VS Code, or Atom)
- a working Node.js installation on your laptop
- 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.
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 #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
- 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
Assignment
- 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