Skip to content

HW2 and HW3 - Zhengyang Jia #21

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
JzyGavin7 wants to merge 2 commits into
base: main
Choose a base branch
from
Open

HW2 and HW3 - Zhengyang Jia #21

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a091b38
Homework2 - Zhengyang Jia
JzyGavin7 Oct 19, 2022
64030e1
Homework3
JzyGavin7 Nov 2, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions Homework2/zhyjia/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
# Visualization Dashboard for Airline Passenger Satisfaction

## Pie Chart
The pie chart depicts the overview of the data, and users can select different dimensions based on the dropdown menu to check the distribution

## Radar Chart
The radar chart depicts the average satisfaction with variou service(On-board service, Cleanliness, Checkin service, Inflight entertainment, Seat comfort, and Food and drink) in different classes(Eco, Eco plus, and Business)

## Bar Chart
The bar chart depicts the distribution of each class in the rating range of 1~5 for leg room service. For example, if the value of slider equals to 1, the chart depicts the percentage of customers rating 1 in each class(Eco, Eco plus, and Business) out of the total number of customers in each class
91 changes: 91 additions & 0 deletions Homework2/zhyjia/dist/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
<!DOCTYPE html>
<html>
<head>
<style>
body{width:100%;}
div.relative1 {
position: relative;
top : 50px;
}

div.absolute1 {
position: absolute;
top: 0px;
left: 0px;
width: 50%;
height: 50%;
border: 1px solid #73AD21;
}

div.absolute2 {
position: absolute;
top: 50%;
left: 0px;
width: 50%;
height: 50%;
border: 1px solid #73AD21;
}

div.absolute3 {
position: absolute;
top: 0px;
right: 0px;
width: 50%;
height: 100%;
border: 1px solid #73AD21;
}
</style>

<title>Homework 2 - Airline Passenger Satisfaction</title>
</head>
<body>
<div>

<div>

<div id="radar" class="absolute1" >
<h5 align="center">Average satisfaction with each service in different classes</h5>
<select id="bar_dropdown">
<option value="Eco">Eco</option>
<option value="Eco Plus">Eco Plus</option>
<option value="Business">Business</option>
<option value="All">All</option>
</select>
</div>

<div id="bar" class="absolute2">
<h5 align="center">The distribution of each class in the rating range of 1~5 for leg room service </h5>
<input type="range" value="1" min="1" max="5" name="barSlider" id="barSlider" oninput="this.nextElementSibling.value = this.value">
<output>1</output>
</div>

<div id="pie" class="absolute3">
<h5 align="center">Overview of the dataset(data distribution in different dimensions)</h5>
<select id="pie_dropdown">
<option value="gender">Gender</option>
<option value="customerType">Customer Type</option>
<option value="travelType">Travel Type</option>
<option value="fligtClass">Fligt Class</option>
<option value="wifiService">Inflight Wifi Service</option>
<option value="timeConvenient">Time Convenient</option>
<option value="booking">Ease of Booking</option>
<option value="gateLocation">Gate Location</option>
<option value="food">Food and Drink</option>
<option value="onlineBoarding">Online Boarding</option>
<option value="seat">Seat Comfort</option>
<option value="entertainment">Entertainment</option>
<option value="onboard">On-board Service</option>
<option value="legRoom">Leg Room Service</option>
<option value="baggage">Baggage Handling</option>
<option value="checkin">Checkin Service</option>
<option value="inflight">Inflight Service</option>
<option value="cleanliness">Cleanliness</option>
<option value="satisfaction">Satisfaction</option>
</select>
</div>

</div>
</div>
<script src="./bundle.js"></script>
</body>
</html>
Loading