Hi everyone,
Before to post my question, I have tried to get a hint for my question from the tutors, but for some reason I have not heard anything from them. Therefore I posting my question here only to get a hint or advice on what I am doing wrong that I barely see it. Hope someone assisst me with.
The issue that I cannot figure out is the data I loaded does not return any value and it is undefined which means that the code cannot return the required columns and it is not stored properly. Hence I need to change to code at all, but there is the problem that it should be so written without any changes only addind the codelines in ToDo.
Here is the code full code
<html>
<head>
<style>
body {
font-family: Helvetica, Arial, sans-serif;
}
h1 {
background-color: #2a5599;
color: white;
padding: 5px;
}
#AirlinesChart,
#Map {
border: 1px black solid;
width: 40em;
padding: 15px;
}
.mainView {
display: flex;
}
</style>
<script src="d3.js"></script>
</head>
<body>
<h1>Airlines Routes</h1>
<div class="mainView">
<div>
<h2>Airlines</h2>
<svg id="AirlinesChart"></svg>
</div>
<div>
<h2>Airports</h2>
<svg id="Map"></svg>
</div>
</div>
</body>
<script>
let store = {};
function loadData() {
let promise = d3.csv("routes.csv") //TODO 1: Add the code to load the CSV file named "routes.csv" | 1 Line
return promise.then((routes) => {
store.routes = routes; //TODO 2: Save the routes into our store variable;
return store;
})
}
function groupByAirline(data) {
let result = data.reduce((result, d) => {
let currentData = result[d.AirlineID] || {
"AirlineID" : d.AirlineID,
"AirlineName" : d.AirlineName,
"Count" : 0
};
currentData.Count += 1; //TODO: Increment the count (number of routes) of ariline.
result[d.AirlineID] = currentData; //TODO: Save the updated information in the dictionary using the airline id as key.
// Alternative
// currentData.Count += 1; //TODO: Increment the count (number of routes) of ariline.
// result[d.AirlineID] = currentData["Count"]; //TODO: Save the updated information in the dictionary using the airline id as key.
return result;
}, {})
result = Object.keys(result).map((key) => result[key]);
result = result.sort( (plus, minus) => minus.Count - plus.Count); //TODO: Sort the data in descending order of count.
}
function ShowData() {
//Get the routes from our store variable
let routes = store.routes; // this line could be skipped, but it is added in by tutors
// Compute the number of routes per airline.
let airlines = groupByAirline(store.routes);
console.log(airlines);
}
loadData().then(ShowData);
</script>
</html>
Please, I only need a hint or your advice pointing to where the code is wrong.
Thanks in advance.
Kind regards,
Kanatbek
