程序代写代做代考 Java javascript Microsoft Word – ProgrammingAssignmentTwo_Instructions.docx

Microsoft Word – ProgrammingAssignmentTwo_Instructions.docx

1 
 

Programming Assignment 2  

Interactive Histograms with D3.js 

Background 

Histogram is one of the most used graphs in data analysis. It helps me to see the distribution of data. 

Almost all visualization systems include histogram tools.  

Objective 

In this assignment, you will build an interactive histogram tool. Figure 1 shows what your histogram 

should look like: 

Figure 1: An example of Histogram 

The histogram should include the following 

 x‐axis and text labels 
 y‐axis and numerical labels 
 while space between bars 

Usually, histogram tools are interactive, and allows users to manipulate data or the presentation of data. 

In this assignment, you are required to provide one simple function: interactive sorting.  

The goal is simple: users can click the two ends of both axes to sort the histogram: 

 Clicking any place left to the Y axis to sort the histogram with an ascending/a descending order 
on the Y value. Clicking the left of the Y axis again to reverse the order.  

 Clicking any place below the X axis to sort the histogram with an ascending/a descending order 
on the X value. Clicking below the X axis is reverse the order.  

The animated GIF found here shows what the expected result should look like: 

http://zhang.ist.psu.edu/teaching/402/Assignments/HistogramResult.gif 

2 
 

Data 

The data used to create the histogram can be found in histogramdata.tsv document under the folder of 
\up.ist.localCoursesSpring2017IST402ProgrammingAssignmentDataSetsAssignment2_Histogram. Download 

the datafile and save it to your web space.  

Delivery 

In the dropbox on CANVAS, submit the URL to the web page on your web space (my.up.ist.psu.edu/…..). 

Pay attention two things: 

 Make sure the URL 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) 

 Histogram will all required components (6 points) 
• Bars (3 points): correct heights (1), filled color (1), correct positions (1) 
• Space between bars (1 point) 
• Axes (1 point) and Axis labels (1 point) 

 Interactivity (3 points) 
• Correct sorting results (2 points, 0.5 each) 
• Correct mouse clicking locations (1 point) 

 Sufficient comments for JavaScript statements (1 point) 

Bonus (1 point): adding tool tip to each bar so that users can see both x and y values when mouse is 

over a bar.