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 make improvement and fixes to the d3js force-layout view.

Challenge Requirements

We have two views, d3js force layout-view and d3js map view, we are fixing the force layout view in this challenge.

You will address the following :

Issue #1

Rendering node size and collaboration line/edge thickness :

- We have line thickness and box size in the popup. Update line thickness and box size drop downs to list node/link characteristics, these characteristics will be used to calculate line thickness and box sizes of nodes/edges instead of using attributes in json to set the thickness and node size.

- The logic should calculate the min characteristic value (assuming 1) and the max, then step the the line thickness between values. same thing to be applied for node size.

- We need a default characteristics by default when rendering the graph. These should be selected in the drop downs by default.

Issue #2

Node colors :

- Update the logic to determine colors in frontend instead reading it from json file.

- This change requires adding new drop down to filtering popup “Colors nodes by”, the drop down will list all node/line characteristics to be used to color nodes.

- The logic will use a random color generator to color nodes based on the characteristics selected, same as done in line thickness and box sizes, we will group values and then generate a color for each group.

- We also need to use default characteristics to be used for coloring the nodes when rendering the graph. It should be selected in the drop down by default.

Issue #3

Add collaboration to the grouping drop down in the filter popup and implement grouping nodes by collaboration.

Issue #4

When grouping nodes by specific characteristics we need to show the connections between the gray areas as edges, i.e. if grouped by industry, total deal value between manufacturing and wholesale. We don’t have json attribute for deal value, so for now, add new attribute “industry_deals” in the json, it will have following attributes :

- obj_1 : this reference industry identifier

- obj_2 : this also reference the other industry identifier

- value : this represents the value between the two industries.

- So when grouping by industry we can see the deal value between the two industries gray areas as edge with a marker that render the deal value.

- The solution should be generic, so in future we can add same concept when grouping by country or other characteristics.

Issue #5

When hovering over a node only the subsidiary edges and the corresponding nodes highlight. We want to to highlight the nodes with collaborations as well.

Issue #6

We have white $ marker for the events edges, this seems to be a bug, the colors should be always gray, it will become yellow when we play the timeline and it will get back to gray color when timeline is done.

Issue #7

Timeline :

- Current logic is showing financing events between nodes.

- Update the logic to include (hide/show) collaborations and ownership relations changes between nodes. You will have to add date field to ownership data.

- You will update the data to set “year” field, the field value is provided in the client excel sheet.

Issue #8

Remove the sort nodes button   from footer from both force-layout view and map view.

Gitlab Setup

- Use this tool to get access https://tc-ragnar.herokuapp.com/ragnar/groups/564783092789620e00fa75d1/291490

- Search for your username and click (+) next to your username result, you will receive email that you get added to the repo.

- Once added to the team, fork the repository and work off this branch https://gitlab.com/company-owner-viz/module/tree/30052515

Browser Compatibility

- IE10+ (this is the main client browser)

- Latest Google Chrome (Windows & Mac OS)

- Latest Safari (Windows & Mac OS)

- Latest Firefox (Windows & Mac OS)

Reference

D3JS Official website

Final Submission Guidelines

Submission

- Upload documentation for how to run your submission

- Upload your solution as git patch in zip file with text note file to reviewers.

- Add elkhawajah as a member of your forked repository

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