For this assignment, it might be helpful to do the reading before the programming, or, at least take a look at some of the visualizations in the reading and in the supplemental materials below.
In this assignment we are going to create visualizations based on data. Take a look at how W. E. B. Du Bois and Edward Tufte use shapes, colors and graphics to tell stories and express themselves.
The first step is to choose the data. This can be personal data, data that we find online, or data from one of the following datasets that we have available on our site:
Feel free to look for other datasets that might be more interesting. Some places to look for data:
Just make sure that the data is either in a JSON or CSV file, and can be easily accessed online or easily downloaded.
If the data can be accessed online, like the datasets on our website, you can use an URL as the parameter for the loadJSON() or loadTable() function.
Otherwise, if the dataset is behind a login/password, or you generated it yourself, you have to download the dataset, place the file next to the sketch.js and index.html files in your folder, and use a relative path ("./filename.json") as the parameter for the loading function.
Start coding by cloning our template into a repo called HW06. The original single-sketch template is fine since there’s only one exercise this week.
Please enable GitHub pages on your GitHub repo and use Brightspace to submit a GitHub link to your repository.
This assignment will be graded on a scale from 0 to 10, taking the following criteria into account:
README.md file with all the information requested below.Answer the following in your README:
Once you’ve selected a dataset, take a look at READMEs and other files that describe the data and have information about the fields and measurements included. Select a couple of parameters to experiment with, it’s possible that the first couple of parameters that you choose won’t be very interesting.
Consider the following when designing your visualization:
How can data be used as a form of expression?
Read and write a 200-word response to the following:
As always, your response should be personal, meaning that you should be expressing your views and opinions about the text and not just summarizing it. You can use the following rubric to guide your response:
Please submit your response via Brightspace.
Alternatively, you may create a reading.md file in your HW06 repo and write your response in markdown. Just make sure to submit a link to the file using Brightspace.
Our mid-term project is meant to give us an opportunity to combine everything that we’ve learned so far to create a piece of work that showcases not only our technical knowledge, but also our design skills, and ability to think critically while making connections between our readings and our practice.
For this project you are going to design an interactive or time-based book cover, album cover or movie poster.
Select a book, album or movie that you like or are familiar with. Think about how to represent aspects of the story or its characters using shapes, colors, loops, animation, random values and/or time.
The cover/poster should be interactive, time-sensitive or both. What this means is that mouse events, keyboard events or the passage of time will affect your design in a way that is consistent with the narrative of the book or the development of its characters.
For full credit projects should use custom functions, arrays, objects or classes, for() loops and if() statements, and demonstrate forethought and planning.
The project will be due on 2024/11/04. You have three weeks to work on it, but there are weekly milestones that have to be submitted for grading. You should not wait until the last week to start programming. You should start programming and experimenting with ideas as soon as you have an idea that you are happy with.
Select a book, album or movie. Think about experiments and ideas that you might like to explore. Draw and sketch some possibilities on paper/tablet. Clone our template into a repository called MidTerm and write about all of these things on the README.md file:
Please submit the link to your project repository via Brightspace.
More details next week, but by this milestone you should have a pretty solid grasp of the logic that will be required to implement your idea. Your code won’t be finished, but you have placeholders or simplified versions of your final design and a progress writeup.
More details next week, but this will include a short presentation and demo during class, final code review and a final writeup.