d3

1 | 7

IT 452: Data and Information Visualization

Assignment 02 (160 points)
Question 1 (40 pts):

Unzip and open the provided code project a02_q1 with VS Code. Following the following screenshots to
create jason file and install express and nodemon libraries in the VS Code terminal.

You can use the following code as reference:
1. Add tooltip to bubble chart: https://d3-graph-gallery.com/bubble.html.
2. The color reference: https://englishgrammarhere.com/vocabulary/color-name-list-list-of-colors/.
3. Chapter 12 of D3 book.
4. The slide step is 1
5. Note: you may add code to index.html and a01_q1.js.

2 | 7

The following screenshots are the expected result: Fig. 1 (a) Initial screen, Fig. 1 (b) The mouse click can
be used to show information of the covered circle, Fig. 1 (c) and Fig. 1 (d): the bar with value between 35
and 85. When move the bar from 35 to 85, all the circles whose value is between the bar value will
become red (please watch the video a02_q1_video.mp4 as a reference).

3 | 7

4 | 7

Question 2 (40 pts):

Unzip and open the provided code project a02_q2 with VS Code. In the terminal, type “npm init” to
create the json file with name: a02_q2, description: IT 452 assignment 02: q2, author: your full name.
Then, install express: “npm install express”, next, install nodemon “npm install nodemon”.

You can use the relevant example code of week 2 and 3 as references.

The following screenshots are the expected result: Fig. 2 (a) Initial screen for 2020, Fig. 1 (b), (d), ( e ) are
screenshots for 2019, 2018, 2017, and 2016 respectively. Fig. 2(f) is screenshot for putting mouse on a
point to show the corresponding value. Please watch the video a02_q2_video.mp4 as a reference.

Note: you may add code to style.css, a02_q2.js, and linechart.js.

5 | 7

Question 3 (40 pts):

Unzip and open the provided code project a02_q3 with VS Code. In the terminal, type “npm init” to
create the json file with name: a02_q3, description: IT 452 assignment 02: q3, author: your full name.
Then, install express: “npm install express”, next, install nodemon “npm install nodemon”. Note: this
question, you can run in browser with “localhost:4000”.

The following links can be used as references:
1. “Connected Scatterplot”: https://d3-graph-gallery.com/connectedscatter.html
2. Selecting a subset of circles using D3: https://stackoverflow.com/questions/11926238/selecting-a-

subset-of-circles-using-d3
3. CSS color: https://www.w3schools.com/cssref/css_colors.asp

The following screenshots are the expected result. Fig.3(a) is the initial rendering result, and Fig. 3 (b)-(d)
are the combination of the two lines. Please watch the video a02_q3_video.mp4 as a reference. You
need to add code to index.html and a02_q3.js.

6 | 7

Question 4 (40 pts):

Unzip and open the provided code project a02_q4 with VS Code. In the terminal, type “npm init” to
create the json file with name: a02_q4, description: it 452 assignment 02: q4, author: your full name.
Then, install express: “npm install express”, next, install nodemon “npm install nodemon”. The following
link can be used as references: “Pie chart”: https://d3-graph-gallery.com/pie.html

The following screenshots are the expected results. Fig.4(a) is the initial rendering result of “Data 1”, and
Figs. 4 (b), (c), and (d) are the rendering results of “Data 2”, “Data 3” and “Data 4”, respectively. Please
watch the video a02_q4_video.mp4 as a reference.

You need to add code to index.html and a02_q4.js.

7 | 7

Requirement:

1. The answer sheet should include the assignment number and student name and ULID.
2. The answer sheet should include the screen shot of each of the required resulting images. Please

include the question number for each of the questions.
3. You need to submit the zipped whole project folder, in which all the files, so your code can be

tested on my computer.