Proces Week 4
Vandaag sprak ik af met de andere techies van Ring Ring. Hier keken we naar hoe we de data konden plotten. Uiteindelijk bleek dit al snel bij iedereen te lukken. In feite hoefde je alleen maar een layer toe te voegen. De code voor de layer en het fetchen van de data is erg makkelijk en staat kant en klaar online bij examples.
map.on("load", function () {
map.addSource("route", {
type: "geojson",
data: fetchedRingRingData,
});
map.addLayer({
id: "route",
type: "line",
source: "route",
layout: {
"line-join": "round",
"line-cap": "round",
},
paint: {
"line-color": "#c42116",
"line-width": 0.7,
"line-opacity": 0.1,
},
});
});Vervolgens heb ik nog wat styling aangepast bij de dashboardbuttons en heb ik een feedback pagina aangemaakt.
Vandaag hadden we weer een feedback gesprek met de opdrachtgever. Hier liet ik de dashboard zien. Ik kreeg hier een paar feedbackpunten waar ik aan moet werken.
- De legendapunten lijken op filters
- De legendapunten kunnen worden omgezet naar filters
- Tijd is een vaag begrip om te filteren in de stackedbarchart. Want iedereen fietst op een ander tempo. Lengte in kilometers is een interessanter onderwerp
- De smileys bij feedback zijn niet in de kleuren van de ring ring huistijl
Na de feedback sessie begon ik met de piechart. Ik wilde een simpele piechart weergeven in de sidebar die aangeeft hoeveel fietsritten er in het weekend gehouden worden en hoeveel buiten het weekend.
Vervolgens ging ik aan de slag met de stackedbarchart. Ik begon met de data om te zetten van duration naar distance. Dit keer zijn er meer layers in de stackedbarchart zodat er later ook beter gefiltered kan worden door de lagen te verwijderen. Ik splitste de layers op in:
- Fietsrit van meer dan 10 km
- Fietsrit tussen de 4 en 10 km
- Fietsrit tussen de 2 en 4 km
- Fietsrit tussen de 2 en 1 km
- Fietsrit korter dan 1 km
Voor de layers worden alle kleuren van de ring ring huisstijl gebruikt. Uiteindelijk ziet het er zo uit:
Om van duration naar distance te gaan en om meerdere lagen toe te voegen aan de barchart, veranderde ik de keys van de stackGenerator
// Van dit
const stackGenerator = d3
.stack()
.keys(["shortDuration", "mediumDuration", "longDuration"]);
// Naar dit
const stackGenerator = d3
.stack()
.keys([
"veryShortDistance",
"shortDistance",
"mediumDistance",
"longDistance",
"veryLongDistance",
]);Daarnaast pastte ik het opslaan van de opgehaalde data aan
// Van dit
return {
timeStamp: timeStamp,
shortDuration: getShortDurationPerTimestamp(filteredTimestamp),
mediumDuration: getMediumDurationPerTimestamp(filteredTimestamp),
longDuration: getLongDurationPerTimestamp(filteredTimestamp),
averageDistance: getAverageDistance(timeStamp, timeStamps),
veryShortDistance: getVeryShortDistancePerTimestamp(
filteredTimestamp
),
};
// Naar dit
return {
veryShortDistance: getVeryShortDistancePerTimestamp(
filteredTimestamp
),
veryShortDistance: getVeryShortDistancePerTimestamp(
filteredTimestamp
),
shortDistance: getShortDistancePerTimestamp(filteredTimestamp),
mediumDistance: getMediumDistancePerTimestamp(filteredTimestamp),
longDistance: getLongDistancePerTimestamp(filteredTimestamp),
veryLongDistance: getVeryLongDistancePerTimestamp(filteredTimestamp),
};Om de lagen als filters te gebruiken, heb ik verschillende functies geschreven die de lagen filteren.
Dit kostte me veel tijd maar uiteindelijk heb ik de stackedbarchart werkend.
Hiervoor maakte ik eerst een lange function voor elke filter
function filterVeryShortDistance() {
let filterOn = d3.select("#filterVeryShortDistance")._groups[0][0].checked;
if (filterOn) {
let index = filteredDomainKeys.indexOf("veryShortDistance");
if (index > -1) {
filteredDomainKeys.splice(index, 1);
filteredRangeKeys.splice(index, 1);
}
} else {
oldFilteredDomainKeys = filteredDomainKeys;
filteredDomainKeys = domainKeys.map((key) => key);
filteredRangeKeys = rangeKeys.map((key) => key);
console.log(filteredDomainKeys);
console.log(filteredRangeKeys);
if (!oldFilteredDomainKeys.includes("shortDistance")) {
let index = filteredDomainKeys.indexOf("veryShortDistance");
filteredDomainKeys.splice(index, 1);
filteredRangeKeys.splice(index, 1);
}
if (!oldFilteredDomainKeys.includes("mediumDistance")) {
let index = filteredDomainKeys.indexOf("mediumDistance");
filteredDomainKeys.splice(index, 1);
filteredRangeKeys.splice(index, 1);
}
if (!oldFilteredDomainKeys.includes("longDistance")) {
let index = filteredDomainKeys.indexOf("longDistance");
filteredDomainKeys.splice(index, 1);
filteredRangeKeys.splice(index, 1);
}
if (!oldFilteredDomainKeys.includes("veryLongDistance")) {
let index = filteredDomainKeys.indexOf("veryLongDistance");
filteredDomainKeys.splice(index, 1);
filteredRangeKeys.splice(index, 1);
}Nadat de filters van de stackedbarchart werkte, ging ik aan de slag met de filters van de map. Dit was even puzzelen maar uiteindelijk kwam ik eruit door simpelweg elke keer een nieuwe laag te maken. Ik maakte verschillende geojsons per tijdstip, en zet die vast per checkbox.
Ik zorgde voor 1 listener die per checkbox controlleerde of die geselecteerd was
if (document.getElementById("06-07").checked) {
drawMapLayer(map, filteredData0607, "0607", "#c42116");
}Vervolgens voer ik de functie drawMapLayer uit met de juiste parameters
function drawMapLayer(map, filteredData, id, color) {
map.addSource(id, {
type: "geojson",
data: filteredData,
});
map.addLayer({
id: id,
type: "line",
source: id,
layout: {
"line-join": "round",
"line-cap": "round",
},
paint: {
"line-color": color,
"line-width": 1,
},
});
}Vandaag was de feedbackpagina aan de beurt. We hadden een nieuwe geojson ontvangen van de opdrachtgever waar wij feedback hadden gegeven. Deze geojson gebruik ik als content voor de feedbackpagina. Ik zette de geojson eerst online op een github gist. Vervolgens fetch ik de feedback, datum, tijdstip en afstand. Deze geef ik vervolgens weer in een lijst.
Om de lijst te creeëren per dataset index creeër ik HTML-elementen voor elke feedback
function createFeedbackList(feedbackFeatures) {
feedbackFeatures.forEach((feedback) => {
// Create needed elements
const listItem = document.createElement("li");
const feedbackDescription = document.createElement("p");
const feedbackTime = document.createElement("p");
const feedbackDate = document.createElement("p");
const feedbackDistance = document.createElement("p");
const profileIcon = document.createElement("img");
const feedbackScoreImg = document.createElement("img");
const saveCheckbox = document.createElement("input");
const saveLabel = document.createElement("label");
counter++;
// Get dates
const date = new Date(feedback.properties.start);
const hours = date.getHours();
const minutes = date.getMinutes();
const day = date.getDate();
const month = date.getMonth();
const year = date.getFullYear();
// Editable dates
let correctedHours = hours;
let correctedMinutes = minutes;
let correctedDay = day;
let correctedMonth = month + 1;
// add 0 if hours is less then 9
if (hours.toString().length < 2) {
correctedHours = "0" + correctedHours;
}
// add 0 if minutes is less then 9
if (minutes.toString().length < 2) {
correctedMinutes = "0" + correctedMinutes;
}
// add 0 if daynumber is less then 9
if (day.toString().length < 2) {
correctedDay = "0" + correctedDay;
}
console.log(month);
if (correctedMonth.toString().length < 2) {
correctedMonth = "0" + correctedMonth;
}
// set time and date in correct format
const time = correctedHours + ":" + correctedMinutes;
const calendarDate = correctedDay + "-" + correctedMonth + "-" + year;
// set dummy Text when feedback is empty
let feedbackDesc = feedback.properties.feedback;
if (!feedbackDesc) {
feedbackDesc =
"Al met al een prima ritje. Stoplichten konden iets beter afgesteld staan voor fietsers";
}
// set content for elements
feedbackDescription.textContent = feedbackDesc;
feedbackTime.textContent = time;
feedbackDate.textContent = calendarDate;
feedbackDistance.textContent = feedback.properties.distance + "km";
feedbackScoreImg.src = getFeedbackIcon(
feedback.properties["feedback score"]
);
profileIcon.src = "./resources/avatar.svg";
saveCheckbox.type = "checkbox";
saveCheckbox.id = "saveFeedback" + counter;
saveCheckbox.name = "saveFeedback" + counter;
saveLabel.htmlFor = "saveFeedback" + counter;
saveLabel.textContent = "Selecteer";
feedbackTime.classList.add("feedbackTime");
feedbackDistance.classList.add("feedbackDistance");
listItem.appendChild(profileIcon);
listItem.appendChild(feedbackTime);
listItem.appendChild(feedbackDate);
listItem.appendChild(feedbackDescription);
listItem.appendChild(feedbackDistance);
listItem.appendChild(feedbackScoreImg);
listItem.appendChild(saveCheckbox);
listItem.appendChild(saveLabel);
feedbackSection.appendChild(listItem);
});
}Daarnaast heb ik wat simpele datavisualisaties toegevoegd op de voor u pagina. Deze ziet er nu zo uit.
Voor de feedbackpagina wilde ik ook filters toevoegen. Ik maakte een paar functies waardoor de feedback te filteren is op feedbackscore en dagsoort (weekend of doordeweeks).
