Front-end development of interactive webpage

AWARDED
Bids
7
Avg Bid (AUD)
$847
Project Budget (AUD)
$250 - $750

Project Description:
We are producing a system to allow users to specify and view types of events that they are interested in and need someone experienced with HTML5 Canvas & JavaScript to build the front-end. Our system categorises events into a top-level category (eg. Music, Sport, Theatre etc) and also more specifically into sub-categories. For example, the band "Blink 182" might be classified as both Pop Rock and Punk Rock where these are both a sub-category of Rock, which in turn is a category of Music.

We would like this hierarchy of categories and performers to be represented graphically in the form of a "Mind Map" (AKA "brain storm"). The user should be able to interact with the Mind Map to traverse the category hierarchy and Like / Dislike categories.

The project consists of two parts:

Part 1: Graphical design
This involves producing graphical mock-ups for a few sample states of the Mind Map.
* Each state should display the currently selected category in the centre along with it's associated descendant categories and performers where relevant.
* "Breadcrumbs" should be displayed which depict the ancestors of the currently selected category
* Category nodes should be coloured to indicate whether the user Likes or Dislikes the category
* Icons (e.g. thumbs up / thumbs down) should be associated with all category nodes to allow the user to Like / Dislike them (these icons should always be displayed for the central category, but only on mouse over for all other categories).
* The central category node should additionally have a "more" button associated to allow the user to cycle through additional sub-categories of this category which don't fit on the screen

Part 2: User interaction & transition animations
The user needs to be able to interact with the Mind Map in the following ways:
* Traverse up/down the category hierarchy (by clicking on a category node)
* Like / Dislike a category (by clicking on the thumbs up / thumbs down for a category.
* Display more sub-categories for currently selected category (by clicking on "More" button associated with central category).
Each of these interactions should trigger a nicely animated transition to the new state.

Have a look at http://en.inforapid.org/ for an example of the concept we're after. Sample data and more specific information about how the Mind Map should look, the functionality it needs to support & the animations between states will be provided once a freelancer has been chosen. Payment will be made upon reaching the following 3 milestones:
* Beginning of the project
* Completion of Part 1
* Completion of the project
As part of your bid, please outline your experience with HTML5 Canvas and JavaScript and provide examples of work you've completed which uses these technologies.

Skills required:
Graphic Design, HTML5, Javascript
About the employer:
Verified
Public Clarification Board
Bids are hidden by the project creator. Log in as the employer to view bids or to bid on this project.
You will not be able to bid on this project if you are not qualified in one of the job categories. To see your qualifications click here.