Description
1 Description
Figure 1: The result of assignment 3.
This assignment aims to help students get familiar with D3 (a data visualization 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.
(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 students 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 direction. 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
• SVG in D3
• Scale in D3
• Histogram in D3
• Brush in D3
• Q/A for brush in D3
• Data update in D3
3 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).
6) Submission (5pts). Please compress your code and a readme file (optional) 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.