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 web application.

Challenge Requirements

We have two views, d3js force layout-view and d3js map view, we are making fixes and improvements to these views.

You will address the following :

Issue#1

On mouseover of a node, the graph should highlight all nodes belonging to the same company parent as the pointed node.

Issue#2

On mouseover of an edge node there should be a popup showing the edge label, and other useful attributes of that edge. The Popup UI style can be similar to the one we are using when hovering over a node.

Issue#3

On mouseover of an edge, the graph should highlight the edge and the two nodes belonging to the edge.

Issue#4

When aggregating % ownership of an edge, the collaboration edges should aggregate simultaneously.

Issue#5

Add option to only label the important nodes (f.e. : in top 10 of revenue) if there are too many nodes.

Item#6

It should be possible to generate a ‘heat map’ to indicate the intensity of continuous numeric measures. i.e. The color of a node is based on a numeric variable, the color scheme could go from red to green or so.

Issue#7

Add the functionality to timeline that the edges and nodes (dis)appear when the ownership relations are created over time.

Issue#8

In map view show how companies related to a specific company geo-distributed over the world when hovering over a company.

Also add a filter option to select company to filter the map to show that company and related companies geo-distributed over the world.

Issue#10

How did the network structure of a company evolve over time?

Add functionality to timeline play that only allow showing how specific company (or companies) evolve over time.

This can be done by adding a filter option to select two or more companies to be only included in the timeline play.

Issue#11

Add custom Events to be fired on user interactions, having node/edge-information in the details. This will be used by other applications to track events and add handlers to them.

Add events for all interactions with the map (including search/filter), add demo handlers that print to console that event was fired.

Issue#12

The position of the nodes should be determined by the graph-object through a variety of algorithms, such as force layout.

We need you to refactor current code to use callbacks or interface that allows to inject different algorithms when needed. App can have a drop down to switch between algorithms.

Issue#13

It is currently impossible to see the direction and makes it hard to collapse/expand nodes according to acyclical/directed-edges (parent/child relationships). We need to show that styling.

Issue#14

Add filter option to show the top N companies for a specific attribute (i.e. Revenue, profit, number of employees, etc.)

Issue#15

What companies are central in the graph, given a measure? There is no way to set the edge type to use in the force algorithm. i.e if we group by country can we still select how the nodes in the same group be forced-layout by a second attribute i.e. ownership/collaboration, so that the strong nodes comes in center of that group ?

Issue #16

We need clear documentation about the structure of the json file that load data.

Currently we have data store interface with one store implemented (for the given data files in this project), but it is not simple to understand what these attributes represent to be able to easily build a new store for other types of data.

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/30053238-code

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.