program 代写、代做 java/Python 编程

日期：2024-04-20 08:36

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 ?

?