Instructor: Christian Swinehart (cds2205; office hours by appt.)
IAs: T.B.D.
Class Time: Thurs. 4:10–6:40pm
Room: T.B.D.
Courseworks Page / Readings
This course is a hands-on introduction to design principles, theory, and software techniques for visualizing data. Classes will be a combination of lecture, design studio, and lab. Through readings, design critique, and code assignments, students will learn how visual representations can help in the understanding of complex data, and how to design and evaluate visualizations for the purpose of analysis or communication. Students will develop skills in processing data and building interactive visualizations using D3. Topics include visual perception, exploratory data analysis, task analysis, graphic design, visual hierarchy, narrative, etc.
Students should have experience in JavaScript programming and web development, as well as familiarity with databases and data formats. You should be comfortable picking up new programming tools on your own. Experience with Python or R for data processing is helpful but not required.
In order to be admitted to the course you must first complete a warm-up assignment: visualizing the current time using p5.js.
Start by reading the assignment details below. Once you’ve completed your visualization, submit a link to the URL where it can be viewed using this application form. The deadline for submissions is Sunday, Jan. 4th (by 11:59pm ET).
If you miss the deadline your application will still be considered, but only after all the on-time submissions have been evaluated. Note that there are usually a number of spaces that open up in the early days of the semester. So even if you’re still on the waitlist as of the first day of class, consider attending lecture anyway—there may ultimately be a space for you.
Good luck (and I’m looking forward to seeing how creative you can get with your clocks)!
Your goal is to build a creative interpretation of the clock, focused on aesthetics and inventiveness, and make it accessible via a url. For examples, take a look at: bar clock, triangle clock, & circle clock. Your interpretation needs to be legible enough that your reader can visually distinguish which is the hour, the minute, vs. the second; otherwise your reader should be able to guess the time within a quarter-hour of accuracy. When choosing your design, consider the different states of the clock at different moments in time, e.g. when values are near max or min. Every time the minute changes (not more frequently), print the value of minute() to the JavaScript console.
Download the assignment template here. Follow the p5.js Reference pages on hours, minutes, and seconds to get the current time number, then use that number, via a mapping, to rotate, scale, translate, or change color on your elements. Feel free to test out your code in the p5.js web editor, but do not submit an editor URL—you should host your own assignment files.
Host your clock on the internet; since these files are static, a good method is to use Github Pages but you’re welcome to use whatever is easiest for you.
One way to approach this assignment is to think about it as a visualization of a data set with three values:
Consider the current hour, minute, or second as a proportion of those minimum and maximum values rather than a 1- or 2-digit number. Think about the ways you could visually represent half a minute, 12% of an hour, or 3/5 of a day by systematically varying different aspects of shapes, sizes, or colors. Try searching for the terms “visual encoding” and “retinal variables” to get a sense of the ways other people have approached this.
Note that we won’t be using P5.js for any other assignments in this class. Instead, we’ll be using D3, which shares an underlying visualization grammar with many other statistical graphing packages and integrates more easily with webpages (i.e. the DOM.) We’ll learn about all this over the semester, but this assignment gives you a starting intuition about different ways to describe visuals in code.
If you’re unfamiliar with JavaScript, the JS for Python Programmers tutorial is an excellent overview of the types of things you’ll be using later in this class although you won’t need them in this assignment (note: we will not be bundling in this class but you will almost definitely see it in internships and jobs.)
Otherwise this is a good time to familiarize yourself with the JS console in your browser of choice, for example Chrome DevTools.
In addition to providing a link to your clock, please describe a little bit about yourself and why you want to take this class in this application form.