Challenge Overview

Welcome to the Agon Company Relationship Visualization D3JS Code Challenge Part 2!

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 prototype to implement the D3.js map view as outlined below.

Challenge Requirements

You are addressing the following in this challenge.

HTML5 UI Prototype

You are provided with a UI prototype with force layout graph implemented. You will use it as basis for your work.

By default the force layout graph is displayed, clicking on the earth icon on footer bar will switch to render the graph in Map View.

JS Libraries

• - You’re mainly going to write Javascript code using D3JS library in this challenge.

• - You are free to use any open source library that helps you address the requirement.

Data Structure

The UI prototype includes a sample json file used by the force-layout graph view, you will need to reuse that one for the map view, you are expected to add more attributes to the nodes and links, or adding new objects if required to address the map view requirements.

Also you are provided in challenge forums with an Excel Sheet with sample data we used to build the sample json file :

1. Nodes sheet represents the graph nodes, it contains company attributes.

2. Parent-Child sheet represents the ownership relationship (links), first column represents the child, second column is the parent (parent owns child).

3. Finance Event sheet used to render finance events when running timeline, we don’t have these information in current json sample file so you are making modifications to add this information.

4. R&D collaboration sheet represents the collaboration relationship (links) between companies.

Map View Nodes and Links

• - This view is used to display nodes using geographical visualization (grouped by location).

• - Same as Force-layout graph view, in a map view each node represents a company. (this is not correct, read below)

• - 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 label associated with the node is the largest company in term of size of partnership.

• - The node will be placed using geo-based information provided in the data.

• - Hovering over a node will open a popup with information as done force-layout graph but this time it will show all companies grouped in the node.

  • - You can reorganize data in the popup or make it scrollable to scroll through all companies in the node.

• - Hovering over a node will make nodes that have no parent or child association with that node to have to fade out by having a lower opacity value as shown in the design “1b Zoom close up-company.png” screenshot, while the node and its associated parent and child nodes will have 100% opacity value.

• - Dragging node/graph is not supported in map view because nodes are sticky. But dragging the Map is required.

• - Use google geocoding 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.

• - Links will work exactly as it is currently done in force layout view

  • - Refer to previous challenge specification to understand how links work.

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

• - Expand/Collapse parent node:

  • - This is implemented in force layout graph view.

  • - Clicking on parent node will toggle the node collapse/expand state.

  • - When collapsing a node, all nodes depends on it (child nodes) will hide, the clicked parent node will have a small circle with number on it that represents number of subnodes collapsed.

    • - Expanding/Collapsing a parent node should not expand/collapse parent nodes that are child of that node.

  • - In the bottom 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.

• Zooming in/out

  • - This is implemented in force layout graph view but currently broken. (Ignore this point).

  • - The slider at bottom bar is used to zoom the graph in/out, or by using mouse.

  • - Use standard d3js zoom/pan features.

• - Timeline

  • - It is currently implemented in force layout graph view, and you will duplicate the functionality in map view.

  • - 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 path 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)

  • - Currently implemented in force layout view.

  • - Write a function to give users a minimap view of the graph.

  • - Clicking on icon at bottom bar will toggle the minimap popup 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.

Node Counts

• - Currently not working in force-layout graph.

• - The label at bottom bar = number of displayed nodes in user view / 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.

• - Filtering should be applied when applying filtering as in “1f Zoom close up-group.png”.

• - The filtering will basically hide nodes that don’t match the filtering criteria.

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

IE Browsers and Performance

A major requirement in this challenge is to get the map view and all outlined functionality to work on IE11+ browsers with the provided sample data with great performance.

Documents

Provided in challenge forums : HTML5 UI prototype, Design files, and excel sheet.

Gitlab Setup

• - Request access to the Gitlab repo group here http://tc-ragnar.herokuapp.com/ragnar/groups/5613f730d601610e000f21bd/291490, by posting on the forums, or emailing elkhawaja at gmail.com

• - Once added to the team, fork the repository and work off https://gitlab.com/company-owner-viz/module/tree/30051707_graph_part_2

Browser Compatibility

• - IE10+

• - Latest Google Chrome (Windows & Mac OS)

• - Latest Safari (Windows & Mac OS)

• - Latest Firefox (Windows & Mac OS)

Reference

• - D3JS Official website

 

 

 

 

 

Final Submission Guidelines

Submission

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

• - Upload documentation for how to run your submission

• - Upload all your source code as a zip

• - Add jcori and elkhawajah as a member of your forked repository

• - Winner will be required to submit a merge request on gitlab against the branch specified