45:["$","title",null,{"children":"Team CryanAir: Ryan Air Customer Reviews - Submission | FHOÖ Information Visualization | Observable"}] 4d:T4e4,The dashboard is built on two main parts - the interactive part, where the selection is made, and the informative part, where the filtered data is shown. The selection graph, which is on the top of the left side, serves as the selection part. It provides a way to select any possible flight route in the operation plan of Ryanair. The source airport has to be selected, by clicking on any dot. The diameter of the dot represents the amount of inbound and outbound connections of this airport. The name of the city will also show up as a tooltip, to help the user for making the decision.
After selecting the source airport, it is only necessary to hover over any other dot, which then serves as the destination airport. Yellow "guide lines" will show any existing flight path. After the selection has been made, (at least) one to three graphs will be shown. In the bottom left side the pie chart represents the normalized amount of all types of travellers from the selected source airport.
On the right side, two parallel sets will be shown. If there is no review on the out bound or/and the inbound route, a text message will be shown instead of the graph. The yellow graph represents the outbound route and the blue graph the inbound one.4e:T547, For the explanation, the inbound route Dublin-Gatwick (blue graph in the following demo screenshot) will be used. The graph has to be read from the left to the right. In this example, a total of five reviews have been filtered and shown to the user.
- Three passengers rated the ground service at Gatwick as an "1" (lowest score), while another passenger evaluated it as a "2" and the fifth passenger rated it as an "4". - From the first three passengers, two rated the cabin staff as an "1" and for the last passenger it was worth the "2" rating. At the same time, the passenger, who rated the ground service as an "2" proceeded to review the cabin staff with the same rating. - This process continues until the layer "Destination", where all reviews merge together - but with a small space in between, to be able to differentiate them from each other. - After that, the graph splits again to show the individual ratings for the "value for money" and the "overall rating". - The graph finishes with the "recommend" field, where it can be seen, if the reviewer recommends flying with Ryanair for that route. In this example, 60% (3/5) of the passengers gave a positive review to Ryanair. The main advantage of this type of graph is, that every review can be traced from the beginning (of the flight) to the final rating/recommendation.4f:T97b,parallelSetChart = { if (!clickedSource || !hoveredTarget) { return html`Please select a source airport and hover over the target destination!`; } else if (graph.nodes[0]) { const width = 1500; const height = 360; const sankey = d3.sankey() .nodeSort(null) .linkSort(null) .nodeWidth(4) .nodePadding(20) .extent([[0, 5], [width, height - 5]]) const color = d3.scaleOrdinal([graph.nodes[0].name], ["#F1C933"]).unknown("#ccc"); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width) .attr("height", height) .attr("style", "max-width: 100%; height: auto;"); const {nodes, links} = sankey({ nodes: graph.nodes.map(d => Object.create(d)), links: graph.links.map(d => Object.create(d)) }); svg.append("g") .selectAll("rect") .data(nodes) .join("rect") .attr("x", d => d.x0) .attr("y", d => d.y0) .attr("height", d => d.y1 - d.y0) .attr("width", d => d.x1 - d.x0) .append("title") .text(d => `"${d.name}"\nCount: ${d.value.toLocaleString()}`); svg.append("g") .attr("fill", "none") .selectAll("g") .data(links) .join("path") .attr("d", d3.sankeyLinkHorizontal()) .attr("stroke", d => color(d.names[0])) .attr("stroke-width", d => d.width/1.1) .style("mix-blend-mode", "multiply") .append("title") .text(d => `${d.names.join(" → ")}\n${d.value.toLocaleString()}`); svg.append("g") .style("font", "18px sans-serif") .selectAll("text") .data(nodes) .join("text") .attr("x", d => d.x0 < width / 2 ? d.x1 + 6 : d.x0 - 6) .attr("y", d => (d.y1 + d.y0) / 2) .attr("dy", "0.35em") .attr("text-anchor", d => d.x0 < width / 2 ? "start" : "end") .text(d => `${d.key}:`) .append("tspan") .attr('x', d => d.x0 < width / 2 ? d.x1 + 6 : d.x0 - 6) .attr('dy', "17") .text(d => `"${d.name}"`) .append("tspan") .attr('x', d => d.x0 < width / 2 ? d.x1 + 6 : d.x0 - 6) .attr('dy', "25") .attr("fill-opacity", 0.7) .text(d => `${d.value.toLocaleString()}x`); return svg.node(); } else { return html`No reviews for this flight route available! (${clickedSource} - ${hoveredTarget})`; } }50:T96b,parallelSetChartBacktrack = { if (!clickedSource || !hoveredTarget) { return html` `; } else if (graphBacktrack.nodes[0]) { const width = 1500; const height = 360; const sankey = d3.sankey() .nodeSort(null) .linkSort(null) .nodeWidth(4) .nodePadding(20) .extent([[0, 5], [width, height - 5]]) const color = d3.scaleOrdinal([graphBacktrack.nodes[0].name], ["#2091EB"]).unknown("#ccc"); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width) .attr("height", height) .attr("style", "max-width: 100%; height: auto;"); const {nodes, links} = sankey({ nodes: graphBacktrack.nodes.map(d => Object.create(d)), links: graphBacktrack.links.map(d => Object.create(d)) }); svg.append("g") .selectAll("rect") .data(nodes) .join("rect") .attr("x", d => d.x0) .attr("y", d => d.y0) .attr("height", d => d.y1 - d.y0) .attr("width", d => d.x1 - d.x0) .append("title") .text(d => `"${d.name}"\nCount: ${d.value.toLocaleString()}`); svg.append("g") .attr("fill", "none") .selectAll("g") .data(links) .join("path") .attr("d", d3.sankeyLinkHorizontal()) .attr("stroke", d => color(d.names[0])) .attr("stroke-width", d => d.width/1.1) .style("mix-blend-mode", "multiply") .append("title") .text(d => `${d.names.join(" → ")}\n${d.value.toLocaleString()}`); svg.append("g") .style("font", "18px sans-serif") .selectAll("text") .data(nodes) .join("text") .attr("x", d => d.x0 < width / 2 ? d.x1 + 6 : d.x0 - 6) .attr("y", d => (d.y1 + d.y0) / 2) .attr("dy", "0.35em") .attr("text-anchor", d => d.x0 < width / 2 ? "start" : "end") .text(d => `${d.key}:`) .append("tspan") .attr('x', d => d.x0 < width / 2 ? d.x1 + 6 : d.x0 - 6) .attr('dy', "17") .text(d => `"${d.name}"`) .append("tspan") .attr('x', d => d.x0 < width / 2 ? d.x1 + 6 : d.x0 - 6) .attr('dy', "25") .attr("fill-opacity", 0.7) .text(d => `${d.value.toLocaleString()}x`); return svg.node(); } else { return html`No reviews for this return flight route available! (${hoveredTarget} - ${clickedSource})`; } }51:T13ed,function forceLayout() { const margin = { top: 10, bottom: 10, left: 10, right: 10 }; const width = 650 - margin.left - margin.right; const height = 650 - margin.top - margin.bottom; // Creates sources by Paul Huemer, Leo Jungmann and Dino Ponjevic","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":124,"value":"fullscreenDashboard = fullscreen({\n breakLayoutAtCell: 38,\n hideAfter: 48,\n hideBefore: 34,\n left: 51,\n right: 46,\n button: html`

Date filter