Submit Assignment 6 Force-Directed digram | Gradescope
 1/10
0/4 Questions Answered
 Submit Assignment 6 Force-Directed digram | Gradescope
 2/10
Assignment 6 Force-Directed digram
 Submit Assignment 6 Force-Directed digram | Gradescope
 3/10
Q1 Bubble chart showing the hubs of airlines
100 Points
In this assignment, you will build a bubble chart into the work
you have completed in Assignment 5. We use the bubble chart
to answer the following questions:
Which cities are the hubs worldwide?
Which cities are the hubs of an airline?
The visualization looks like the screenshot below:
(You may visit this link: https://infovis?assignments.vercel.app/assignment6)
You should put all your code in the Assignment6/student code/
(available here). The following files are given, and they are the
sample solution of Assignment 5,
assignment6_student.js : the file wraps up all React components of
the visualization.
airportMap.js : the React components for the map.
barChart.js : the component for the bar chart.
utils.js : it contains several data processing functions, e.g.,
groupByAirline, and groupByAirport;
axes.js , routes.js , and assignment6_styles.module.css ;
Note:
 Submit Assignment 6 Force-Directed digram | Gradescope
 4/10
You should use Next.js in this assignment.
Read the instructions and the start code carefully before you start.
The file structure is as shown in the below figure,
 Submit Assignment 6 Force-Directed digram | Gradescope
 5/10
Q1.1 Group the routes by cities
30 Points
Complete the function groupByCity in the utils.js . This
function is very similar to the other two functions in the file. It
has one input "data" and returns an array of objects. The
following figure is an example of an object in the returned
array,
The object has several keys, and we will use the following two
in the following tasks.
City : the name of the city
Count : the number of routes that start from or end in the city.
In airportBubble.js , there is a console.log(groupByCity(routes))
in line 8. So, when you complete the function and run the
webpack server, you can see the following in the console of
your browser,
Hint: you should refer to groupByAirline and groupByAirport .
 Submit Assignment 6 Force-Directed digram | Gradescope
 6/10
Upload your utils.js here:
Please select file(s) Select file(s)
Save Answer
?
 Submit Assignment 6 Force-Directed digram | Gradescope
 7/10
Q1.2 Build the bubble chart
40 Points
Complete the component AirportBubble in airportBubble.js .
The bubble chart is plotted in the <svg> whose id is "bubble"; in
the bubble chart, each circle is a city, and the size of the circle
represents the number of routes related to the city. You need
to write code for the following tasks:
When selectedAirline is null, it returns the bubble chart showing
the hub cities worldwide.
When selectedAirline is not null, it returns the bubble chart
showing the hub cities of the selected airline.
For the detailed settings, please read the instructions in the
start code.
Reference:
Position forces: https://d3js.org/d3-force/position;
Collide forces: https://d3js.org/d3-force/collide
The expected output is like the below figure, and when you hover the
mouse on a bar, the bubble chart should change accordingly.
 Submit Assignment 6 Force-Directed digram | Gradescope
 8/10
Upload your airportBubble.js here:
Please select file(s) Select file(s)
Save Answer
?
 Submit Assignment 6 Force-Directed digram | Gradescope
 9/10
Q1.3 Update the interaction
27 Points
So far, the bubble chart of a selected airline appears when the
mouse hovers over the bar, and it disappears when the mouse
is out. In this task, you need to modify the barChart.js as
follows,
Change the mouse event in from onMouseOver to onClick ;
Remove the onMouseOut event in ;
Define a callback function onClick for the mouse event, so that,
when the mouse clicks a bar, the bar will be highlighted, and the
bubble chart will show the bubbles of the selected airline. When the
mouse clicks this selected bar for the second time, it will unselect the
bar, and the color of the bar will turn to normal.
The expected output is like the figure below, and when you
click a bar for the first time, the bar will be highlighted, and the
bubble chart will change to the selected airline.
When you click the same bar for a second time, the bar will
turn to normal, and the bubble chart will change back to the
hubs worldwide.
Upload your barChart.js here:
 Submit Assignment 6 Force-Directed digram | Gradescope
 10/10
Please select file(s) Select file(s)
Save Answer
Q1.4 Deploy your project to vercel
3 Points
Now you have completed all the code. It is time to put your
work online. Please follow the steps introduced in Week 4's
Next.js slides,
1. connect your GitHub account to Vercel;
2. change the assignment5_student.js to
assignment6_[yourname].js;
3. check if there is a .gitignore in your project. If not, create one
and copy-paste this .gitignore to it. So, when you push your
code to GitHub, it will ignore the unnecessary files for the
next.js project;
4. push your project code to your GitHub;
5. deploy your project using Vercel;
When you successfully deploy it, please paste your link below:
Save Answer
Save All Answers Submit & View Submission ?

请加QQ：99515681  邮箱：99515681@qq.com   WX：codinghelp

Tags：