Project 3

Rave On

Project alpha version due 11/11 at 8:59 pm Chicago time
Project final version due 11/30 at 8:59 pm Chicago time

Project 3 will be the second group project and the focus here will be on visualizing interconnected networks of information. This one will also focus more on database and statistical work with the data, and interacting with an online database.

You can keep your group from Project 2 or form new groups. Send Andy an email once you know your group for project 3 (even if it is the same as for project 2).
I will create groups for people that do not form groups on their own. Again the standard group size will be 3 or 4 people per group.
As with Project 2 you should very quickly set up a web page for your new group project and send the URL to andy. Each Friday of the project each team member should post on the project web site an overview of what he/she did on the project that week.

Data Sources:
echo nest API -

As with all the projects your app will be evaluated running full screen with touch interaction on the classroom wall.

In this project we are going to take a look at data about musicians and music genres for the last 100 years or so. This application will also allow multiple to users to interact at the same time and look for patterns, commonalities, and outliers in the aggregation.

For a C

You should divide the wall up into 3 parts (not necessarily of equal size) - two individual sections so two users can interact independently, and one shared section.

Your visualization in the shared section will show data temporally, geographically, and as a linked network.

Your visualization should start by showing three overview visualizations
  1. a timeline showing the top 10 ranked genres for each decade so the user can see the relative popularity (or hotttness in the case of echo) of genres over time, new ones appearing and coming to prominence, those that disappear
  2. the top 10 artists for each decade, what genre(s) each of them belongs to, and where they come from on a map so the user can see if particular places create artists in particular genres. The map should be pannable and zoomable and resettable.
  3. link all of the artists (the union of all the top 10 from each decade) through a force directed graph based on similarity (note that there may be clusters that do not connect to each other). You should also allow the user to view the primary genre of each artist in the force directed graph to see how the genres relate to each other.

A user in any of the two individual sections should be able to choose a genre or a decade or an artist to highlight that particular information across all of the views in the shared section (i.e. if you choose a genre you should see all of the artists and places related to that genre highlighted that are currently shown in the visualizations).

This will require you to pre-process the data in the database. You should plan on starting to do this early.

Note that there some intentionally vague terms here. You should come up with a good way to define a 'top artist' for each decade, and how specific you want the genres to be, and defend those choices when you talk about data processing. The goal is to come up with a useful interactive visualization for the user - make choices that will enhance that goal.

For a B you need to add

The B range will be a personalized interactive version of the C work focusing on artists. The same visualization styles will be used but this time the data shown will be based off of what  each of the two users choose to show and on interactive queries to the online database.

Each user should start out with an empty personal list of artists and an interface to let them search for artists either by name, or by decade, or by genre, and then add that artist to their personal list which will automatically add the artist to the current global view. When an artist is added, that artist should appear in the timeline (note that some bands break up and come back together repeatedly), on the map, and in the force directed network graph. Each user should be able to add at least 10 different artists to the mix. Users should also be able to delete one or all of their chosen artists.

When a user selects an artist the interface should bring up a list of related artists to make it easy for the user to add related artists to the visualization.

Each user should be able to color code their entries in the three different views so the two different users can see if they have overlapping or very divergent interests, or the users should be able to color the data by genre in the three visualizations.

Use your interface to show and investigate some personal, quirky, genres or artists of your choice.

For an A you need to add

The A range will focus more on genres than artists.

Each user should be able to choose a series of genres from a list of all the genres in their personal interfaces and see each genre appear in the timeline, and show the top artists/bands in that genre on the timeline, map, and force directed graph. This allows each user to compare their genres to each other and to the genres of the other user. Users should also be able to delete one or all of their chosen genres.

Each user should also be able to search for an artist, see which genres they belong to and select the genre that way

Each user should also be able to filter genres by decade, and show them both alphabetically, and by hotttness and select the genre that way

The genre view of the A range should integrate nicely with the artist view of the B range

There are two deadlines for this project. By the first deadline you should have implemented the initial screen layout of your application and have the basic functionality allowing the user to perform an example of the various 'C' functionality. This will make sure that your group is on track and that you can focus on making a good interface and set of visualizations, not just functional ones. Personally, I think you should have the entire C functionality done at that point if you are going for an A on the project as a whole. You should make this version of the interface available on your group project page.

You should create a set of web pages that describe your work on the project. This should include:

all of which should have plenty of screenshots with meaningful captions. Web pages like this can be very helpful later on in helping you build up a portfolio of your work when you start looking for a job so please put some effort into it.

Be sure to document any external libraries or tools that you make use of - give credit where credit is due.

You should also create a 2-3 minute YouTube video showing the use of your application including narration with decent audio quality. That video should be in a very obvious place on your main project web page. The easiest way to do this is to use a screen-capture tool while interacting with your application, though you will most likely find its useful to do some editing afterwards to tighten the video up. Its also a good idea to have a video like this available as a backup during your presentation just in case of gremlins.
You may want to shoot this video on the wall itself from a phone with one of your team members interacting.

The web page including screen snapshots and video need to be done by the deadline so be sure to leave enough time to get that work done.

I will be linking your web page to the course notes so please send me a nice 1920 x 540 jpg image of your visualization for the web. This should be named p3.<group_number>.jpg or png. 

When the project is done, each person in the group should also send Andy a private email with no one else cc'd ranking your coworkers on the project on a scale from 1 (low) to 5 (high) in terms of how good a coworker they were on the project. If you never want to work with them again, give them a 1. If this person would be a first choice for a partner on a future project then give them a 5. If they did what was expected but nothing particularly good or bad then give them a 3. By default your score should be 3 unless you have a particular reason to increase or decrease the number. Please confine your responses to 1, 2, 3, 4, 5 and no 1/3ds or .5s please. We will average out all these scores for projects 2 through 3 and keep them in mind when assigning final grades to projects 2 through 3.

Each group will show their visualization to the class and describe its features. This allows everyone to see a variety of solutions to the problem, and a variety of implementations. Rehearse your presentation ... several times. All team members are expected to participate equally in that presentation.

last revision 11/3/15 - moved the alpha deadline back 2 days