coding together

Photo by Lagos Techie on Unsplash

Theme

This semester we are going to pursue data sets that deal with significant social, civic, or environmental concerns. While not required, I encourage you to look into data sets that are relevant to the DC metro area. The final project will provide hands-on experience designing, implementing, and deploying interactive visualizations for the web. The final deliverable will take the form of an explanatory narrative, deployed as an interactive web page using GitHub Pages.

  1. Pitch
  2. Proposal
  3. Initial Prototype
  4. Demo Video
  5. Peer Review
  6. Final Deliverables

Pitch

Early in the semester you will briefly pitch your project idea to the whole class. You should have a data set picked out that is available online and ready to download immediately. For your presentation, you will have just 2 minutes each and no slides - like the proverbial elevator pitch. Just quickly tell the class what data set you are interested in, why you think it is interesting, and what you have in mind for a visualization project. These pitches will give you (and me) situational awareness of what other people are thinking of working on. You might find project partners, either because you find somebody else interested in what you care about, or find out that you are more intrigued by a new idea than your previous plan.

What: A description of the dataset. What type of dataset is it (table, network, etc.)? What are the items (i.e., objects), and what is the primary item type? What are the attributes that describe each item? Have any visualizations been created of this data set that you know of? Why: A description of the goals and tasks. What are the domain-specific goals? What good can an analysis or presentation of this dataset yield? This should be specified as a few broad questions that relate specifically to the domain.

Submission

A short description of your pitch (250-500 words) is due before class as a submission to the course LMS discussion board. In this post, you need to summarize your pitch through the information requested above. Groups should be formed within one week of the deadline for the pitches. Email me with your groups and provide a link to your chosen data set. If this was not one of the datasets that was pitched, include answers to the questions above and a one-sentence explanation why this was chosen instead of one of your pitched data sets.

Data is Plural Archive

I am a big fan of the Data is Plural Archive for fun and interesting data sets . Feel free to use one of the datasets, but make sure that you note that you are doing so in your pitch. Many of these will have visualizations created from them already, so you might need to differentiate yourself from that work and reference it in your later designs.

Proposal

Your team is submitting a statement of intent, not a contract - it is natural that your plans will change somewhat as you refine your ideas. The key is to find some domain and task(s) that both interests you and presents an opportunity for infovis. That is, there is some task where a human needs to understand the structure of a large dataset. You are definitely welcome to link the infovis project to another class or research project. You may also build on existing software, but your project should include some implementation work of your own. This project should be completed as a publishable website, using one of the visualization frameworks we discuss in class (e.g., vega-lite, d3). Other visualization software libraries are potentially viable, if you have a question, discuss it with me.

Proposal format: your writeup should follow this outline for major sections:

  1. Project Title and Team
  2. Domain and Data
  3. Related Work
  4. Initial Sketches

Project Title and Team

Include names and email addresses of all people on this project team

Domain and Data

  • a brief description of the domain - what is it, and why do people care about it?
  • a description and link to the dataset.
  • What type of dataset is it?
  • What are the items and attributes?
  • How big is it (number of items and attributes)?
  • Do you have it in hand already, and if not, why not?

While this section will not be as complete as in your design document, you should begin to discuss what has been done in this area. Find at least 3 significant projects or papers and describe how they are relevant to your topic. Your related work section can include both academic work, examples from class, and any relevant commercial tools. You do not have to go into great detail here, just make it clear that you have looked around and started to get a sense for what has been done before.

Initial Sketches

Your team is also submitting a design document that should plans for applying information visualization techniques we have discussed in class to your proposed data set. This document primarily consists of an exploration of the design space for creating a visualization from your data. To complete this, you and your team will follow the Five Design Sheet process that we will discuss in class. Each sheet serves a specific purpose. Note: You do not have to use the templates that are provided, but your individual pages should contain the same general content.

Sheet 1: Brainstorming

The idea of brain‐storming is to enlarge the design space of possibilities. There should be a focus on quantity – to generate as many designs as you can think of. This should be a group activity. Once you have these ideas, filter down to the most promising ones, categorize them, attempt to merge them into more powerful view combinations. Detailed Description

Sheets 2, 3, 4: Details for three separate ideas

The three individual design sheets are to record three ideas from the initial brain‐storming exercise. You should choose your three most promising ideas to expand with more detail. These individual sheets can be done with your group or assigned to individual members to complete on their own. These include a general layout or wireframe for the visualization method, details for how the visualization system works, a description of the interactions available to the user (buttons, drop downs, query boxes, etc.), and a discussion of the benefits and challenges of the chosen technique. I want to know who did what - there should be space on each sheet for the name of the person(s) who worked on that particular design. Detailed Description

Sheet 5: Realization

Once you have completed your three individual designs, you should come together with your group to decide on one final idea to champion. This visualization may draw primarily from one of the designs, or it may include elements from all of them. The page you will submit for this final realized design will include a list of milestones with dates - what are the big stepping stones that need to be completed for this design to be successful within the remaining semester? The page should also include some basic implementation details - what packages, software libraries, or online tutorials are you planning to rely on to build this visualization? Will you need a database connection, or will you load everything in the browser? Detailed Description

Submission

Your submission will be submitted as a group. The submission will be as a markdown file to your group project repo. Be sure to include all images so that the file is readable.

Demo Video

You must produce a demo video (not to exceed 2-3 minutes in length) that introduces and explains your project. Your video should take the form of a narrated demo of your project, and may include additional content as you see fit. We will share the videos in class, so be sure to avoid a late submission.

Peer Review

You will be given the opportunity to give and receive feedback on your first prototype from students in the class. You will also be providing feedback to other students on their prototypes. The quality of your feedback will decide your grade.

Final Deliverables

To complete your final project, you must provide two primary deliverables:

  • A demonstration video (2-3 minutes in length) that communicates your project goals and visualization designs as a YouTube URL.
  • An interactive visualization web page that provides an explanatory narrative of your chosen topic. You will provide the code through GitHub and a link of the hosted site as a GitHub pages link.

Your final project visualizations must be published on GitHub pages. For your visualizations you are free to use any web-based libraries, including but not limited to: D3.js, Vega, Vega-Lite, and Altair. Be sure to properly cite any web-based libraries or third-party materials used for your project clearly on your webpage. To publish your webpage using GitHub pages, place all necessary files in the “docs” subfolder of your repository.

The goal for your final project webpage is to produce a polished explanatory narrative of a topic of interest exploring the dataset that you chose and building from the sketches your team documented in your proposal.