程序代写代做代考 js Microsoft Word – ProgrammingAssignmentFour_Instructions.docx

Microsoft Word – ProgrammingAssignmentFour_Instructions.docx


 

Programming Assignment 4: Visualization of Hierarchical (Tree) Data 

 

Background 

Hierarchical data or tree data is one of the most popular data type in our life. Many hierarchical data 

visualization designs have been developed. Often seen tree visualization techniques include dendrogram 

(Figure 1a), treemap (Figure 1b), etc.  

                       

(a)                                                        (b)                                                             (c) 

Figure 1: Some often seen tree visualization designs 

Objective and Requirements 

In this assignment, you will use two tree‐visualization tools to visualize a given data set. The two 

visualization tools are dendrogram (https://bl.ocks.org/mbostock/4063570) and treemap 

(https://bl.ocks.org/mbostock/4063582). 

The data used for this assignment is about the sales data of a book store. The data can be found in the 

tree.docx document under the folder of  

\\up.ist.local\Courses\Spring2017\IST402\ProgrammingAssignmentDataSets\Assignment4_TreeVisualization  

The dendrogram graph should show the types of books in a 3‐level tree: genre, sub‐genre, and topic. 

The treemap graph should allow a user to choose how the size of a rectangle be decided: based on the 

number of books sold, or based on revenue.  

You are allowed to use the codes from these two pages for this assignment, but you need to format the 

data in ways that can be processed appropriately by each tool. The dendrogram tool requires data to be 

stored in a csv file, while the tree map tool requires the JSON format. Read the codes and data files 

carefully.  

Learning from other people’s codes is always recommended, but you need to understand what they did. 

Thus, in this assignment, you need to add comments to explain what each statement in the JS codes is 

about (statements are separated by empty lines). 

Delivery 

In the dropbox on CANVAS, submit the URL (if you put two graphs in one web page) or URLs (if you have 

two different web pages for two graphs) (my.up.ist.psu.edu/…..). Pay attention two things: 


 

 Make sure the URL/URLs works. 
 Your can work on your HTML document before the submission deadline. After the deadline, DO 

NOT touch the HTML document of your assignment anymore. Otherwise, the document will 

have a time stamp after the deadline. Any submission with a time stamp later than the deadline 

will not be treated as late submission, and will not be accepted.  

Grading rubrics (10 points total) 

 Dendrogram graph (5 points) 
• Correct visualization results (3 points) 
• Adequate comments (1 point) 
• Correct data format (csv) (1 point) 

 Treemap graph (5 points) 
• Correct visualization results (2 points) 
• Correct options for number and revenue 
• Correct data format (JSON) (1 point) 

Bonus (2 points):  

1 Point: Use a drop‐down menu or a radio button on a web page so that users can decide which graph 

between these two to see on the web page. Each time, only one graph should be visible. 

1 Point: Modify the treemap codes so that moving the cursor over a rectangle will show the number 

corresponding to the choice of the radio buttons.