Challenge Overview
Welcome to GE Risk MVP - Create Angularjs Directive contest. As part of this contest, you need to create an Angularjs directive for a scatter plot.
Contest Details
Create an Angularjs directive that allows us to create a scatterplot. It should be a 4 quadrant scatter plot.It should have the following features (basically the scope property to allow the developer to pass values to the directive)
1. Ability to specify the nodes that show up on the scatter plot
2. Ability to move nodes that are visible on the scatter plot
3. Ability to specify the size of the node. Up to 10 sizes from 1 to 10 need to be supported. As the value increases, the node’s radius increases.
4. Ability to specify the color of the node
5. Ability to add a label to the node not exceeding 3 characters. The node label should show up on the node itself, within the circle and not next to it.
6. Ability to show / hide grids on the scatter plot - it should be possible to show / hide the grid control itself too. As in, let us specify if we need to show the checkbox to toggle grid show / hide as well as provide the feature where if the checkbox is shown, we can show / hide the grid.
7. Ability to add a comment to a node’s movement when the node is moved.
8. We will be creating multiple charts, each having the same category of nodes. There will not be more than one node of the same category per chart. Thus, when multiple charts are provided, you still need to display only one chart, where a node’s location in that chart is determined by aggregating the node’s locations in the individual charts.
9. Ability to have a read-only mode where the node cannot be moved
Additionally, there will be a scenario where we need to show the history of a node. In such a scenario, you need to provide:
1. Ability to add a comment to a node’s movement when the node is moved. Node’s movement here would be displaying the node at its old location, displaying the node at its new location and then being able to click on the line that connects the two locations to comment on the movement. The old and new node locations basically symbolize the node’s history. Note that for each movement, we should be able to associate a comment.
2. Ability to filter nodes. The nodes supplied will be categorized and it should be possible to view a specific node’s history. That is, only one node’s history can be seen at a time.
You need to use Angularjs v1 and D3js v4. Wrap the scatter plot written in D3js as an Angularjs directive. The directive should be able to render the chart within the container in which it is added. That is, the scatter plot will take on the width and height of its container. In other words, the scatter plot is expected to be responsive. Additionally, submit a file describing the data structure expected by the directive when rendering the nodes, history, comments and multiple charts in one graph