已完成

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.

技能: CSS, Dthreejs, HTML, HTML5, Javascript

查看更多: model look hot, adding html template joomla, cartoon avatars look, convert hand draw illustrator, draw cartoon image illustrator, look table mysql, artist draw tattoo, adding visual basic script outlook, draw polygon google map fast, zen cart adding shipping charges, zencart modifying main php look image, html look, adding report php, corel draw visualization, looking for an illustrator to draw a couple characters of my c hildrens book where do i look, need architect to draw 10 x 12 trek deck plans, i want a drawing of my character done but i need an artist who i can tell what i want her to look like and they draw her for me

关于此雇主:
( 0个评论 ) Tempe, United States

项目ID: #18038372

授予:

salmansajid92

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 th 更多

$30 USD 在1天内
(2条评论)
1.4

4 威客就此工作平均出价 $28

superman1987417

Greetings. I'm a d3.js expert. After I read your job description I think I can build your chart perfectly based on my experience. I request you to look into my last d3 projects for reference. If you are interested 更多

$30USD 在1天里
(61条评论)
6.4
amitadlakha04

Hi Dear please find all my website mock up design here : website Mockup : [login to view URL] Recent Example of my HTML work and implementation into websites usi 更多

$25 USD 在11天内
(20条评论)
4.8
CaptainSaddaf

I’m React JS developer with vast experience in Redux, Flux, Node Js,Express Js, MongoDB,MySQL Bootstrap, Web Pack..I have good skills in JavaScript, JQuery, Html5, CSS, Bootstrap, BluePrintJs, Typescript, React, Micros 更多

$25USD 在1天里
(6条评论)
3.4