Small Assignments

These assignments are intended to gain additional practice with concepts covered in class.

They will be graded for good-faith effort. A solid attempt on each problem will earn an S, a partially complete submission an N.

Altair

This assignment will have you practice with Altair by recreating a handful of visualizations.

Download Altair Assignment

The README contains instructions on how to run the assignment, which is contained in a Jupyter notebook.

HTML/CSS

This assignment will have you practice with HTML/CSS.

HTML/CSS Practice Assignment

Portfolio

This assignment is a bonus HTML/CSS assignment, and will have you deploy your own public website with a link to some of your CAPP work and anything else you wish to include.

If you already have a portfolio website: as an alternate assignment you can create any simple site using a SSG and deploy it. I would suggest trying a SSG & host you haven’t used before.

Steps:

  1. Decide if your page will be pure HTML/CSS or if you’d prefer to use a static site generator tool.
  2. Select a template to start from.
  3. Populate your site with content: links to relevant pages (GitHub/Linkedin/etc.) & projects. Be sure to include an image or video of projects where possible!
  4. Publish your portfolio site publicly.

In considering what you’d like to include, this presentation might be useful to reference: https://www.jpt.sh/presentations/portfolio/

Static Site Generators

Static site generators allow you to write (mostly) Markdown, rendering it to HTML for you.

This allows you to write template HTML once (e.g. a template for projects), and use Markdown to render out individual pages.

For an example you can look at https://github.com/uchicago-mscapp-projects/uchicago-mscapp-projects.github.io

The content/ directory contains markdown files for individual classes & projects, the theme/ directory contains the HTML used to render the final page https://uchicago-mscapp-projects.github.io.

Static site generators are ideal for a blog or other site that you wish to update frequently, I would recommend either:

  • Zola - A simple SSG written in Rust. Uses a familiar template language for those that have used Jinja/Django.
  • Hugo - A very popular SSG written in Go. Uses a somewhat more esoteric templating language, but has lots of pre-built themes.
  • Pelican - An SSG written in Python, uses a Jinja/Django-like template syntax as well.

Each of these has their own instructions for installation & getting started, but in a command or two you’ll have a site running locally.

Templates / Themes

Identify a portfolio template: either a single page HTML/CSS template, or one associated with a static site generator. Some resources:

Hosting

I recommend either using GitHub pages or Netlify, the SSG tool you use may have publishing instructions that work for you, or you can follow these guides:

Both of these have more-than-adequate free tiers for hosting static webpages. If your page needed a backend you would need to seek out a (paid) hosting provider.

D3

This assignment will have you practicing with D3 by recreating an interactive visualization.

It is available here: D3 Practice Lab.

Analysis

Part 1: Gathering Static Visualizations

In Week 3 we will be focusing on what makes a good visualization, and how to provide meaningful critique.

For this assignment I would like you to consider a visualization that you’ve come across in your life that stands out to you: perhaps from a news article, book, class, or job (assuming you have permission to share it).

Do not bring a visualization from the various best/worst visualization galleries one can easily find online. We’ll likely use a few from those, but I am looking for visualizations that you have seen in their original intended context.

To participate in this assignment, please:

  • Create a new Ed Post in the ‘Analysis’ section.

  • Provide a link to or image of a data visualization that you’ve seen that was memorable to you.

  • Write a paragraph or two describing any context you think someone might need to understand the nature of the data viz.

  • Write another paragraph about your relationship to it: when did you encounter it, why do you remember it? At this point do not provide any critique, positive or negative.

Part 2: Providing Critique

Once we’ve had our discussion of critique, we’ll gain a bit of practice providing critique in a controlled environment.

To earn another half point please do the following (after our in-class critique conversation):

  • Pick one of the posts from Part 1. Please look for posts without critique first, but you may post a second critique if all other posts already have critique.
  • Write a detailed critique of the visualization using the framework provided in class.

Part 3: Interactive Analysis

This assignment aims to give additional practice with critique, and looking closely at how an interactive works.

You’ll again make an Ed post, with the following:

  1. A link to a unique interactive visualization you find interesting.
  2. Share your critique of the visualization based on criteria we’ve covered.
  3. Additionally, include a section titled “Reverse Engineering” where you try to figure out how the visualization in question works. Things to consider:
    • What library does it appear to be using? View the page source and try to learn as much as you can.
    • By inspecting the SVG/HTML what can you learn about how it works? Mention at least 3 different visual elements and what SVG elements they are made of. (e.g. bar chart -> rectangle, legend -> text/rect).
    • Any open questions about how it was made? Something you can’t figure out how they did?

Participation

We will have several in-class discussions, as well as some room for open-ended conversation on Ed.

You must meaningfully participate in at least two of these discussions to earn an S. (Participation in one will earn an N.)

Meaningful participation would include:

  • asking thoughtful questions
  • providing insight based on your own experiences
  • thoughtful commentary or critique on visualizations under discussion