In Figure I, we show a visualization chart. Please state at least two
limitations of this visual encoding and propose interaction technique(s)
to address at least one limitation vou identified above. (You do not need
to sketch it, describe it in words.) (7 points)
Copyright By PowCoder代写 加微信 powcoder
2. What are the common use cases for the React.useMemo? Also. provide
an example to demonstrate its cases. (8 points)
3. Which lifecvele method(s) of class component is replaced bv useEffect
in a functional component? (10 points)
What are the human errors in the HCI svstem? How can designers
prevent and reduce these errors? (6 points)
5. What is A/B testing? How is it used in system evaluation? (5 points)
What is the process in user experience design? (4 points)
Programming question (60 points)
There are four programming questions. Each one is 20 points. You only
need to answer three.
1. As shown in Figure 2(a), we have a focus and context bar chart. You
are asked to complete the following items using D3 and JavaScript:
Define a brush variable using d3brushX. (4 points)
Implement a function called brushed where the focus view will be
updated when users brush in the context view. An example is
displayed in Figure 2(b). (16 points)
You can use some predefined variables (i.e.., Width, FocusHeight. Con-
text Height, «FocusScale, yFocusScale, *ContextScale, ContextScale,
and bins) The D3 version is 5
Focus View
Focus View
Context Vien
(a) Focus+Context bar chart
(b) Brushing action
Figure 2: An illustration of programming question 1
Context View
As shown in Figure 3, You are asked to complete a game interface and
its interactions using React functional component. The rule of the
game is defined as if the ball does not hit the paddle on the bottom
the game ends; if the ball hits one brick shown on the top, the user
will receive one score, and the ball continues to move (for simplicity.
each time, a random direction will be assigned to the ball after hitting
Define necessary state(s). (4 points)
Add event (s) that allow users to control the paddle using the left
and right keys. (5 points)
Use useEffect method(s) to judge whether the game continues or
ends. (11 points)
If you use a class component, you will receive zero point
(a) Intialization
(b) Ball Moves
Figure 3: An illustration of programming question 2.
3. As shown in Figure A (a), we have a scatter chart. In addition, we have
defined a brush variable using d3.brush in the scatter plot. We add two
functions into the brush variable, namely, selectcricle function triggered
by “start end” and movecricle function triggered by “brush’. Now vou
are asked to complete these two functions using D3 and JavaScript:
Implement selectcircle function where users can select a rectan-
gle region by brushing, and all points in the brushed region are
detected, as shown in Figure 1 (b). (4 points)
Implement movecircle function where users can utilize a mouse to
move the points in the selected region to another place, as shown
in Figure 1 (c). (16 points)
Note that no additional libraries are imported. You can use some pre.
defined variables (i.e.. «Scale. Scale, Value. Value, circle, and data)
The D3 version is 5
4. As sketched in Figure 5. vou are asked to develop a three-in-a-row
game using React class component. The rule of three-in-a-row is
that Plaver1 or Plaver2 Wins If Thev can enter the same 3 Marks in
a Row/Column/Diagonal. Each square is defined by one div tag. You
are required to complete the following three items:
Define necessary state(s). (4 points)
Write a draw function that can draw “X” or
“O’ based on the
player’s turn. The draw function is triggered by OnClick on div
tag. (5 points)
Use class life cycle method(s) to judge whether the game will
continue, end, or tie. (11 points)
If you use a functional component, you will receive zero point
Plaver1: X
Player 2: 0
1Plaver 1: X
| Plaver 2: 0
| Player 1: X]
Player 2: 0
(a) Initial state
(b) Plav «X” or “O”
(c) Game ends
程序代写 CS代考 加微信: powcoder QQ: 1823890830 Email: powcoder@163.com