Challenge Overview

Welcome to the Agon - Company Relationship Visualization D3JS Graph 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 with the help of D3JS process map JavaScript library.

The goal of this challenge is to update the provided the HTML prototype to make the graph a fully functional D3JS graph as outlined below.

Challenge Requirements

You are addressing the following in this challenge.

JS Libraries

- You’re mainly going to code JS using D3JS library to render graphs in this challenge.
- You are free to use any open source library that helps you address the requirement.
- You need to use a geocoding service API to get companies geo location (long/lat).
- We think using Google maps is not easy to integrate with D3, specifically that we are seeking for custom map theme, we recommend you to use http://leafletjs.com/.

Data Structure

Provided in challenge forums Excel Sheet with sample data :

Nodes sheet represents the graph nodes, it contains company attributes.
Parent-Child sheet is the ownership edges, first column represents the child, second column is the parent (parent owns child)
Finance Event sheet used to render finance events when running timeline.
R&D collaboration sheet represents the collaboration edges between companies.

You are required to suggest a proper JSON structure for the data. The JSON structure is not important in itself. Please make a structure that facilitates the data needed for all functionality. Please use short names in the Json file because it reduces the network traffic.

Page Views

We have two views for the graphs:

- “Default View” - screenshot “1a Zoom close up.png”.
- “Map View” - screenshot “2a Map view - zoom out.png”.

Default View Graph Nodes and Edges

- Graph Force algorithm :
- - By default should be on ownership links.
- - When applying filtering it should be changed based on selected attributes in the filter.
- Node :
- - Node represents a company entity.
- - Label of the node represents company name.
- - Node Color
  - - Each company in json will have color attribute, and node size attribute.
  - - Color of the nodes, like line thickness and node-size are dependent on the value of attributes of the node/line which is available in the JSON file. line type could represent type of relationship (TBR).
- - Hovering over a node will open a popup with information as in company-info.html prototype.
  - - Add configurable number of seconds to dismiss the company info popup on hover out.
- - Hovering over a node will make nodes that have no parent or child association with that node to have lower opacity value as shown in the design - “1b Zoom close up-company.png” screenshot. While the node and its associated parent or child nodes will have 100% opacity value.
- - Sticky Node :
  - - Sticky node is a node that has a fixed position and don’t move when dragging the graph.
  - - Users should be able to use shift+drag to make a node sticky.
  - - Users should be able to hold down on a node for a “configurable” number of seconds to make a node sticky.
  - - Sticky node circle style must match the design in “1d Zoom close up-sticky node.png” screenshot (see DONAR CLAXIE node).
- - Expand/Collapse parent node:
  - - Clicking on parent node will toggle the node collapse/expand state.
  - - When collapsing a node, all nodes depends on it (child nodes) will be hidden and the node will have a small circle with number on it that represents number of subnodes collapsed.
  - - In the footer bar we have two icons these represents collapse, and expand functionality, respectively. Clicking on them will expand/collapse all nodes to it’s parent nodes recursively.
- - Grouping nodes:
  - - Nodes can be grouped by selecting a characteristic in the group by field.
    - - Add a new dropdownlist UI in footer to be used to select the grouping attribute. By default no grouping is done.
  - - Graph grouping :
    - - Grouping can be done by any node attribute in the JSON file.
    - - Screenshot “1f Zoom close up-group.png” show how grouping is done by Industry.
  - - Listview grouping :
    - - Screenshot “1g Zoom close up-sorted group.png”
    - - The list view is triggered by clicking on icon
    - - Write a function that sort nodes by country then join the grouped nodes by collaboration.
- - Zooming in/out
  - - The slider at bottom bar is used to zoom the graph in/out, or by using mouse.
  - - Regrouping nodes by selected node attribute (see above) should be applied on zooming in/out, if no node attribute is selected for grouping, then it should be grouped by Industry by default.
  - - Use standard d3js zoom, pan.
  - - Selective names
    - - screenshot : 1h Zoomed out-Selective naming.png
    - - When the view is zoomed-out it will result in a lot of nodes being showed. It's not user friendly to show all the names for all the nodes, it will become unreadable.
    - - We think we can solve this problem implementing a Clustered force layout and showing label of the node with the most child nodes.
- - Timeline
  - - The timeline function is the player UI component at the center of the bottom bar.
  - - The timeline is used to show the financing events changes between nodes between the selected start/end years.
  - - When playing the timeline, each second represents one year.
  - - The dollar sign will be displayed on the edge collaboration circle. And it’s color changes based on the financing event changes.
    - - By default color is grey, this color indicates there is a financial event on that link.
    - - If financial events change occurred then color get changes to Yellow.
    - - When timeline playing is over, colors get set back to grey.
