1
Programming Assignment 3
Visualization of Multi-Dimensional Data: Parallel Coordinates and Scatter Plot
Background
Multi-dimensional data is very popular nowadays. Visualization of multi-dimensional is still a current
issue. Right now, parallel coordinates are often used to present multi-dimensional data. However, in
data analysis, people often combine parallel coordinates with other view graphs, such as traditional X-Y
plots.
Objective
In this assignment, you will create two graphs in one web page: one parallel coordinates graph and one
X-Y scatter plot. Figure 1 gives an example of your result.
Figure 1: An example of programming result
The left side is the parallel coordinates, and sample codes will be provided and can be directly used for
the assignment. The right side is the scatter plot based on the same data set. You can choose any two
data dimensions. The example here is created with the “year” dimension in the dataset as the x axis and
the “power” dimension as the y axis.
The two graphs should be interactive. When the cursor is over a polyline on the left graph, the whole
polyline should be highlighted with a different color, as show in Figure 2. When the cursor is out, the
original color of the polyline should be restored. Similar behaviors should also be available for the X-Y
scatter plot (Figure 3).
Data
The data used to create the histogram can be found in cars.csv document under the folder of
\\up.ist.local\Courses\Spring2017\IST402\ProgrammingAssignmentDataSets\Assignment3_ParallelCoordinates\.
Download the data file and save it to your web space.
2
Figure 2: Highlight a polyline Figure 3: Highlight a dot
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)
� Overall layout of two view graphs (2 points)
• Two view graphs are next to each other horizontally. (1 point)
• The sizes of two graphs are similar. (1 point)
� Parallel coordinates view graph (4 points)
• Appropriate layout of parallel axes (2 points)
• Correct interactive behaviors (hightlight: 1 point; restore: 1 point)
� X-Y scatter plot (4 points)
• Appropriate x and y axes (labels: 1 point; axis positions: 1 point )
• Correct interactive behaviors (hightlight: 1 point; restore: 1 point)
Bonus (2 point): In addition to highlight the data when the cursor is over a dot or a polyline, try to
highlight the corresponding data polyline or data dot in the other view. This approach is very useful
because it makes multiple views coordinated. However, this is not easy to develop.
vagrant