CP321-Assignment 1 Solved

Assignment 1 Tools/Software Requirement 

•      An IDE for writing HTML and JavaScript Code 

•      You need to use D3.js for writing your code to generate visualizations. 

•      You cannot use visual design tools for creating the webpages.  

•      This assignment may require some D3/JavaScript concepts that are not covered in the class. Students are expected to research those topics on their own and use them to complete the assignment. Self-learning will be a goal for all the assignments and the project in this course.  

•      The assignment consists of two tasks. 

Task 1: 

The following list contains students marks:  

[{Student: 1, marks: 6}, { Student: 2, marks: 100}, { Student: 3, marks: 90}, { Student: 4, marks: 55}, { Student: 5, marks: 83}, { Student: 6, marks: 88}, { Student: 7, marks: 91}, { Student: 8, marks: 92}, { Student: 9, marks: 67}, { Student: 10, marks: 73}] 

 

1.   Clean and correct the data (if necessary) and load it in your program for visualization. You do not need to have this data in a separate file.

2.   Create an svg element of size 500x500. [1]

3.   Sort the data in ascending order using marks property. [1]  

4.   Plot the data using a horizontal bar plot. Student number on the yaxis and marks on the x-axis. [1]

5.   Provide a widget (button, radio button etc.) using which the user can remove the three bars representing students with least marks from the graph. [1]

6.   Provide a widget that the user can use to go back to viewing all the students on the bar plot. [1]

7.   Draw a custom axis that shows the student number on the y-axis. [1]

8.   Draw a custom axis that shows marks on the x-axis. It has 10 ticks and the length of the ticks is equal to the height of the canvas. [1]

9.   No bar representing the data should be touching any edge of the svg canvas. [1]  

10. Your visualization should be easy to understand without ambiguity.

[1]  

 


Data Visualization                                                                                                                                                                                         Page 1 

 
 

Task 2: 

1.   Download Kaggle-modified-Suddharshan.csv from the MLS. It is a shorter version of the dataset posted on Kaggle by Suddharshan. The following columns  exist in the dataset:

name of the course, price, course description, content creator, average rating, course duration 

 

2.   Clean and correct the dataset if required. You cannot delete any column but you can modify the contents of a column to meet your specific needs.  

3.   Create an svg canvas of size 500x500 and upload the data to your program. [1]

4.   We are interested to see the correlation between the duration of the course and its average rating.

5.   Draw an appropriate scatterplot containing. [5]

a.  Initials of the content creators.

b.  duration.

c.  average rating

d.  axis to help user read the plot

e.  The radius of the circles used in the bar plot is 5

f.  No circle is touching the edges of the canvas or outside the canvas.

g.  Draw a grid on the plot to assist user in reading the plot.