Agon - Company Relationships Visualization Wireframe Challenge

Welcome to the Agon - Company Relationships Visualization Wireframe Challenge!

We are looking for your most innovative and interactive approaches 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. We are also looking of your ideas on  how a series of filters and adjustments can influence, change and update the main visualization, and what the best UX would be for this process. The third part of this is would be to provide an effective and useful UI layout to frame the interactions. Think about what will be user friendly, but also visually engaging and highly interactive.

Round 1

Submit the following for Checkpoint feedback
1. Hierarchical Relationship
2. Temporal Relationships
Notes.jpg: Any comments about your design for the Client

Round 2

Final wireframe plus any Checkpoint feedback
1. Hierarchical Relationship
2. Temporal Relationships
3. Change in Positioning
Notes.jpg: Any comments about your design for the Client

Challenge Details
The goal of this challenge is to come up with the wireframe that helps define the flow of application. We are looking for the Topcoder Design Community to help us with planning our new "user experience" (UX).

Wireframe Expectations
- You must create traditional wireframe call-outs and notes.
- Provide us with your interaction and click-path thoughts and suggestions.
- Produce HTML click-through wireframes that can be used to demonstrate all mentioned functionalities as required in each round.
- The application must be very easy to use and intuitive. Keep that in mind when create your solution for the layout and flow information.
- You MUST cover all requirements mentioned in challenge details below.
- Use note pane in every single page you design to explain what items are addressed in that page from the documentation, what things you added/changed/removed, use it to make your idea clearer and help the client to give you constructive feedback.

Supporting Documents
- Example Dataset (Example Dataset.xlsx)

Terms Definitions
- Force algorithm: When positioning nodes of a network on a canvas for visualization, it is desirable to place nodes with strong, or many connections close together. This can be achieved by simulating the edges to represent an attractive force between nodes, so that each node on the canvas is ‘pulled’ by all its neighbors to its final location.
- Collaborations and collaboration edges: Companies often work together in executing their R&D, for instance by bringing together pieces of knowledge in the two companies to develop new technical ability. These types of pairwise collaboration can be represented as edges.
- 2015 collaboration relations: These collaborations change over time; in the one year there may be 10 people involved, while the next year it’s 50 people from the two companies working together. It is a key aspect of this visualization to show how the relationships between companies change. The “2015 collaboration relations” refers to the particular state of all the relationships between companies in the year 2015.
- Longitudinal phenomena: Longitudinal phenomena refer to relationships that exist over an extended period of time, and that may change in nature over time. For instance the strength of a collaboration (how much are you working together) is a longitudinal phenomenon. By contrast, a financing event is highly localized in time; you can point to the moment in time where it occurred. A third type of relationship in the dataset is the parent-child relationship. This is again different in that it has no temporal property; it does not change its strength or whether it’s true over the period of time the dataset applies to.

General requirements
- As a user I want to see a graph with all the company nodes.
- On mouseover of a node there should be a popup showing the node label, and other useful attributes.
- On mouseover of a node, the graph should highlight all nodes belonging to the same type or same parent as the pointed node.
- On mouseover of an edge node there should be a popup showing the edge label, and other useful attributes of that edge.
- On mouseover of an edge, the graph should highlight the edge and the two nodes belonging to the edge.
- I want to be able to zoom in and out onto on a part of the graph, preferably by scrolling, for better visual overview of crowded parts of the graph.
- It should be possible to color nodes and edges nodes by any attribute that is assigned to them: country, parent (discrete colors), but also a ‘heatmap’ to indicate the intensity of continuous numeric measures.
- Similarly, numeric measure can be chosen to represent the size of a node or the thickness of an edge.
- The position of the nodes should be determined by the graph-object through a variety of algorithms, such as force layout.
- It should be possible easily to add new lay-out algorithms to the backend of the tool.
- It should be possible to collapse/expand nodes according to acyclical, directed edges (parent/child relationships). 

Deliverables
We are looking for more of unique interactions and UX methods/patterns for addressing the 3 unique user scenarios/visualizer relationships. We are not setting specific screens, but your designs and ideas should focus on and address outlined under each of the user scenarios/visualization relationships below.

User Scenarios/Visualization Relationships
There are 3 different user scenarios that will directly affect how the visualization looks and is functioning. It might make sense to think of these user scenarios as different “Views” within the application.

1. Hierarchical Relationship

• Show the network with nodes with the ability to be filtered by some criteria (like industry and geography).
• Nodes are positioned by a force algorithm, according to their 2015 collaboration relations.
• Initially we see all nodes and their collaboration relations. We can then collapse nodes to their parents and then see the network where collaboration edges are the aggregation over all collaborations between their subsidiaries.
• It’s also possible to at once, collapse all nodes to their parents.

2. Temporal Relationships

• Show the network with nodes filtered by some criteria (like industry and geography).
• Nodes are positioned by a force algorithm, according to their 2015 collaboration relations.
• Financing events occur at an instance in time.
• Collaborations by contrast are longitudinal phenomena.
• We want to visually see, whether and how the events of financing events follow or lead the collaboration phenomena. For instance, whether the collaboration between two companies is followed by the investing of the larger company in the smaller one.

3. Change in Positioning

• Show the network with nodes filtered by some criteria (like industry and geography).
• Nodes are positioned by a force algorithm, according to their 2015 collaboration relations.
• By default, nodes are positioned according to their collaboration edges.
• We want to be able to introduce an additional parameter to influence the positioning, for instance so that nodes that share a geography are positioned closer together. When they collaborate, they are positioned even closer.

Client Specific filtering criteria for the network and nodes
Please refer to example dataset document
- The client would like to be able to show a subnetwork by geography (C-column in Excel), or set of countries (US and Canada, or Sweden, Norway, Finland and Denmark)
- The client would like to be able to show a subnetwork by industry, for instance all companies with an industry code (D-column) either in the range 1000 through 2999 (Manufacturing) or the range 8500 through 8599 (Education).
- The client would like to be able to show a subnetwork, composed only by edges from 2012 or 2013.

Learn Axure
- New to Axure? Here are some quick tutorials to help you get started.
- http://www.axure.com/learn

Target Audience
- Agon Strategy Consultants.  

Judging Criteria
- User Experience of the application.
- Completeness and accuracy of the wireframe as defined in the attached requirements.
- How well your wireframes provide a consistent user flow

Submission & Source Files
Preview Image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.

Submission File
Wireframes should be built in HTML or Axure. The resulting files are not critical in this Challenge. The most important point is that all the content is listed and the pages are linked together to show page flow. Keep your source files out from this submission folder.

Source Files
All original source files of the submitted ideas. If you would like to submit notes please include notes.txt file.

Final Fixes
As part of the final fixes phase you may be asked to modify content or user click paths.