1 Description
Figure 1: The result of assignment 1.
This assignment aims to help students get familiar with HTML, CSS, and JavaScript. In addition, students will use D3 to visualize data and build basic interactivity.
(a) Stacked bar chart (b) Sorted stacked bar chart
Figure 2: Visual results of stacked bar chart (a) and sorted stacked bar chart
(b).
In this assignment, you are asked to produce the following visualization results.
• Support three different visualization options for users to visualize data,
i.e., bar chart, stacked bar chart, and sorted stacked bar chart.
• When users choose “Bar Chart”, the data are visualized by a bar chart, as shown in Figure 1. In addition, the x-axis and y-axis should also be displayed. Note that students can select the color by themselves. For example, rectangles can be visualized as green, blue, or red. • When users choose “Stacked Bar Chart”, the data are visualized by a stacked bar chart, as shown in Figure 2 (a). Note that, a legend should also be shown so that the users know the relationship between the color and the category. The color map can be chosen by the students themselves.
• When users choose “Sorted Stacked Bar Chart”, the stacked bar chart will be sorted by the total population, as shown in Figure 2 (b). Note that the order can either ascend or descend.
2 Requirement
• Define a drop-down list to provide three different visual options.
• Compute the total population from the different population categories. • Select the HTML tag, add a SVG container, and set the corresponding attributes (e.g., width and height). Then, add a group and make a translation.
• Create scales for the x-axis and y-axis.
• Create the x-axis and y-axis.
• Use D3 to generate bars and stacked bars.
• Sort data.
• Visualize data based on the input option.
There are three items that you need to pay attention to:
• When computing the total population, you are asked to use an array operation to finish, i.e., the sum() function. Without using this function, you will receive 0 points for this part.
• Note that, once the visual form switches to “Bar Chart” from “Stacked Bar Chart” or “Sorted Stacked Bar Chart”, the color legend will disappear. This is because, in the bar chart, there is only one color. • Use the sort() function in an array to sort data based on one attribute,
i.e., total population.
Online Resources The following online resources will be helpful in finishing this assignment.
• SVG in D3
• Scale in D3
• Histogram in D3
• Stacked bar chart
• Data update in D3
• Legend in D3
You are not required to use the provided template to complete this assignment. For example, you can use TypeScript as the programming language. Other programming languages, such as Python or R, are not allowed. However, you need to meet all the requirements mentioned above. In submission, ensure you offer detailed instructions so the grader knows how to produce your results successfully.
3 Evaluation
In total, there are 100 points in this assignment. A detailed evaluation is provided here.
1. Define a drop-down list to provide three different visual options. (5pts)
2. Compute the total population from the different population categories.(10pts)
3. Select the HTML tag, add a SVG container, and set the correspondingattributes (e.g., width and height). Then, add a group and make a translation.(5pts)
4. Create scales for the x-axis and y-axis. (10pts)
5. Create the x-axis and y-axis. (10pts) 6. Use D3 to generate bars and stacked bars (20pts).
7. Sort data (10 pts).
8. Visualize data and add legend based on the input option (25pts).
