CSC4130 Assignment 3 Solved

    • Description


































Figure 1: The result of assignment 3.

This assignment aims to help students get familiar with D3 (a data vi-sualization and interaction library) and how to use this library to visualize data and build interactive data visualization interface.

In this assignment, you are asked to design an interface that can achieve the following goals.

1


























(a) Select region by brushing    (b) Visualization updates

Figure 2: Brushing and linking actions in the designed interface. (a) Users use brush action to select a region highlighted by red and (b) the chart updates the visualization result based on the brushing region.


    • Visualize data using a bar plot, as shown in Figure 1. Note that stu-dents can select the color by themselves. For example, rectangles can be visualized as green, blue, or red.

    • Uses can use brush action (i.e., mouse press, move, and release) to select a region. A selected region by brushing is shown in Figure 2(a). Note that the bounding box of the selected region can be either drawn or not drawn.

    • After brushing, the visualization chart will be updated and will only display the bar chart in the selected region, as shown in 2(b). Note that, after updating the visualization chart, the x-axis and y-axis should also be updated.









2





    • Requirement

        ◦ Select HTML tag with a specific id “bar”, 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 x-axis and y-axis.

        ◦ Create a brush action.

        ◦ Use D3 to generate a histogram and draw a bar chart.

        ◦ Implement brushed function.

Implementation Hints

    • To create scales, you should create two scales for the x-axis. One is a copy for the x-scale; otherwise, you will not achieve the same result shown in Figure 2(b).

    • Note that although the brushing action is performed by mouse press, move, and release, in D3, you can call the brush function for performing the brushing action. An example can be found at Focus+Context.

    • In this assignment, users can only select regions along the x-axis direc-tion. Therefore, d3.brushX should be used.

    • To filter data after brushing, the filter() function can be applied.

    • To detect whether brush is performed, we can check d3.event.selection. If the action is triggered, d3.event.selection will store the corresponding starting and ending pixel values on the screen, which can be used to filter bins.

    • To reduce the difficulty of this assignment, you are not required to implement multiple brushes. Namely, users can only brush the bar chart once.

    • Since we have two xScales, you need to think about when we should use xScale1 and when we to use xScale2 in the brushed function.

Online Resources

3





    • SVG in D3

    • Scale in D3

    • Histogram in D3

    • Brush in D3

    • Q/A for brush in D3

    • Data update in D3


    • Evaluation

In total, there are 100 points in this assignment. A detailed evaluation is provided here.

    1) Select HTML tag with a specific id “bar”, add a SVG container, and set the corresponding attributes (e.g., width and height). Then, add a group and make a translation.(5pts)

    2) Create scales for x-axis and y-axis. (15pts)

    3) Create a brush action. (5pts)

    4) Use D3 to generate and draw a histogram. (28pts)

    • In updateVis, use d3.histogram to create a histogram variable (5pts).

    • In updateVis, use the histogram variable to generate bins (5pts).

    • In updateVis, set the domain range for the x and y-axis (8pts).

    • In renderVis, draw the bar chart from the generated bins (10pts).

5) Implement brushed function. (42pts)

    • Convert given pixel coordinates into a value range (10pts).

    • Update x-axis accordingly (6pts).

    • Based on the selected region to filter the bins (10pts).

    • Redraw the bar chart (10pts).

    • Update y-axis accordingly (6pts).

4





    6) Submission (5pts). Please compress your code and a readme file (op-tional) into a zip file and submit the zip file to OneDrive. The readme file can include descriptions that help the instructor run the interface successfully.

Note that a penalty of 10 pts will be given to those students who submit the assignment between Nov 16 at 12:00 AM and Nov 16 at 11:59 PM. A penalty of 20 pts will be given to those students who submit the assignment between Nov 17 at 12:00 AM and Nov 17 at 11:59 PM. Submissions after Nov 18 at 12:00 AM will not be graded.













































5