For Fall 2014, David Young (Triplecode) created a cover using data; this is the first cover in the series to include an interactive version as part of the release.
The data represents students that took UCLA Extension courses over the past year (names and any private information have been removed). The design was generated by a program Young wrote in the programming language Processing. Through manipulation of the code, he settled on the final connections between data values and design attributes.
“I wanted to create a cover that expressed the diversity and energy of the students enrolled in UCLA Extension classes” said Young.
“It was intended to be a kind of explosion of optimism because I think that anyone who enrolls in continuing education is doing an incredibly exciting thing. Rather than doing an analytical data visualization, I used the data to control how the design was generated. So, every student is represented by a dot and a line. The horizontal position of each dot is determined by the student’s distance from UCLA. The number of circles and squares that make up each dot is determined by the departments of the courses, the semester they were taken, and if they were in-person or distance learning. Essentially every aspect of the design is controlled by some part of the data.”
On this page, Young has created an interactive version of his cover generator. It allows non-programmers to get a feeling for how changing a few design parameters can make a big difference in the resulting image.
The controls are divided into two categories: Data and Design:
Data Points: Because the full set of data would be too slow to display here, the data set has been reduced to one student per zip code.
Departments: Choose which departments to display.
Semesters: Choose which semester to display.
Color: There are three different color palettes to choose from. ‘Department’ uses a specific color for each department, ‘Distance from UCLA’ sets the color based on how far the student lives from UCLA, and ‘Random’ uses a random color for each object.
Dot Size: This determines the size of each student dot. Use ‘None’ to hide all the dots.
Line Style: Choose from a variety of styles.