- - Eye bird’s view (minimap)
  - - Write a function to give users a minimap view of the graph.
  - - Clicking on icon at bottom bar will toggle the minimap visibility.
  - - Clicking within the minimap popup will move the nested rectangle to the clicking position.
  - - The function should be written in D3JS as it should reflect a real time view of the graph.
- Links
- - We have three link types:
  - - Collaboration link
    - - This is the dashed-line circle in the middle of the line.
    - - Collaboration edges have no direction.
  - - Financing Event link
    - - This is displayed on a dashed line.
    - - This is using the collaboration edge circle to display the financing information represented by the dollar ($) sign.
    - - The dollar sign is displayed if we have financial events in the json between two nodes.
    - - By default the graph will render financial events of current year.
      - - If there is a financing event happening on that edge, then the dollar sign color will be grey.
    - - Hovering over the dollar sign will replace it with a small popup detailing the financing events happened.
      - - You can use the initial design below as a starting point, use your best judgement for how it should look and feel
  - - Ownership link
    - - This is a solid line.
    - - Ownership edges have direction (A owns B does not equal B owns A).
    - - This is the circle with percentage in the provided design.
    - - The circle stroke/border is a visual representation of the percentage in the circle.
    - - All ownership information needed will taken from json.
    - - If there is a collaboration and ownership between same nodes, we use solid line styling while displaying two circles, one for collaboration value, and the other for ownership percentage.
    - - The initial design is placed below. There is an ownership and collaboration event between “Osaka” and “Bibus”.

Map View Nodes and Edges

- This view is used to display nodes using geographical visualization (grouped by location).
- Same as Default view, in a map view each node represents a company.
- Node styling
- - Since every family of companies has a color set, this indicates that in that location there are 2 or more families of companies (colors). The color of the node (the center) is reserved for the most present color of companies. It's a way to say "In this location the majorities of companies are blue".
- - The strokes/border colors indicate the presence of other families of companies. i.e. if we have two other families, family A presence is 20%, family B presence is 30% then 40% stroke will have family A color and rest will draw family B color.
- The node will be placed using geo-based information provided in the data.
- Use google maps API to get lang/lat of the node location on the map.
- We think using google maps is not simple to integrate with D3, and we might not be able to use same map style we have in the storyboard. It’s up to you to find an alternatives but good suggestion is http://leafletjs.com/.
- Nodes are always sticky in map view.
- Features listed in Default view will work same as here excluding the following as they won’t be supported in map view :
- - Grouping nodes : nodes by default are grouped by country and they are sticky nodes, so we cannot apply grouping here.
- - Timeline : we don’t have circle on edges in map view, so functionality won’t exist.
- - Sorted graph.

Node Counts

- The label at bottom bar = number of displayed nodes in display / total number of nodes.

Reset Control

The icon at bottom bar will reset the graph to its initial rendering with all searching/filtering/zooming are reset to default values.

Full Screen Feature

- Clicking on on bottom bar will switch view to full screen as implemented in the prototype.

Search Feature

- It searches nodes by name.
- The matching node will be centered in the graph with opacity level 100% along with its associated parent nodes while other nodes will have low opacity (same styling as done on Hover over).

Filtering Feature

Filtering popup will use to filter the graph :

- User can select multiple filter conditions.
- User can click (x) to remove a section.
- Grouping should be applied when applying filtering as in “1f Zoom close up-group.png”.
- Country Filtering
- - Country list should be auto complete.
- - User can add one or more countries.
- - Graph will be filtered to show only companies that located in the specified countries.
- Industry Filtering
- - This section needs some changes.
- - to/from should only accept digits, it allows filtering nodes by node code (check nodes sheet), the filtering applied in this case will find node code between to/from values.
- - Industry input field should be drop down field with list of predefined Industries.
  - - You can assume we have Industry json with codes map, code will look up code from json and filter nodes using the code.
- Financial Filtering
- - To/From field will be used to set years, but current one is set date which should be fine, you can take year from the selected date. The filter applied when selecting this one is to filter nodes that have financial events between start/end dates.
- - Financial Type i.e. Financing round 1, financing round 2, share emission .. etc.
- Line Thickness
- - This filters nodes by line thickness attribute.
- - The drop down list can be populated from available values in the json or you can set configurable low/high values.
- Box Size
- - This to filter nodes by size attribute.
- - The drop down list can be populated from available values in the json or you can set configurable low/high values.

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.

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.
- 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 preferred.

Javascript

- You must use D3JS library. And you can use any open source D3JS library.
- 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.
- Angular should not be used 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.

References

Final Submission Guidelines

Submission Guidelines

A complete list of deliverables can be viewed in the UI Prototype Competitions Tutorial.

Platform

HTML5

Technology

HTML
CSS
JavaScript

Agon - Company Relationships Visualization D3JS Module

Key Information