Challenge Overview
Welcome to MFVN Network Graph Visualizer - Interactive Diagram Build UI Prototype Challenge
For this UI Prototype challenge, we need you update existing prototype to build Network Graph Visualizer page based on provided storyboard and requirements stated below.
Main requirements for this challenge need create dynamic diagram and interactions of Network Graph Visualizer.
Final Submission Guidelines
IMPORTANT!
- Your submission must remain show responsive layout that works on Desktop and Tablet platform.
- Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge.
Files Downloadables
sisn-prototype.zip - UI Prototype as Base Updates
Storyboard.zip - Storyboard screens and PSD files
MFVN Network Graph Visualizer - Interactive Diagram Build UI Prototype Requirements
0. Add Network Visualizer button
screenshot: 01A_Dashboard(Network-Visualizer-Btn).jpg
- Add new button on page header before alert icon
- Add the button to all prototype pages
- Hover state need follow consistent image background slide up/down effect.
- Show tooltip when hover on Network button (screenshot: 01B_Dashboard(Network-Visualizer-Btn-Hover).jpg)
- Re-use existing tooltip style and function
- Click this button take user to Network Visualizer page
1. Network Visualizer
Network Visualizer Functionalities
- For this challenge you just need build the Dynamic Network Graph” layout interactions
- Right sidebar area can placed in page as static image, no interactions needed. Focus on build the “Dynamic Network Graph”.
- Network Visualizer area need use fluid width, but the network graph remain centered,
- To build this Network functionality, you can "Create Your Own Codes", or use "Open Source Graph Library", or "CSS3" transform solution
- Here’s some options you can use to build the graph:
Javascript Solution:
- https://github.com/mbostock/d3/wiki/Gallery
- http://bl.ocks.org/mbostock
- http://bost.ocks.org/mike/
- http://neo4j.com/developer/guide-data-visualization/
- http://bl.ocks.org/mbostock/4062045
- http://mbostock.github.io/d3/talk/20111116/pack-hierarchy.html
- http://bl.ocks.org/phuonghuynh/54a2f97950feadb45b07
CSS3 Solution:
- http://rupl.github.io/unfold/
- http://www.creativebloq.com/3d/how-create-impressive-3d-graphics-css3-21410672
- http://www.freshdesignweb.com/html5-css3-3d-examples-demo.html
- http://www.clicktorelease.com/code/css3dclouds/#
We are looking for the following functional requirements for our Relationship Visualizer:
- Your solution must be flexible and be able to show a few to many networks, organizations and user relationships. The storyboard shows variations of 8 or more, but ideally your solution should be able to dynamically display any number of options
- Basic interaction model for this story board should go from global view (showing networks) to network view (showing organizations) to organization view (showing users) as a user double clicks a bubble on the visualizer
- As a user interacts with the items on the visualizer, on a click, the right hand column will display content related to the item selected, double click will change the relationship visualizer view as described above
- We have a separate view for a "File Visualizer" which shows the relationship between files and who they are shared with. This can be a separate view
- We want to show how a user can "drag and drop" files from their "my file" list on to network, and organization items within the visualizer
Relationship Visualizer
- Keep the logo centered on your visualizer in a consistent size.
- Use size and scale attributes to properly size elements in your visualizer. For instances where you have more than 8 items in the visualizer, use roll over and hover states to increase size of the highlighted item
- Placement of the items in the visualizer should be dynamic similar to this example.
- For less than or equal to 8 bubbles, network need show bigger size (02A_Networks-Visualizer(If networks less than or equal to 8).jpg)
- This is how visualizer look for more than bubbles (02B_Networks-Visualizer(If networks more than 8).jpg)
- Bubbles placement always filled 360 degree area, line should use consistent length
- At first load of Graph Visualizer, we are looking interesting animation jquerry effects, maybe something like bubble effect that load one by one?
- There should be easy configuration to display as many bubbles need displayed in the graph
- Tooltips must always show on top of each bubbles by default for hover state
- User can zoom in/out the network graph. The zoom changes the size of the items in the visualizer. If NOT possible, can we zoom all areas?
- Zoom in need increases size of all bubble, line and logo elements
- Zoom out need decreases size of all bubble, line and logo elements
- For hover state, use transparency and color to highlight selected item. Selected item should be in highlight color and unselected items can scale back in transparent (screenshot: 02C_Networks-Visualizer(Network list hover).jpg)
- You can ignore this screen. (screenshot: 02D_Networks-Visualizer(Network list hover2).jpg).
- Double click bubble need load to Single Network View. Show dynamic way to load up another graph set without the need to load another page. IF not possible create separated screen
- Make use of breadcrumb nav to navigate between visualizer views (global, network, organization)
2. Single Network View
screenshot: 03A_Organizaion-Within-Single-Network.jpg
- Re-use completed Dynamic Diagram design and function stated above
- Match Diagram content like storyboard look
- Double Click the Center icon to take the user back to the previous Visualizer
- Double Click “Organization” bubble take user to Single Organization View
3. Single Organization View
screenshot: 04A_Single-Organization-View.jpg
- Re-use completed Dynamic Diagram design and function stated above
- Match Diagram content like storyboard look
- Double Click the Center icon to take the user back to the previous Visualizer
- Double Click “Organization” bubble take user to File Sharing Visualizer View
4. File Sharing Visualizer
screenshot: 05A_File-Sharing-Visualizer.jpg
- Re-use completed Dynamic Diagram design and function stated above
- Match Diagram content like storyboard look
- You can create this as separated pages
Client Priorities (The items that are considered highest prototype priorities)
- Creating quality and efficient HTML/CSS3 code that works in all the requested browsers.
- All elements should be Pixel Precisions, pay attention to padding, margin, line-height, etc.
- Matching the storyboards (as close as possible) across the required browsers.
CODE 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.
Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e.. "main-content", or "mainContent)
- 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.
CSS3
- Use CSS3 Media Queries to load different styles for each page and don't build different page for different device/layout.
- 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.
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.
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.
Browsers Requirements
Desktop
- Safari latest version
- Firefox latest version
- Chrome latest version
Tablet
- Safari Browsers on iPad (Landscape & Portrait)