D3 Javascript Screens X 2

We require 2 screens to be built using D3 which will be displayed in a JSF page to display information graphically and to allow users to interact with the displayed items. You can use a boiler plate jsf template which renders using twitter bootstrap css and html in a browser. Each screen can be a seperate rendered page. You don't need to integrate the two screens. Each json file can be embedded in the relevant page. Screen 1 displays text fields as bubbles, input from a json file which contains the name of each bubble, which randomly appear in pairs so that users can select none, one or both. If users select one then two cases are valid. User clicks once is case 1, User clicks same bubble twice is case 2. If user clicks same bubble again then case 1 applies. If user clicks both bubbles then case 3 applies. If user selects none then case 4 applies. The case 1, 2, 3 or 4 should be output in a new json file which contains the pair as 2 bubble names and the case number for each interaction. When each bubble appears the related text also appears. Once all the input pairs of bubbles have been displayed, for a set time (approximately 8 seconds) then a message appears stating that this phase is complete. At this time a json file is output with the interactions from the users for each pair. (0 for no input, 1 for user clicks both bubbles once, 2 for user clicks one bubble once and 3 for user clicks one bubble twice) Screen 1 should have two views based on whether bubbles are of one category only which will be Screen 1a. Screen 1b will display bubbles which are categorised with 2 or more categories. The category assignment will be part of the input json file which contains the bubble names (the text to be displayed) and their category. Screen 1 may look something like [login to view URL] and Screen 2 may look something like [login to view URL] . Screen 2 portrays each of the bubbles from screen 1 as either solid colour, border only or blank based on the selections the user makes from screen 1. (You can randomly assign values between 0 and 1 for this job from a json input file as there is some post processing of the json file from screen 1 before input as json file to screen 2. The post processing is not part of this work package) A screen that is similar to [login to view URL] will be ok. (note that there may be more than 1 users input which can be portrayed as additional columns) The bubbles can be displayed in rows and the user inputs can be displayed as columns similar to [login to view URL] . In screen 2 a user shall be able to filter out what bubbles appear based on 2 checkboxes and 2 numeric fields representing some boolean attribute supplied in the json input file. Filtering shall be includes / excludes for the boolean attributes or above, below or between ranges for the numeric fields. User shall also be able to sort by column where the bubbles are sorted from top to bottom based on the input values of the json file. Note that the code shall render appropriately on all screen sizes. This rendering will be the role of the twitter bootstrap css and html contained within our code base. For this job the box containing the D3 javascript shall adjust width and height and font sizes to remain readable, to suit the bootstrap sized screen size only. Note that developing a twitter bootstrap css and html rendering kit is not part of this activity. We will integrated the D3 javascript code back into our codebase.