2f:T1e54,getChart = (flights, busTimes, legendLabel, myFill = "#e67e22") => { if(legendLabel== "Voli in Partenza") console.log(flights) let isSplit = false; // state function getDayData(day) { // Filter for departures only const filteredFlights = flights.filter(d => d.GIORNO === day.slice(0,3)) // Create a binner that looks at the hour of the flight const binner = d3.bin() .value(d => { const parsed = d3.timeParse("%H:%M")(d.ORARIO); return parsed ? parsed.getHours() : null; }) .domain([0, 24]) .thresholds(d3.range(0, 24)); return binner(filteredFlights); } const height = 700; // Increased height to accommodate 7 charts const margin = {top: 20, right: 30, bottom: 100, left: 100}; // More left margin for Italian labels const days = ["Lunedì", "Martedì", "Mercoledì", "Giovedì", "Venerdì", "Sabato", "Domenica"]; const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; font: 12px sans-serif; background-color: white;"); // X Scale: Hours (0-24) const x = d3.scaleLinear() .domain([0, 24]) .range([margin.left, width - margin.right]); // Y Scale (Group): This splits the total height into 7 bands const yGroup = d3.scaleBand() .domain(days) .range([margin.top, height - margin.bottom]) .padding(0); // Y Scale (Value): Height of bars within each day band // Adjust 'd.length' based on your specific nested data structure const yValue = d3.scaleLinear() .domain([0, d3.max(voliInArrivo, d => d.length)]) .range([yGroup.bandwidth(), 0]); // Y scale: Count of flights const y = d3.scaleLinear() .domain([0, d3.max(voliInPartenza, d => d.length)]).nice() .range([height - margin.bottom, margin.top]); // 0. Draw Histogram Bars (Flights) const allNode = svg.append("g") //.style("opacity",0) .selectAll("rect") .data(voliInPartenza) .join("rect") .attr("x", d => x(d.x0) + 1) .attr("width", d => Math.max(0, x(d.x1) - x(d.x0) - 1)) .attr("y", d => y(d.length)) .attr("height", d => y(0) - y(d.length)) .attr("fill", myFill) .attr("fill-opacity", d => { const hasMatch = d.some(flight => selectedFlights.has(flight.AEROPORTO)); // Dim non-matching bars if a search is active to create focus if (searchCity.length === 0) return 0.8; return hasMatch ? .8 : 0.3; }) const bandsNode = svg.append("g").style("opacity",0) // Add Bus Arrival Markers (Vertical Dashed Lines) svg.append("g") .selectAll("line") .data(busTimes) .join("line") .attr("x1", d => x(d)) .attr("x2", d => x(d)) .attr("y1", margin.top) .attr("y2", height - margin.bottom) .attr("stroke", "#2c3e50") .attr("stroke-width", 2) .attr("stroke-dasharray", "4,4"); // 1. Create a Container for each Day const dayGroups = bandsNode.selectAll(".day-group") .data(days) .join("g") .attr("class", "day-group") .attr("transform", d => `translate(0, ${yGroup(d)})`); // 2. Add Day Labels (Italian) dayGroups.append("text") .attr("x", margin.left - 10) .attr("y", yGroup.bandwidth() / 2) .attr("alignment-baseline", "middle") .attr("font-weight", "bold") .text(d => d); // 3. Draw Bars for each day dayGroups.selectAll("rect") .data(d=>getDayData(d)) // Map your data to specific days here .join("rect") .attr("x", d => x(d.x0) + 1) .attr("width", d => Math.max(0, x(d.x1) - x(d.x0) - 1)) .attr("y", d => yValue(d.length)) .attr("height", d => yValue(0) - yValue(d.length)) .attr("fill", myFill) .attr("fill-opacity", 0.7); // 5. Shared X Axis (Bottom) svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).ticks(24).tickFormat(d => `${d}:00`)); const button = svg.append("g") .attr("cursor", "pointer") .attr("transform", `translate(${width - 150}, ${height-50})`) .on("click", function() { isSplit = !isSplit; update(); }); const btnRect = button.append("rect") .attr("width", 120) .attr("height", 30) .attr("rx", 15) .attr("fill", "#2c3e50"); const btnText = button.append("text") .attr("x", 60) .attr("y", 15) .attr("fill", "white") .attr("text-anchor", "middle") .attr("alignment-baseline", "middle") .text("Mostra per Giorno"); // 4. Y-Axis const yAxisNode = svg.append("g") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y)) yAxisNode.append("text") .attr("x", -margin.left) .attr("y", 25) .attr("fill", "black") .attr("text-anchor", "start") .text("↑ Numero di voli"); // 5. Bottom Legend const legendY = height - 40; // Positioned in the new bottom margin const legend = svg.append("g") .attr("transform", `translate(${width / 2 - 100}, ${legendY})`); // Flight Legend Item legend.append("rect") .attr("width", 18) .attr("height", 18) .attr("fill", myFill) .attr("fill-opacity", 0.7); legend.append("text") .attr("x", 25) .attr("y", 14) .text(legendLabel) .style("alignment-baseline", "middle"); // Bus Legend Item (offset to the right) const busLegend = legend.append("g").attr("transform", "translate(150, 0)"); busLegend.append("line") .attr("x1", 0) .attr("x2", 18) .attr("y1", 9) .attr("y2", 9) .attr("stroke", "#2c3e50") .attr("stroke-width", 3) .attr("stroke-dasharray", "4,2"); busLegend.append("text") .attr("x", 25) .attr("y", 14) .text("Bus") .style("alignment-baseline", "middle"); function update() { const collapseDuration = 300; const expandDuration = 500; const staggerDelay = 40; // milliseconds between each bar animation if (isSplit) { // Collapse the total view bars allNode .transition() .duration(collapseDuration) .attr("height", 0) .attr("y", d => y(0)); allNode .transition() .delay(400) .duration(collapseDuration) .style("opacity", 0); yAxisNode .transition() .duration(collapseDuration) .style("opacity", 0); // After collapse, show split view and animate bars in with stagger setTimeout(() => { bandsNode.style("opacity", 1); dayGroups.selectAll("rect") .transition() .duration(expandDuration) .delay((d, i) => i * staggerDelay) .attr("height", d => yValue(0) - yValue(d.length)) .attr("y", d => yValue(d.length)); }, collapseDuration); } else { // Collapse the split view bars dayGroups.selectAll("rect") .transition() .duration(collapseDuration) .attr("height", 0) .attr("y", d => yValue(0)); bandsNode .transition() .duration(collapseDuration) .style("opacity", 0); // After collapse, show total view and animate bars in with stagger setTimeout(() => { allNode.style("opacity", 1); yAxisNode.style("opacity", 1); allNode .transition() .duration(expandDuration) .delay((d, i) => i * staggerDelay) .attr("height", d => y(0) - y(d.length)) .attr("y", d => y(d.length)); }, collapseDuration); } btnText.text(isSplit ? "Mostra Totale" : "Mostra per Giorno"); } update() return svg.node(); }30:[{"id":"fea1266a3c572484de7e9975cdd0cd4a526239687bc4fdb866e4a1517695cd99b7cbc41b9e502223142ce09d57be48db3e80a194c6ab5039af3f99cebcbef850","href":"https://static.observableusercontent.com/files/fea1266a3c572484de7e9975cdd0cd4a526239687bc4fdb866e4a1517695cd99b7cbc41b9e502223142ce09d57be48db3e80a194c6ab5039af3f99cebcbef850","name":"bari_flights.csv","type":"text/csv","lastModified":1778167739379.061,"size":88435}] 2d:{"title":"Navette Bari - Matera 2026","cells":[{"id":0,"value":"# Navette Bari - Matera 2026","pinned":false,"hidden":false,"mode":"md"},{"id":61,"value":"Raffronto tra le nuove navette da e per Matera e i voli in partenze e in arrivo a Bari Palese.\n\nDigita una città per evidenziare se è prossima alla partenza o all'arrivo di una navetta. Clicca il pulsante per visualizzare i voli giorno per giorno.\n\n_Dati voli dal 2026-05-12 al 2026-05-18_","pinned":false,"hidden":false,"mode":"md"},{"id":85,"value":"viewof searchCity = Inputs.search(flights_data, {\n label: \"Cerca città:\",\n placeholder: \"es. Venezia, London...\",\n columns: [\"AEROPORTO\"], \n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"md`In evidenza: ${flights_data.length != searchCity.length && [...selectedFlights][0] ? [...selectedFlights][0] : \"Tutte le città\"}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"## Voli in partenza","pinned":false,"hidden":false,"mode":"md"},{"id":224,"value":"getChart(flights_data.filter(d => d.TIPO === \"Partenza\"), partenzeBusData, \"Voli in Partenza\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":308,"value":"html`

Partenze autobus da Matera

\n ${formatTime(t)}\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":330,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":53,"value":"## Voli in arrivo","pinned":false,"hidden":false,"mode":"md"},{"id":213,"value":"getChart(flights_data.filter(d => d.TIPO === \"Arrivo\"), [9.25, 11.5, 13.66, 15.0, 17.0, 18.83, 23.75], \"Voli in Arrivo\", \"#20a5ba\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":287,"value":"html`

Arrivi autobus a Bari

\n ${formatTime(t)}\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":332,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":108,"value":"### Dati","pinned":false,"hidden":false,"mode":"md"},{"id":293,"value":"partenzeBusData = [6.16, 8.25, 9.75, 12.0, 15.25, 18.0, 21.75]","pinned":false,"hidden":false,"mode":"ojs"},{"id":284,"value":"arriviBusData = [9.25, 11.5, 13.66, 15.0, 17.0, 18.83, 23.75]","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":276,"value":"formatTime = (time)=>{\n const hours = Math.floor(time);\n const minutes = Math.round((time - hours) * 60);\n \n // Pad with leading zeros to ensure HH:MM format\n const hDisplay = String(hours).padStart(2, '0');\n const mDisplay = String(minutes).padStart(2, '0');\n \n return `${hDisplay}:${mDisplay}`;\n}\n \n","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"selectedFlights = new Set(searchCity.map(d => d.AEROPORTO))","pinned":true,"hidden":false,"mode":"ojs"},{"id":39,"value":"voliInArrivo = {\n // Filter for departures only\n const departures = flights_data.filter(d => d.TIPO === \"Arrivo\");\n \n // Create a binner that looks at the hour of the flight\n const binner = d3.bin()\n .value(d => {\n const parsed = d3.timeParse(\"%H:%M\")(d.ORARIO);\n return parsed ? parsed.getHours() : null;\n })\n .domain([0, 24])\n .thresholds(d3.range(0, 24));\n\n return binner(departures);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"voliInPartenza = {\n // Filter for departures only\n const departures = flights_data.filter(d => d.TIPO === \"Partenza\");\n \n // Create a binner that looks at the hour of the flight\n const binner = d3.bin()\n .value(d => {\n const parsed = d3.timeParse(\"%H:%M\")(d.ORARIO);\n return parsed ? parsed.getHours() : null;\n })\n .domain([0, 24])\n .thresholds(d3.range(0, 24));\n\n return binner(departures);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"data = {\n const busArrivals = [\"06:10\", \"08:15\", \"09:45\", \"12:00\", \"15:15\", \"18:00\", \"21:45\"]\n .map(d => ({\n time: d3.timeParse(\"%H:%M\")(d),\n type: \"Bus\",\n label: \"Bus da Matera\"\n }));\n\n // Filtering your flight CSV for departures only\n const flightDepartures = flights_data\n .filter(d => d.TIPO === \"Partenza\")\n .map(d => ({\n time: d3.timeParse(\"%H:%M\")(d.ORARIO),\n type: \"Flight\",\n label: `${d.VOLO} to ${d.AEROPORTO}`\n }));\n\n return [...busArrivals, ...flightDepartures];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"flights_data = FileAttachment(\"bari_flights.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}