Challenge Overview
Welcome to the Agon - Company Relationship Visualization UI Prototype Challenge!
Company Relationship Visualization is an innovative and interactive approach to data visualization. The data is being visualized in a series of relationship nodes that are changing depending on what “view” or “user scenario” you are currently in.
For this challenge, you are not going to build the visualization graphs. The goal of this challenge is to create the HTML prototype based on the provided storyboard designs and requirements/instructions outlined in the Challenge Details section.
Final Submission Guidelines
The objective of this challenge is to build the relationship visualization HTML prototype of different companies. You are going to build the HTML prototype with placeholders for the visualization graphs.
General Requirements:
1. Layout is fluid and will take 100% height and width.
2. You are encourage to use TypeScript (optional).
3. Implement hover style for the icons that don’t have any specific instruction below. You can do a simple opacity change.
4. CSS class names should be “lower-case with dashes”.
5. Use SASS or LESS. See the CSS requirements below for more specific instructions.
Requirements:
The following are the functionalities needed for this challenge. Check the control-guide.png for the locations of different controls.
1. Main Screen
1.1 Main Content
- This will be an image wrapped in a div placeholder.
1.2 Top Navigation
- All navs are dead links.
- Implement hover style, this will be similar to the active state style.
1.3 Side Navigation
- Clicking the side navigation menu icon will toggle the slide and push side navigation from the left side of the screen. We don’t have storyboard for this section, so use your best judgement.
- Implement fast slide animation when revealing or hiding this navigation.
- See screenshot “side-nav-items.png” for reference for the navigation items.
1.4 Search
- Clicking the “search” icon will expand the search input field in an animated slide functionality. See screenshot “1c Zoom close up-search.png” for reference on this feature.
- Slide back the input field on blur event and if value is blank.
1.5 Filter
- Clicking this icon will toggle slide and push filter window from the right side of the screen. We don’t have storyboard for this section, so use your best judgement.
- See screenshot “filter.png” for reference on the content of this section.
1.6 Bottom Control Bar
- The whole bar background should be set to semi-transparent.
1.7 Minimap
- See “Radar” from the screenshot “control-guide.png” for the location of its icon.
- When this icon is clicked, it will toggle the display of the minimap (1e Zoom close up-radar.png).
- Use image placeholder for the content of this section.
1.8 Map View
- When this is enabled, it will activate a different view. See screenshot “2a Map view - zoom out.png” for reference.
- Apply the changes in the UI style.
1.9 Collapse/Expand
- Just implement a toggle normal/active state for these icons.
- Their active state will switch the blue/gray colors on their opposite sides.
1.10 Sort Nodes
- Just implement a toggle normal/active state for this icon.
- The active state will just change the color to blue.
1.11 Restore
- This will revert back to the default view and style. If the user is in Map View, it should revert back to the original screen state without reloading the page.
- Implement an active state for the icon. Use blue color for the icon when active.
1.12 Timeline
- This should have configurations in JS for the start and end year.
- Clicking the left or right arrow will change the year on its corresponding label.
- The “play” icon will just toggle its active state. The active state will just replace the triangle to an square icon.
1.13 Nodes Count
- This is just a label
1.14 Zoom
- Implement a slider functionality.
- Max zoom should be set to 500%. The max zoom value should be configurable in JS file.
1.15 Fullscreen
- This icon will toggle the display to full screen capability.
2. Company Info
- Implement a version of the Main screen as stand alone page.
- See screenshot “1b Zoom close up-company.png” for reference.
Browser Compatibility:
- IE10+
- Latest Google Chrome (Windows & Mac OS)
- Latest Safari (Windows & Mac OS)
���- Latest Firefox (Windows & Mac OS)
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.
- Element and Attribute names should be in lowercase and use a "-" to separate multiple-word classes (i.e.. "main-content")
- Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- No inline CSS styles- all styles must be placed in an external stylesheet.
- 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.
- Use semantic class names, use official CSS specification, thus conform to “lower-case with dashes”.
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.
- As possible use CSS3 style when create all styling.
- 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.
- Use SASS or LESS. Use smart-multiple files that might be used outside of this project scope. (Ie. To style other objects).
- Use variables with well-chosen names. Use some sort of naming convention.
- Use relative path names for content (images): “url(Images/image.png)”. So put images in a subfolder from where the css resides.
- Flex box layouting is preferred.
Javascript
- All JavaScript must not have a copyright by a third party. You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.
- If possible, use Typescript.
- You can use jQuery.
- Angular should not be necessary for this project.
- Use camelCase for variable naming. PascalCase for “class”-, “interface”- and “module” names. Prepend an I (uppercase i) for interface declaration.
Images
- Images should be properly compressed while still having good visual quality.
- Please use best practice repetition usage of background based image.
- Please use sprites when using icons for your submission.
Submission Guidelines:
A complete list of deliverables can be viewed in the UI Prototype Competitions Tutorial.