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.local\Courses\Spring2017\IST402\ProgrammingAssignmentDataSets\Assignment2_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.