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
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
- 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
- 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
- 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.
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
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.
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
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:
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
- 1 page on how to use your application and the things you can
do with it.
- 1 page on the data you used including where you got it, what
you did to it.
- 1 page with links to the source code and any instructions
necessary to install and run it. These instructions should
start from the assumption that the reader has a web browser on
their computer and tell the user everything else he/she needs
to know to get the code and get it running.
- 1 page on what interesting things you found using your
- 1 page on the roles of the different team members
Be sure to document any external libraries or tools that you make
use of - give credit where credit is due.
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
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