CP321 Assignment 1 Solved

CP321  Assignment 1

Tools/Software Requirement

• AnIDEforwritingHTMLandJavaScriptCode
• YouneedtouseD3.jsforwritingyourcodetogenerate

       visualizations.
  

• Youcannotusevisualdesigntoolsforcreatingthewebpages.
• ThisassignmentmayrequiresomeD3/JavaScriptconceptsthatarenot

  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.

• Theassignmentconsistsoftwotasks. 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 500×500. [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 y-

     axis 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 500×500 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]
   1. Initials of the content creators.
   2. duration.
   3. average rating
   4. axis to help user read the plot
   5. 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.

Submission Details

1. Name your HTML file: index.html. [1]
2. Include a copy of d3.min.js with your folder or use a link to

   d3.min.js on the web. [1]

3. Your project should be ready to execute without any modifications.

   [1]

4. Place your project in a folder: FIRSTNAME_STUDENTNUMBER_A1 [1]
5. Compress the folder into a zip file. Please make sure that your

   folder is appropriately named (See step 4 above) before creating the

   zip file. Do not rename the zip file after creating it. [1]

6. Upload the zip file in the appropriate dropbox on MLS.
7. Check dropbox for due date.