Key Information

Register
Submit
The challenge is finished.

Challenge Overview

Challenge Overview:
Welcome to the True Detective – Companies Graph Visualization - AngularJS UI Prototype Challenge – F2F Issue 1!

The goal of this challenge is to take the first prototype challenge as your base and fix the issue described below.

Challenge Requirements:
Use the View Graph and Model Graph pattern to allow a user to gradually explore the graph:
- The current graph is too large to display it all on screen at one time. This forces us to limit the graph to be 3 degrees from the current object we're looking at. When we double click on a node other than the one in focus, our focus changes to that node and we see all nodes within 3 degrees of separation from that node. We would like to change this behaviour and allow a user to be able to explore the graph.
- The idea for this should follow the one set out here. We currently use the Cola.js engine for layout so it should be possible to adapt the current graph to use this type of movement.
- Another minor feature covered by this graph is the ability to 'see' the amount of nodes that are connected to the current graph. This is represented by spikes/lines around the node. (
Picture 1.png)
- We would like to have the ability to see this but by having a smaller node attached to the user with the number of connections. Something similar to (
Picture 2.png)
- The code for the colajs example can be found here.

NOTE: Please remember that you can extract pieces of functionality out of controllers using services. Keep the code clean!!!

HTML/CSS/Javascript Requirements:
HTML5:
- Provide comments on the page elements to give clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all HTML code so future developers can follow the code.
- All HTML code naming should not have any conflicts or errors.
- Use semantically correct tags - use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- Your code must render properly in all browsers listed in the Browser Requirements section.  
- Validate your code - reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.

CSS3:
- You're encouraged to use and take advantage of CSS3.
- Provide comments on the CSS code. We need CSS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all CSS so developers can follow the code.
- All CSS naming should not have any conflicts.
- Validate your CSS - reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.
- No inline CSS styles - all styles must be placed in an external stylesheet.
- Label all CSS, Javascript, or HTML hacks with explanations so others will understand.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page. Only use table tags for tables of data/information and not for page layout.

Javascript:
- You must use AngularJS.  Use AngularJS best practices.
- 3rd party libraries can be leveraged in this challenge as long as they are free for enterprise use (no licensing fees), have no restrictions on distribution, selling and / or profiting from the use or sale of software including the library and do not require the source code of the software including the library to be made available to recipients of the software in binary or compiled form. Requirements to credit the library in the source code that uses it are fine (just be sure to follow any such requirements in your submission)
- Please document what libraries you have used and where in the prototype.

Web Browsers Requirements:
- IE11 - This is the primary browser the client is using. You must test your submission for all functionality and performance against this browser version.
- Firefox latest version.
- Safari latest version.
- Chrome latest version.

Supporting Documents:
- Please register on Gitlab and send us your user name on forums so we can share the repo with you.



Final Submission Guidelines

Submission Deliverables:
- A complete list of deliverables can be viewed in the UI Prototype Competitions Tutorial.

Final Submission:
- For each member, the final submission should be uploaded to the Online Review Tool.

 

ELIGIBLE EVENTS:

2016 TopCoder(R) Open

REVIEW STYLE:

Final Review:

Community Review Board

Approval:

User Sign-Off

SHARE:

ID: 30052373