Front-end development of interactive webpage

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 [url removed, login to view] 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.

Beceriler: Grafik Tasarımı, HTML5, Javascript

Daha fazlasını gör: ways to be freelancer, users en freelancer, types of graphical design, sport freelancer, screen of the mind, node freelancer, node development, javascript level 2 freelancer, how to end a work in freelancer, how to end a project on freelancer, graphical design freelancer, front end development freelancer, freelancer work rock, freelancer top users, freelancer support form, freelancer sport events, freelancer node, freelancer map system, freelancer it development, freelancer in the states, freelancer in events, freelancer front, freelancer design e front end, freelancer data storm, freelancer data map

İşveren Hakkında:
( 4 değerlendirme ) Sydney, Philippines

Proje NO: #4461456