CP321-Website Design Solved

Tools/Software Requirement 

•      An IDE for writing HTML and JavaScript Code 

•      You need to use D3.js for writing your code to generate visualizations. Do not use any other library for creating 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: 

Use the task1.json dataset for this task. Your assignment might be checked with a different dataset with a similar structure. That dataset can have more or less records that this one. Your program should work for any dataset with a similar structure.

 

The dataset contains record of student marks in 5 subjects.  

 

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

2.   Use the pack chart to display students records. [1]  

3.   There is one big circle (root circle) that encompasses the rest of the visualization. [1]

4.   The root circle contains multiple circles, each corresponding to one student (student circle). [1]

5.   Each student circle contains 5 circles (subject circles), corresponding to the marks of that student in each of the 5 subjects. [2]

6.   Use legends and / or axis etc. for the user to recognize students and subjects in the visualization. [2]

7.   The colour of the subject circle is set relative to the student marks. [1]

8.   Use legend and / or axis etc. so that the user can map the colour of the student circle to marks.

9.   Provide a button that the user can use to remove the literature “LIT” from the visualization. This way only the technical subjects will be visible in the visualization. [1]  

 

 

Data Visualization                                                                                                                                                                                         Page 1 

 

Task 2: 

Use the task2.json dataset for this task. Your assignment might be checked with a different dataset with a similar structure. That dataset can have more or less records that this one. Your program should work for any dataset with a similar structure.

 

The dataset contains details about four folders on a hard disk.

 

 You are open to use a visualization of your choice in this task but you cannot use bar plots, pie charts or pack chart.

 

The user is interested in the following information and your visualization should provide it to the user in an efficient manner:

 

1.  Which folders exist under the root folder? [1] 

2.  How many files exists in each of the folders? [1] 

3.  What is the extension of various files? (User is not interested in file names) [1] 

4.  What is the relative size of the individual files? [1] 

5.  What is the relative size of the folders? [1] 

6.  What is the name of the folders? [1] 

7.  Which files have an mp4 or mp3 extensions? [1] 

Include a paragraph under your visualization as a caption to help marker read the visualization.