Final Project

A guide to your final projects for COSC 225: Algorithms and Visualization

Project Overview

This assignment is your opportunity to apply your web programming and algorithmic skills to a project on a topic of your choosing. The project should synthesize the programming and intellectual tools you’ve developed into a site that teaches the user something about your chosen topic. For example, you might create an interactive demonstration of an algorithm or data structure, simulate a physical system, or create an interactive visualization of an intersting dataset. While the topic is open ended, your project should include:

  1. a signficant algorithmic component, implemented in JavaScript
  2. an interactive demonstration related to your topic
  3. surrounding exposition that explains and motivates your interactive demo.

The target audience for your site is your peers in class. You may work in groups of up to three students.

If you’re unsure about a topic, the bottom of this page gives links to some inspirational material, though you should not feel limited to the topics shown there.

Goals

The primary goals of the final project are:

  • to develop a larger scale site from the ground up
  • to incorporate a combination of textual, visual, and interactive elements to a desired aesthetic and didactic end
  • to develop a style for your site that is unique to you
  • to teach the user (i.e., peers in your class) something new
  • to overcome algorithmic and technological challenges you will encounter as you work on your project.

Requirements

Your final submission must:

  • use plain HTML/CSS/JS
  • run on the Firefox web browser without running a web server
  • use minimal external dependencies
    • fonts and small elements (buttons, sliders, color pickers) are okay with proper attribution, but the major components of your sites must be your own work
  • incorporate one or more interactive visualizations
  • include expository text explaining the motivation and usage of your site
  • include references to external material (inspirational material or other exposition about your topic)
  • include a page devoted to the technical development of your site, including a description of the major algorithmic components of your site

Additionally, you may reuse any code from your previous assignments or code posted to the course website (with proper attribution). Any code derived from external sources (online or otherwise) must be attributed (1) in the comments of the source code itself, and (2) in the resources/references of your site.

Timeline

  • Project and Group Registration 11:59pm Friday, April 14

    You must register your group and submit a tentative project proposal. The proposal is a brief (short paragraph) description of your proposed final project. Your proposal should include a link to at least one resource (e.g., web page) that serves as motivation or inspiration for your project. You will also choose a (unique) name for your group to refer to your submission in a semi-anonymous manner.

  • Weekly Check-ins

    Each week, you will submit a brief report on your progress on the project so far. These will ask you to reflect on the work you’ve done during the week as well as your collaboration with your partner (if any). Submissions will be due on April 21, 28, and May 5th.

  • Working Prototype 2:00pm Monday, May 1

    You will submit a working prototype of your project. The prototype does not need to offer the complete functionality of the final submission, but it should demonstrate some significant portion of the intended final project. Your grade for the prototype is based entirely on the user experience, and not on the quality of code submitted.

    You will demo your prototypes in small groups in class on Monday, May 1st. At that time you will also critique one anothers’ prototypes and make suggestions to improve the projects before final submission.

  • Final Submission 5:00pm Wednesday, May 10

    Your group must submit your final assignment to Moodle as a single .zip file entitled group-name.zip, with group-name replaced by your actual group name. The file must contain all of the code necessary to run your project, with the main page contained in index.html. You may assume that the only user interaction with your code is opening the file index.html using an up-to-date version of the Firefox web browser.

    In addition to your group final submission, you will submit an individual assessment of your project, that includes your personal contribution to the assignment, and your proposed grade according to the rubric below.

  • Peer Review 5:00pm Friday, May 19

    During finals week, you will review a (randomly assigned) selection of submissions from the class. In your reviews, you will be asked to reflect on the exposition, design, and efficacy of each submission. This review will focus solely on your experience as a user, and not the underlying code.

Final Submission Rubric

Your final submission will be graded on a 100 point scale according to the following categories: functionality, design, creativity, exposition, technical sophistication, and code quality. Each category is worth up to 20 points. Note that there are 6 categories, each worth 20 points for a potential total of 120 points. This is intentional! Your final score is capped at 100 points (unless extra credit is warranted), so you may use the slack in the grading scheme to prioritize the aspects of your project that you wish to develop most.

Functionality 20 pts

The project must run and have a readable output when opened in an up-to-date version of the Firefox browser on a desktop with a reasonably large screen size (e.g., 800px wide). No errors (or debugging messages) are displayed when the program is run. The project includes interactive components that are straightforward to use with a standard mouse and/or keyboard. Your site can gracefully handle some amount of changes in the window size, or perhaps changes the layout for small screens (e.g., when viewed on a phone). The site is robust to unintended usage, and handles unintended interactions gracefully.

Design 20 pts

The page(s) are thoughtfully laid out. Text is easy to read. Color is applied to practical, accessible, and aesthetic ends. The site is easy to navigate, and opportunities for interaction are clearly indicated. The site invites the user to interact with it and is a pleasure to use. Fonts and typographic are deliberately chosen.

Creativity 20pts

The program tackles a novel problem or takes a novel approach to demonstrating a familiar concept. The project shows the user something they have not seen before.

Exposition 20 pts

Written content clearly and concisely describes the purpose of the site, what it demonstrates and why. The user should learn something technical through a combination reading the text and interacting with visual elements. Examples/interactive demonstrations clearly illustrate concepts.

An additional page describes some implementation details of the project and challenges encountered in creating the project. References to inspirational work as well as technical documentation for “non-standard” features used in the project are also included.

Technical Sophistication 20pts

The project demonstrates or teaches technically sophisticated concept and implements sophisticated procedure. Sophistication need not equate to “many lines of code,” but the work addresses a subtle algorithmic challenge. The algorithmic challenge(s) should be addressed in written material of the project page as well.

Code Quality 20pts

Code is sensibly structured and appropriately commented. Code is readable and understandable to a programmer with itermediate experience. The program is designed from modular components with enough generality that they could be reused in future projects.

Inspiration

The following pages are linked to for your reference/inspiration. You should not take any material directly from these sites, and you should cite any resources related to your work in your project. If your project covers a similar topic to an existing site, you should describe the differences between your project and previous work. (See the note on “creativity” above.)

A natural choice of topic for your final project would be an interactive demonstration of a data structure or algorithm. Here is a page containing many such demos:

Note that these demos lack the surrounding exposition that you should include in your projects.

Here is an interactive demonstration of drawing the Mandelbrot set, an often depicted fractal:

Here is a page of many interactive visualizations of systems arising in physics, math, and computer science:

Here is a thorough guide to the construction of Bézier curves (which you can use in SVG!):