Find Jobs
Hire Freelancers

Visualization with d3js

$10-30 USD

Completed
Posted over 5 years ago

$10-30 USD

Paid on delivery
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.
Project ID: 18038372

About the project

2 proposals
Remote project
Active 5 yrs ago

Looking to make some money?

Benefits of bidding on Freelancer

Set your budget and timeframe
Get paid for your work
Outline your proposal
It's free to sign up and bid on jobs
Awarded to:
User Avatar
I did a lot of work with d3, I have 3 years of working experience with dashboarding of machine learning and statistical work. [login to view URL] Please see the above link,I am working on it today. It has the big data project. I am using d3 force layout using d4 v4. I can do your work. please ping me for assurance. Thanks
$30 USD in 1 day
4.8 (5 reviews)
2.6
2.6

About the client

Flag of UNITED STATES
tempe, United States
4.6
1
Payment method verified
Member since Oct 20, 2018

Client Verification

Other jobs from this client

D3 Brush Implementation
$10-30 USD
Thanks! We’ve emailed you a link to claim your free credit.
Something went wrong while sending your email. Please try again.
Registered Users Total Jobs Posted
Freelancer ® is a registered Trademark of Freelancer Technology Pty Limited (ACN 142 189 759)
Copyright © 2024 Freelancer Technology Pty Limited (ACN 142 189 759)
Loading preview
Permission granted for Geolocation.
Your login session has expired and you have been logged out. Please log in again.