Intro:

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.

Data:

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:

• Beijing Air Quality: README (JSON / CSV)
• Global Inflation (1970 - 2022): README (JSON / CSV)
• Motor Vehicle Collisions: README (JSON / CSV)
• Stock Exchange: README (JSON / CSV)
• 2015 Tree Census: README (JSON / CSV)
• Wine Dataset: README (JSON / CSV)

Feel free to look for other datasets that might be more interesting. Some places to look for data:

• Open Data on AWS
• Kaggle
• NYC Open Data
• Rap Almanac

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.

Visualization:

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:

• Your visualization can be practical, like graphs, and convey information about the quantities present in the data.
• Or, your visualization can be qualitative and convey ideas, thoughts, emotions through more abstract shapes.
• Use the whole browser screen for your visualization.
• Your visualization should have at least 1000 data points.
• Your visualization should use at least 2 fields/features/parameters.
• Answer the following in your README:
  • What dataset did you use? If not from our class site, include a link.
  • Why did you choose this dataset?
  • Which fields/features/parameters of the dataset did you use?
  • How many data points did you use?
  • What are you visualizing? How do the shapes, colors or movement relate to the data values?
  • Include drawings and images of reference visualizations

Submission and Grading:

Start by cloning our template into a repo called HW05. 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.

The following guide will be used for grading:

Implementation: work shows evidence of understanding programming concepts and you are fully using them to express your ideas.

Thoughtfulness: project demonstrates your personality and it’s not a straightforward re-implementation of someone else’s idea.

Craft: code and its results show care and consideration for presentation and professionalism, and work doesn’t look like it was rushed.

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:

• Short summary: in one or two phrases, what is the book about?
• Memorable quote: Is there a phrase in the text that stands out or captures the main idea of the text?
• Did you learn something new? What?
• What do you agree or disagree with? Why?
• How is this text related to programming?
• Is the text related to any of the other readings we’ve done so far?
• Which plate/visualization was your favorite? Why?
• Which plate/visualization surprised you the most? Why?

Please submit your response via Brightspace.

Alternatively, you may create a reading.md file in your HW05 repo and write your response in markdown. Just make sure to submit a link to the file using Brightspace.

Description:

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.

Select a book 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 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.

Dates, milestones, submissions

The project will be due on 2023/10/25. 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.

Milestone 1 (due: 2023/10/11)
Project proposal (10 points)

Select a book. Think about experiments and ideas that you might like to explore. Draw and sketch some possibilities on paper/tablet. Clone our template and write about all of these things on the README.md file:

• What book did you choose? What is it about?
• What aspect of the book will you include in your cover?
• Is it interactive? time-based? both?
• What ideas would you like to explore or experiment with?
• Are there aspects of your project that are related to any of the readings we’ve done?
• Include at least one drawing or sketch

Please submit the link to your project repository via Brightspace.

Milestone 2 (due: 2023/10/18)
Pseudo-code, planning and organizing (10 points)

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. Progress writeup.

Milestone 3 (due: 2023/10/25)
In class demo and presentation (30 points)

More details next week, but this will include a short presentation and demo during class, final code review and a final writeup.