Visualization with d3js

You will code your own Reingold Tilford Tidy Tree Layout and corresponding visualization in Javascript with d3js. Use the d3js version 5 library and no other. Do not use tree layout built into d3js. Copy [login to view URL], [login to view URL], [login to view URL], and [login to view URL] from the HA4 directory. Do not modify HA4.css. You will modify HA4.js. Do not remove existing code from [login to view URL] unless the comments suggest you may. In [login to view URL] there is a single array of JSON objects called tests. Each object in tests has a member called nodes which is an array of objects that each contains and id as well as the id of its left and right child (which may be null). The value of id matches the object's position in the array. These values describe a binary tree. You will alter these graph objects by adding code to the functions _RT, _findSubtreeOffset, _shiftSubtreeXValues, and _setContours in the function calculateGraphLayout. The code should add x and y values of the nodes using the Reingold Tilford Tidy Tree Layout as discussed in class. You may also refer to the original paper [login to view URL] More information about each of these functions and what they should do can be found in HA4.js. Note that rather than using the spare left and right pointers to describe the contours, this assignment creates explicit left_contour and right_contour members of each node to hold the IDs of its left and right contours at the next depth. You will also add code to the _update function in graphView. This function should use the d3js General Update Pattern to draw the nodes and links. These marks should be styled using the node and link classes in HA4.css. Add an SVG title element to each node stating its node.id. Each part of the General Update Pattern should use the given d3 transition t to create the following animations: Entering nodes should grow from radius 0 to radius 8. Updating nodes should have animated movement between positions Exiting nodes should shrink from radius 8 to radius 0. Entering links should fade in using stroke-opacity. Updating links should have animated movement between positions Exiting links should fade out using stroke-opacity. The finished visualization should look as below.