2b:null 2c:["$","title",null,{"children":"Se il mare si alza, ci sono dei costi per i porti | Sergio Cima | Observable"}] 31:T2177,// Grafico a linee per i dati sul livello del mare con D3.js in Observable HQ // Questo codice presuppone che la variabile 'data' contenga già i dati CSV caricati function seaLevelChart(data) { // Dimensioni del grafico const width = 900; const height = 500; const margin = { top: 30, right: 30, bottom: 60, left: 80 }; const innerWidth = width - margin.left - margin.right; const innerHeight = height - margin.top - margin.bottom; // Ottieni le etichette delle colonne const yearColumn = Object.keys(data[0])[0]; // Prima colonna (anno) const csiroColumn = Object.keys(data[0])[1]; // Colonna 2 (CSIRO) const lowerBoundColumn = Object.keys(data[0])[2]; // Colonna 3 (limite inferiore) const upperBoundColumn = Object.keys(data[0])[3]; // Colonna 4 (limite superiore) const noaaColumn = Object.keys(data[0])[4]; // Colonna 5 (NOAA) // Funzione per parsare i valori (converti stringhe in numeri) const parseRow = (d) => ({ year: +d[yearColumn], csiro: d[csiroColumn] === "" ? null : +d[csiroColumn], lowerBound: d[lowerBoundColumn] === "" ? null : +d[lowerBoundColumn], upperBound: d[upperBoundColumn] === "" ? null : +d[upperBoundColumn], noaa: d[noaaColumn] === "" ? null : +d[noaaColumn] }); // Converti i dati const parsedData = data.map(parseRow); // Scale const xScale = d3 .scaleLinear() .domain(d3.extent(parsedData, (d) => d.year)) .range([0, innerWidth]); // Trova il min e max considerando tutti i valori rilevanti const yMin = d3.min(parsedData, (d) => Math.min( d.lowerBound !== null ? d.lowerBound : Infinity, d.csiro !== null ? d.csiro : Infinity, d.noaa !== null ? d.noaa : Infinity ) ); const yMax = d3.max(parsedData, (d) => Math.max( d.upperBound !== null ? d.upperBound : -Infinity, d.csiro !== null ? d.csiro : -Infinity, d.noaa !== null ? d.noaa : -Infinity ) ); const yScale = d3 .scaleLinear() .domain([yMin, yMax]) .range([innerHeight, 0]) .nice(); // Area di confidenza (tra limiti inferiore e superiore) const confidenceArea = d3 .area() .x((d) => xScale(d.year)) .y0((d) => yScale(d.lowerBound)) .y1((d) => yScale(d.upperBound)) .defined((d) => d.lowerBound !== null && d.upperBound !== null); // Linee per CSIRO e NOAA const csiroLine = d3 .line() .x((d) => xScale(d.year)) .y((d) => yScale(d.csiro)) .defined((d) => d.csiro !== null); const noaaLine = d3 .line() .x((d) => xScale(d.year)) .y((d) => yScale(d.noaa)) .defined((d) => d.noaa !== null); // Crea SVG const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto;"); // Aggiungi div per tooltip const tooltip = d3 .select("body") .append("div") .attr("class", "tooltip") .style("position", "absolute") .style("background-color", "white") .style("border", "1px solid #ddd") .style("border-radius", "3px") .style("padding", "10px") .style("box-shadow", "2px 2px 6px rgba(0, 0, 0, 0.2)") .style("pointer-events", "none") .style("opacity", 0) .style("font-family", "sans-serif") .style("font-size", "12px"); const g = svg .append("g") .attr("transform", `translate(${margin.left},${margin.top})`); // Aggiungi l'area di confidenza g.append("path") .datum(parsedData) .attr("fill", "rgba(0, 114, 178, 0.2)") .attr("d", confidenceArea); // Aggiungi linea CSIRO g.append("path") .datum(parsedData) .attr("fill", "none") .attr("stroke", "#0072B2") .attr("stroke-width", 2) .attr("d", csiroLine); // Aggiungi linea NOAA g.append("path") .datum(parsedData) .attr("fill", "none") .attr("stroke", "#D55E00") .attr("stroke-width", 2) .attr("d", noaaLine); // Aggiungi punti invisibili per i tooltip sulla linea CSIRO g.selectAll(".csiro-point") .data(parsedData.filter((d) => d.csiro !== null)) .join("circle") .attr("class", "csiro-point") .attr("cx", (d) => xScale(d.year)) .attr("cy", (d) => yScale(d.csiro)) .attr("r", 4) .attr("fill", "transparent") .on("mouseover", function (event, d) { tooltip.transition().duration(200).style("opacity", 0.9); tooltip .html( `Anno: ${d.year}
CSIRO: ${d.csiro.toFixed(2)} pollici
Limite inf.: ${d.lowerBound.toFixed( 2 )} pollici
Limite sup.: ${d.upperBound.toFixed( 2 )} pollici` ) .style("left", event.pageX + 10 + "px") .style("top", event.pageY - 28 + "px"); d3.select(this).attr("fill", "#0072B2").attr("r", 6); }) .on("mouseout", function () { tooltip.transition().duration(500).style("opacity", 0); d3.select(this).attr("fill", "transparent").attr("r", 4); }); // Aggiungi punti invisibili per i tooltip sulla linea NOAA g.selectAll(".noaa-point") .data(parsedData.filter((d) => d.noaa !== null)) .join("circle") .attr("class", "noaa-point") .attr("cx", (d) => xScale(d.year)) .attr("cy", (d) => yScale(d.noaa)) .attr("r", 4) .attr("fill", "transparent") .on("mouseover", function (event, d) { tooltip.transition().duration(200).style("opacity", 0.9); tooltip .html( `Anno: ${d.year}
NOAA: ${d.noaa.toFixed(2)} pollici` ) .style("left", event.pageX + 10 + "px") .style("top", event.pageY - 28 + "px"); d3.select(this).attr("fill", "#D55E00").attr("r", 6); }) .on("mouseout", function () { tooltip.transition().duration(500).style("opacity", 0); d3.select(this).attr("fill", "transparent").attr("r", 4); }); // Asse X g.append("g") .attr("transform", `translate(0,${innerHeight})`) .call(d3.axisBottom(xScale).tickFormat(d3.format("d")).ticks(10)) .call((g) => g.select(".domain").attr("stroke-opacity", 0.5)) .call((g) => g.selectAll(".tick line").attr("stroke-opacity", 0.5)); // Asse Y g.append("g") .call(d3.axisLeft(yScale)) .call((g) => g.select(".domain").attr("stroke-opacity", 0.5)) .call((g) => g .selectAll(".tick line") .attr("x2", innerWidth) .attr("stroke-opacity", 0.1) ); // Etichetta asse X g.append("text") .attr("x", innerWidth / 2) .attr("y", innerHeight + 40) .attr("text-anchor", "middle") .attr("fill", "black") .text("Anno"); // Etichetta asse Y g.append("text") .attr("transform", "rotate(-90)") .attr("x", -innerHeight / 2) .attr("y", -60) .attr("text-anchor", "middle") .attr("fill", "black") .text("Livello del mare (pollici)"); // Titolo g.append("text") .attr("x", innerWidth / 2) .attr("y", -10) .attr("text-anchor", "middle") .attr("fill", "black") .attr("font-weight", "bold") .attr("font-size", "16px") .text("Innalzamento del Livello del Mare (1880-2023)"); // Legenda const legend = g .append("g") .attr("transform", `translate(${innerWidth - 200}, 20)`); // Legenda CSIRO legend .append("line") .attr("x1", 0) .attr("y1", 0) .attr("x2", 20) .attr("y2", 0) .attr("stroke", "#0072B2") .attr("stroke-width", 2); legend .append("text") .attr("x", 25) .attr("y", 4) .text("CSIRO") .attr("font-size", "12px") .attr("alignment-baseline", "middle"); // Legenda NOAA legend .append("line") .attr("x1", 0) .attr("y1", 20) .attr("x2", 20) .attr("y2", 20) .attr("stroke", "#D55E00") .attr("stroke-width", 2); legend .append("text") .attr("x", 25) .attr("y", 24) .text("NOAA") .attr("font-size", "12px") .attr("alignment-baseline", "middle"); // Legenda area di confidenza legend .append("rect") .attr("x", 0) .attr("y", 40) .attr("width", 20) .attr("height", 10) .attr("fill", "rgba(0, 114, 178, 0.2)"); legend .append("text") .attr("x", 25) .attr("y", 45) .text("Intervallo di confidenza") .attr("font-size", "12px") .attr("alignment-baseline", "middle"); return svg.node(); } // In Observable, basta richiamare questa funzione passando i dati // Esempio: // seaLevelChart(data)32:T4b5d,projectedSeaLevelChart = function (data) { // Dimensioni del grafico const width = 960; const height = 600; const margin = { top: 60, right: 150, bottom: 60, left: 80 }; const innerWidth = width - margin.left - margin.right; const innerHeight = height - margin.top - margin.bottom; // Riorganizza i dati per adattarli al formato atteso const processedData = []; // Estrai gli anni disponibili const years = data.map((d) => +d.Year); // Estrai gli scenari dai nomi delle colonne const scenarioSet = new Set(); Object.keys(data[0]).forEach((key) => { if (key !== "Year") { const scenarioParts = key.split(" "); if (scenarioParts.length === 2) { scenarioSet.add(scenarioParts[0]); } } }); const scenarios = [...scenarioSet]; // Creiamo un array di colori per gli scenari const scenarioColors = { "SSP1-1.9": "#1b9e77", // Verde scuro "SSP1-2.6": "#66c2a5", // Verde acqua "SSP2-4.5": "#fc8d62", // Arancione "SSP3-7.0": "#e78ac3", // Rosa "SSP5-8.5": "#e41a1c" // Rosso }; // Prepara i dati per ogni scenario e percentile scenarios.forEach((scenario) => { // Colonne per questo scenario const col5 = `${scenario} 5`; const col50 = `${scenario} 50`; const col95 = `${scenario} 95`; // Serie dati per il 5° percentile if (data[0][col5] !== undefined) { const series5 = data .map((d) => ({ year: +d.Year, value: +d[col5], scenario, percentile: "5" })) .filter((d) => !isNaN(d.year) && !isNaN(d.value)); if (series5.length > 0) { processedData.push({ scenario, percentile: "5", series: series5 }); } } // Serie dati per il 50° percentile (mediana) if (data[0][col50] !== undefined) { const series50 = data .map((d) => ({ year: +d.Year, value: +d[col50], scenario, percentile: "50" })) .filter((d) => !isNaN(d.year) && !isNaN(d.value)); if (series50.length > 0) { processedData.push({ scenario, percentile: "50", series: series50 }); } } // Serie dati per il 95° percentile if (data[0][col95] !== undefined) { const series95 = data .map((d) => ({ year: +d.Year, value: +d[col95], scenario, percentile: "95" })) .filter((d) => !isNaN(d.year) && !isNaN(d.value)); if (series95.length > 0) { processedData.push({ scenario, percentile: "95", series: series95 }); } } }); // Crea le scale const xScale = d3 .scaleLinear() .domain([Math.min(...years), Math.max(...years)]) .range([0, innerWidth]); // Trova il valore minimo e massimo per la scala y const allValues = processedData.flatMap((d) => d.series.map((p) => p.value)); const yMin = Math.min(...allValues); const yMax = Math.max(...allValues); const yScale = d3 .scaleLinear() .domain([Math.min(0, yMin), yMax * 1.1]) // Aggiungi un po' di spazio in alto .range([innerHeight, 0]) .nice(); // Crea il generatore della linea const line = d3 .line() .x((d) => xScale(d.year)) .y((d) => yScale(d.value)); // Crea l'area per gli intervalli di confidenza const area = d3 .area() .x((d) => xScale(d.year)) .y0((d) => yScale(d.min)) .y1((d) => yScale(d.max)); // Crea l'elemento SVG const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto;"); // Aggiungi div per tooltip const tooltip = d3 .select("body") .append("div") .attr("class", "tooltip") .style("position", "absolute") .style("background-color", "white") .style("border", "1px solid #ddd") .style("border-radius", "3px") .style("padding", "10px") .style("box-shadow", "2px 2px 6px rgba(0, 0, 0, 0.2)") .style("pointer-events", "none") .style("opacity", 0) .style("font-family", "sans-serif") .style("font-size", "12px") .style("z-index", 1000); // Assicura che il tooltip sia sopra altri elementi // Crea il gruppo principale const g = svg .append("g") .attr("transform", `translate(${margin.left},${margin.top})`); // Crea un gruppo per le aree di confidenza const confidenceGroup = g.append("g").attr("class", "confidence-areas"); // Crea un gruppo per le linee const linesGroup = g.append("g").attr("class", "lines"); // Crea un gruppo per i punti interattivi const pointsGroup = g.append("g").attr("class", "interactive-points"); // Variabile per tenere traccia dello scenario attualmente selezionato let activeScenario = null; // Raggruppa i dati per scenario per creare aree di confidenza const confidenceAreas = []; scenarios.forEach((scenario) => { // Trova i dati per i percentili 5 e 95 const seriesLow = processedData.find( (d) => d.scenario === scenario && d.percentile === "5" ); const seriesHigh = processedData.find( (d) => d.scenario === scenario && d.percentile === "95" ); // Controlla che entrambi esistano if (!seriesLow || !seriesHigh) { console.log( `Intervallo di confidenza mancante per lo scenario ${scenario}` ); return; // Salta questo scenario } // Assicurati che abbiano lo stesso numero di punti e anni corrispondenti const years = seriesLow.series.map((d) => d.year); const lowValues = {}; seriesLow.series.forEach((d) => (lowValues[d.year] = d.value)); const highValues = {}; seriesHigh.series.forEach((d) => (highValues[d.year] = d.value)); const areaData = []; years.forEach((year) => { if (lowValues[year] !== undefined && highValues[year] !== undefined) { areaData.push({ year, min: lowValues[year], max: highValues[year], scenario }); } }); if (areaData.length > 0) { confidenceAreas.push({ scenario, data: areaData }); } }); // Disegna le aree di confidenza (inizialmente con opacità 0, saranno attivate all'interazione) confidenceAreas.forEach((conf) => { confidenceGroup .append("path") .datum(conf.data) .attr( "class", `confidence-area-${conf.scenario.replace(/[^a-zA-Z0-9]/g, "-")}` ) .attr("fill", scenarioColors[conf.scenario]) .attr("fill-opacity", 0.05) // Inizialmente quasi invisibile .attr("d", area) .attr("pointer-events", "none"); // Non interferisce con gli eventi del mouse }); // Disegna tutte le linee const linePaths = {}; processedData.forEach((d) => { // Disegna solo le linee con percentile 50 (le principali) if (d.percentile === "50") { // Se non abbiamo un colore predefinito per questo scenario, ne generiamo uno const color = scenarioColors[d.scenario] || `hsl(${Math.random() * 360}, 70%, 50%)`; const scenarioId = d.scenario.replace(/[^a-zA-Z0-9]/g, "-"); // Controlla che ci siano abbastanza punti per disegnare la linea if (d.series.length > 0) { const linePath = linesGroup .append("path") .datum(d.series) .attr("class", `line-${scenarioId}`) .attr("fill", "none") .attr("stroke", color) .attr("stroke-width", 2.5) .attr("d", line) .attr("cursor", "pointer") .on("mouseover", function () { // Evidenzia la linea e attiva l'area di confidenza d3.select(this).attr("stroke-width", 4); d3.select(`.confidence-area-${scenarioId}`) .transition() .duration(200) .attr("fill-opacity", 0.3); }) .on("mouseout", function () { // Ripristina lo stato originale se non è selezionato if (activeScenario !== d.scenario) { d3.select(this).attr("stroke-width", 2.5); d3.select(`.confidence-area-${scenarioId}`) .transition() .duration(200) .attr("fill-opacity", 0.05); } }) .on("click", function () { // Se è già attivo, disattiva if (activeScenario === d.scenario) { activeScenario = null; // Ripristina tutte le linee e aree scenarios.forEach((s) => { const sid = s.replace(/[^a-zA-Z0-9]/g, "-"); d3.select(`.line-${sid}`).attr("stroke-width", 2.5); d3.select(`.confidence-area-${sid}`) .transition() .duration(200) .attr("fill-opacity", 0.05); }); } else { // Altrimenti, attiva questo scenario e disattiva gli altri activeScenario = d.scenario; // Disattiva gli altri scenari scenarios.forEach((s) => { const sid = s.replace(/[^a-zA-Z0-9]/g, "-"); if (s !== d.scenario) { d3.select(`.line-${sid}`) .attr("stroke-width", 1.5) .attr("stroke-opacity", 0.5); d3.select(`.confidence-area-${sid}`) .transition() .duration(200) .attr("fill-opacity", 0); } else { d3.select(`.line-${sid}`) .attr("stroke-width", 4) .attr("stroke-opacity", 1); d3.select(`.confidence-area-${sid}`) .transition() .duration(200) .attr("fill-opacity", 0.4); } }); } }); linePaths[d.scenario] = linePath; } } }); // Aggiungi punti per l'interazione con il mouse scenarios.forEach((scenario) => { // Trova i dati mediani per questo scenario const medianData = processedData.find( (d) => d.scenario === scenario && d.percentile === "50" ); // Trova i dati per i limiti inferiore e superiore const lowData = processedData.find( (d) => d.scenario === scenario && d.percentile === "5" ); const highData = processedData.find( (d) => d.scenario === scenario && d.percentile === "95" ); // Salta se non abbiamo i dati mediani if (!medianData || !medianData.series || medianData.series.length === 0) { return; } const medianSeries = medianData.series; const lowSeries = lowData ? lowData.series : []; const highSeries = highData ? highData.series : []; const safeScenarioId = scenario.replace(/[^a-zA-Z0-9]/g, "-"); // Aggiungi un'area invisibile più ampia per facilitare l'interazione pointsGroup .append("path") .datum(medianSeries) .attr("class", `hover-area-${safeScenarioId}`) .attr("fill", "none") .attr("stroke", "transparent") .attr("stroke-width", 15) // Area sensibile più ampia .attr("d", line) .attr("cursor", "pointer") .on("mouseover", function () { // Evidenzia la linea e attiva l'area di confidenza const linePath = d3.select(`.line-${safeScenarioId}`); linePath.attr("stroke-width", 4); d3.select(`.confidence-area-${safeScenarioId}`) .transition() .duration(200) .attr("fill-opacity", 0.3); }) .on("mouseout", function () { // Ripristina lo stato originale se non è selezionato if (activeScenario !== scenario) { d3.select(`.line-${safeScenarioId}`).attr("stroke-width", 2.5); d3.select(`.confidence-area-${safeScenarioId}`) .transition() .duration(200) .attr("fill-opacity", 0.05); } }) .on("click", function () { // Stessa logica del click sulla linea if (activeScenario === scenario) { activeScenario = null; scenarios.forEach((s) => { const sid = s.replace(/[^a-zA-Z0-9]/g, "-"); d3.select(`.line-${sid}`) .attr("stroke-width", 2.5) .attr("stroke-opacity", 1); d3.select(`.confidence-area-${sid}`) .transition() .duration(200) .attr("fill-opacity", 0.05); }); } else { activeScenario = scenario; scenarios.forEach((s) => { const sid = s.replace(/[^a-zA-Z0-9]/g, "-"); if (s !== scenario) { d3.select(`.line-${sid}`) .attr("stroke-width", 1.5) .attr("stroke-opacity", 0.5); d3.select(`.confidence-area-${sid}`) .transition() .duration(200) .attr("fill-opacity", 0); } else { d3.select(`.line-${sid}`) .attr("stroke-width", 4) .attr("stroke-opacity", 1); d3.select(`.confidence-area-${sid}`) .transition() .duration(200) .attr("fill-opacity", 0.4); } }); } }); // Aggiungi i punti interattivi per i tooltip pointsGroup .selectAll(`.point-${safeScenarioId}`) .data(medianSeries) .join("circle") .attr("class", `point-${safeScenarioId}`) .attr("cx", (d) => xScale(d.year)) .attr("cy", (d) => yScale(d.value)) .attr("r", 5) // Punti leggermente più grandi per facilitare l'interazione .attr("fill", "transparent") .attr("stroke", "transparent") .attr("stroke-width", 1) .attr("cursor", "pointer") .on("mouseover", function (event, d) { // Evidenzia il punto d3.select(this).attr("fill", scenarioColors[scenario]).attr("r", 7); // Trova i valori corrispondenti nei limiti inferiore e superiore let low = null; let high = null; if (lowSeries && lowSeries.length > 0) { const lowPoint = lowSeries.find((p) => p.year === d.year); if (lowPoint) low = lowPoint.value; } if (highSeries && highSeries.length > 0) { const highPoint = highSeries.find((p) => p.year === d.year); if (highPoint) high = highPoint.value; } // Crea contenuto dettagliato per il tooltip let tooltipContent = `

${scenario}

Anno: ${ d.year }

Mediana (50%): ${d.value.toFixed(2)} m

`; if (low !== null) { tooltipContent += `

Inferiore (5%): ${low.toFixed(2)} m

`; } if (high !== null) { tooltipContent += `

Superiore (95%): ${high.toFixed(2)} m

`; } // Mostra il tooltip con animazione tooltip.transition().duration(200).style("opacity", 0.95); tooltip .html(tooltipContent) .style("left", event.pageX + 15 + "px") .style("top", event.pageY - 28 + "px") .style("border-left", `4px solid ${scenarioColors[scenario]}`); }) .on("mouseout", function () { // Nascondi il tooltip tooltip.transition().duration(500).style("opacity", 0); // Ripristina lo stato originale del punto d3.select(this).attr("fill", "transparent").attr("r", 5); }); }); // Asse X g.append("g") .attr("transform", `translate(0,${innerHeight})`) .call(d3.axisBottom(xScale).tickFormat(d3.format("d")).ticks(10)) .call((g) => g.select(".domain").attr("stroke-opacity", 0.5)) .call((g) => g.selectAll(".tick line").attr("stroke-opacity", 0.5)); // Asse Y g.append("g") .call(d3.axisLeft(yScale).tickFormat((d) => `${d} m`)) .call((g) => g.select(".domain").attr("stroke-opacity", 0.5)) .call((g) => g .selectAll(".tick line") .attr("x2", innerWidth) .attr("stroke-opacity", 0.1) ); // Etichetta asse X g.append("text") .attr("x", innerWidth / 2) .attr("y", innerHeight + 40) .attr("text-anchor", "middle") .attr("fill", "black") .text("Anno"); // Etichetta asse Y g.append("text") .attr("transform", "rotate(-90)") .attr("x", -innerHeight / 2) .attr("y", -60) .attr("text-anchor", "middle") .attr("fill", "black") .text("Innalzamento del livello del mare (m)"); // Titolo g.append("text") .attr("x", innerWidth / 2) .attr("y", -15) .attr("text-anchor", "middle") .attr("fill", "black") .attr("font-weight", "bold") .attr("font-size", "16px") .text("Proiezioni dell'Innalzamento del Livello del Mare per Scenario"); // Legenda const legend = g .append("g") .attr("transform", `translate(${innerWidth + 20}, 10)`); // Aggiungi una voce per ogni scenario scenarios.forEach((scenario, i) => { const scenarioId = scenario.replace(/[^a-zA-Z0-9]/g, "-"); const legendItem = legend .append("g") .attr("transform", `translate(0, ${i * 50})`) .attr("cursor", "pointer") .on("click", function () { // Simula il click sulla linea corrispondente const lineElem = document.querySelector(`.line-${scenarioId}`); if (lineElem) { lineElem.dispatchEvent(new Event("click")); } }); // Linea per la mediana legendItem .append("line") .attr("x1", 0) .attr("y1", 7) .attr("x2", 20) .attr("y2", 7) .attr("stroke", scenarioColors[scenario] || "gray") .attr("stroke-width", 2.5); // Area per l'intervallo di confidenza legendItem .append("rect") .attr("x", 0) .attr("y", 2) .attr("width", 20) .attr("height", 10) .attr("fill", scenarioColors[scenario] || "gray") .attr("fill-opacity", 0.2); // Testo per lo scenario legendItem .append("text") .attr("x", 30) .attr("y", 10) .text(scenario) .attr("font-size", "12px") .attr("alignment-baseline", "middle"); // Descrizione aggiuntiva legendItem .append("text") .attr("x", 30) .attr("y", 25) .text("Mediana (50%) e intervallo 5%-95%") .attr("font-size", "10px") .attr("fill", "#666"); }); // Aggiungi informazioni per l'interattività g.append("text") .attr("x", innerWidth / 2) .attr("y", -40) .attr("text-anchor", "middle") .attr("fill", "#666") .attr("font-style", "italic") .attr("font-size", "12px") .text( "Clicca su una linea o sulla legenda per evidenziare uno scenario. Clicca di nuovo per deselezionare." ); return svg.node(); }33:T54a,// Test di accesso diretto al file directFetchTest = { // Costruisci l'URL completo const testUrl = fileConfig[0].url; // Prova a fare il fetch direttamente return fetch(testUrl) .then((response) => { if (!response.ok) { throw new Error(`HTTP error! Status: ${response.status}`); } return response.text(); }) .then((text) => { // Mostra le prime righe del file const firstLines = text.split("\n").slice(0, 10).join("\n"); return htl.html`

Test di accesso al file: ${testUrl}

Status: ✅ Successo

Prime righe del file:

${firstLines}

`; }) .catch((error) => { return htl.html`

Test di accesso al file: ${testUrl}

Status: ❌ Errore

Messaggio: ${error.message}

Verifica che l'URL sia corretto e accessibile pubblicamente.

URL corrente: ${testUrl}

Assicurati che:

Il repository sia pubblico o tu sia autenticato
Il percorso del file all'interno del repository sia corretto
Stai usando il ramo corretto (main, master, etc.)

`; }); }34:T25f5,// Cella 7 modificata: Funzione per creare la mappa con terre grigie e zoom createMap = function (data, title) { // Verifica se i dati geografici sono caricati if (!worldLands) return "Caricamento dati geografici in corso..."; // Dimensioni e margini const width = 800; const height = 500; const margin = { top: 40, right: 10, bottom: 60, left: 10 }; const mapWidth = width - margin.left - margin.right; const mapHeight = height - margin.top - margin.bottom; // Creazione SVG const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto;"); // Gruppo per la mappa con un id per riferimento const mapGroup = svg .append("g") .attr("id", "map-content") .attr("transform", `translate(${margin.left}, ${margin.top})`); // Proiezione geografica const projection = d3 .geoEquirectangular() .scale(mapWidth / 6) .translate([mapWidth / 2, mapHeight / 2]); const path = d3.geoPath().projection(projection); // Scala di colori personalizzata con maggiore contrasto const customColorScale = (value) => { // Valori negativi: blu scuro -> blu chiaro if (value < 0) { const t = (value + 0.17) / 0.17; // Normalizzato tra 0 e 1 return d3.interpolateRgb("#0000CC", "#88BBFF")(t); } // Valori 0-0.3: verde chiaro -> giallo else if (value < 0.3) { const t = value / 0.3; return d3.interpolateRgb("#00CC00", "#FFCC00")(t); } // Valori 0.3-0.6: giallo -> arancione (più saturato) else if (value < 0.6) { const t = (value - 0.3) / 0.3; return d3.interpolateRgb("#FFCC00", "#FF8800")(t); } // Valori 0.6-1.06: arancione -> rosso scuro else { const t = (value - 0.6) / 0.46; return d3.interpolateRgb("#FF8800", "#CC0000")(t); } }; // Disegna sfondo mondo (oceano) - BIANCO mapGroup .append("path") .datum({ type: "Sphere" }) .attr("fill", "#FFFFFF") .attr("stroke", "#888") .attr("stroke-width", 0.5) .attr("d", path); // Disegna le terre in grigio mapGroup .append("path") .datum(worldLands) .attr("fill", "#f0f0f0") .attr("stroke", "#ccc") .attr("stroke-width", 0.3) .attr("d", path); // Disegna graticola const graticule = d3.geoGraticule(); mapGroup .append("path") .datum(graticule) .attr("d", path) .attr("fill", "none") .attr("stroke", "#ccc") .attr("stroke-width", 0.5); // Campiona i dati per prestazioni migliori const sampledData = data.filter( (d, i) => i % Math.ceil(data.length / 8000) === 0 ); // Crea un div per il tooltip const tooltip = d3 .select("body") .append("div") .attr("class", "tooltip") .style("position", "absolute") .style("background-color", "rgba(255, 255, 255, 0.9)") .style("border", "1px solid #ddd") .style("border-radius", "4px") .style("padding", "6px") .style("font-size", "12px") .style("pointer-events", "none") .style("opacity", 0) .style("z-index", 1000); // Disegna punti dati con tooltip mapGroup .selectAll("circle") .data(sampledData) .join("circle") .attr("cx", (d) => { const coords = projection([d.longitude, d.latitude]); return coords ? coords[0] : null; }) .attr("cy", (d) => { const coords = projection([d.longitude, d.latitude]); return coords ? coords[1] : null; }) .attr("r", 1.5) .attr("fill", (d) => customColorScale(d.valueMedian)) .attr("opacity", 0.7) .style("cursor", "pointer") .on("mouseover", function (event, d) { // Mostra il tooltip senza cambiare la dimensione del punto tooltip.transition().duration(100).style("opacity", 0.9); // Formatta i dati per il tooltip const lat = d.latitude.toFixed(2); const lon = d.longitude.toFixed(2); const median = d.valueMedian.toFixed(3); const low = d.value5th.toFixed(3); const high = d.value95th.toFixed(3); tooltip .html( ` Posizione: ${lat}°, ${lon}°
RSLR Mediana: ${median} m
5° percentile: ${low} m
95° percentile: ${high} m ` ) .style("left", event.pageX + 10 + "px") .style("top", event.pageY - 28 + "px"); }) .on("mouseout", function () { // Nasconde il tooltip tooltip.transition().duration(100).style("opacity", 0); }); // Aggiungi titolo svg .append("text") .attr("x", width / 2) .attr("y", 20) .attr("text-anchor", "middle") .attr("font-size", "16px") .attr("font-weight", "bold") .text(title); // Aggiungi legenda colori const legendWidth = 400; const legendHeight = 15; const legendX = (width - legendWidth) / 2; const legendY = height - margin.bottom - 5; const legendScale = d3 .scaleLinear() .domain([-0.17, 1.06]) .range([0, legendWidth]); const legendAxis = d3 .axisBottom(legendScale) .ticks(8) .tickFormat((d) => d.toFixed(2)); // Crea gradiente per la legenda const defs = svg.append("defs"); const linearGradientId = "color-gradient-" + Math.random().toString(36).substr(2, 9); const linearGradient = defs .append("linearGradient") .attr("id", linearGradientId) .attr("x1", "0%") .attr("y1", "0%") .attr("x2", "100%") .attr("y2", "0%"); // Aggiungi fermate di colore al gradiente personalizzate const gradientStops = [ { offset: "0%", value: -0.17 }, { offset: "14%", value: 0 }, { offset: "40%", value: 0.3 }, { offset: "65%", value: 0.6 }, { offset: "100%", value: 1.06 } ]; gradientStops.forEach((stop) => { linearGradient .append("stop") .attr("offset", stop.offset) .attr("stop-color", customColorScale(stop.value)); }); // Disegna rettangolo della legenda con gradiente svg .append("g") .attr("transform", `translate(${legendX}, ${legendY})`) .append("rect") .attr("width", legendWidth) .attr("height", legendHeight) .style("fill", `url(#${linearGradientId})`); // Aggiungi asse della legenda svg .append("g") .attr("transform", `translate(${legendX}, ${legendY + legendHeight})`) .call(legendAxis); // Aggiungi titolo legenda svg .append("text") .attr("x", width / 2) .attr("y", legendY + legendHeight + 40) .attr("text-anchor", "middle") .attr("font-size", "14px") .attr("font-weight", "normal") .attr("fill", "#333") .text("RSLR (m)"); // Funzione di zoom modificata per permettere solo lo spostamento con il mouse, non lo zoom const zoom = d3 .zoom() .scaleExtent([1, 8]) // Limita lo zoom da 1x a 8x .wheelDelta(() => 0) // Disabilita la rotella del mouse per lo zoom .on("zoom", (event) => { mapGroup.attr("transform", event.transform); // Aggiorna la dimensione dei punti in base al livello di zoom const scale = event.transform.k; mapGroup.selectAll("circle").attr("r", 1.5 / Math.sqrt(scale)); // Aggiusta lo spessore delle linee in base al livello di zoom mapGroup.selectAll("path").attr("stroke-width", (d) => { if (d && d.type === "Sphere") return 0.5 / scale; return d && d.type === "GraticuleX" ? 0.5 / scale : 0.3 / scale; }); }); // Aggiungi controlli zoom const zoomControls = svg .append("g") .attr("class", "zoom-controls") .attr("transform", `translate(${width - 60}, ${margin.top + 20})`); // Pulsante zoom in zoomControls .append("rect") .attr("x", 0) .attr("y", 0) .attr("width", 30) .attr("height", 30) .attr("fill", "#fff") .attr("stroke", "#ccc") .attr("rx", 5) .style("cursor", "pointer") .on("click", () => { svg.transition().call(zoom.scaleBy, 1.3); }); zoomControls .append("text") .attr("x", 15) .attr("y", 20) .attr("text-anchor", "middle") .attr("font-size", "18px") .attr("fill", "#555") .style("pointer-events", "none") .text("+"); // Pulsante zoom out zoomControls .append("rect") .attr("x", 0) .attr("y", 40) .attr("width", 30) .attr("height", 30) .attr("fill", "#fff") .attr("stroke", "#ccc") .attr("rx", 5) .style("cursor", "pointer") .on("click", () => { svg.transition().call(zoom.scaleBy, 0.7); }); zoomControls .append("text") .attr("x", 15) .attr("y", 60) .attr("text-anchor", "middle") .attr("font-size", "18px") .attr("fill", "#555") .style("pointer-events", "none") .text("−"); // Pulsante reset zoom zoomControls .append("rect") .attr("x", 0) .attr("y", 80) .attr("width", 30) .attr("height", 30) .attr("fill", "#fff") .attr("stroke", "#ccc") .attr("rx", 5) .style("cursor", "pointer") .on("click", () => { svg.transition().call(zoom.transform, d3.zoomIdentity); }); zoomControls .append("text") .attr("x", 15) .attr("y", 100) .attr("text-anchor", "middle") .attr("font-size", "12px") .attr("fill", "#555") .style("pointer-events", "none") .text("R"); // Abilita lo zoom e il pan sull'SVG (disabilita solo la rotella del mouse) svg.call(zoom).style("cursor", "grab"); // Aggiungi istruzioni di zoom svg .append("text") .attr("x", margin.left + 10) .attr("y", margin.top + 20) .attr("font-size", "12px") .attr("fill", "#555") .text( "Clicca e trascina per spostare la mappa, usa i pulsanti per zoomare" ); return svg.node(); }35:T1a30,// Cella 9: Visualizzazione a 4 pannelli aggiornata fourPanelChart = { // Verifica che tutti i dati siano caricati if (!data3) return "Caricamento dati in corso..."; if (!worldLands) return "Caricamento dati geografici in corso..."; // Verifica ogni dataset necessario const requiredDatasets = [ "rcp45_2050", "rcp45_2100", "rcp85_2050", "rcp85_2100" ]; const missingDatasets = requiredDatasets.filter( (id) => !data3[id] || data3[id].length === 0 ); if (missingDatasets.length > 0) { return `Impossibile creare la visualizzazione a 4 pannelli. Dataset mancanti: ${missingDatasets.join( ", " )}`; } // Procedi con la creazione del grafico // Dimensioni e margini const width = 900; const height = 600; const margin = { top: 30, right: 10, bottom: 50, left: 10 }; const panelWidth = (width - margin.left - margin.right) / 2; const panelHeight = (height - margin.top - margin.bottom) / 2; // Creazione SVG const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto;"); // Configurazione dei pannelli const panels = [ { id: "rcp45_2050", x: margin.left, y: margin.top, label: "RCP4.5, 2050" }, { id: "rcp45_2100", x: margin.left + panelWidth, y: margin.top, label: "RCP4.5, 2100" }, { id: "rcp85_2050", x: margin.left, y: margin.top + panelHeight, label: "RCP8.5, 2050" }, { id: "rcp85_2100", x: margin.left + panelWidth, y: margin.top + panelHeight, label: "RCP8.5, 2100" } ]; // Scala di colori personalizzata con maggiore contrasto const customColorScale = (value) => { // Valori negativi: blu scuro -> blu chiaro if (value < 0) { const t = (value + 0.17) / 0.17; // Normalizzato tra 0 e 1 return d3.interpolateRgb("#0000CC", "#88BBFF")(t); } // Valori 0-0.3: verde chiaro -> giallo else if (value < 0.3) { const t = value / 0.3; return d3.interpolateRgb("#00CC00", "#FFCC00")(t); } // Valori 0.3-0.6: giallo -> arancione (più saturato) else if (value < 0.6) { const t = (value - 0.3) / 0.3; return d3.interpolateRgb("#FFCC00", "#FF8800")(t); } // Valori 0.6-1.06: arancione -> rosso scuro else { const t = (value - 0.6) / 0.46; return d3.interpolateRgb("#FF8800", "#CC0000")(t); } }; // Crea ogni pannello panels.forEach((panel) => { const datasetId = panel.id; const dataset = data3[datasetId]; // Creazione del gruppo per questo pannello const g = svg .append("g") .attr("transform", `translate(${panel.x}, ${panel.y})`); // Proiezione geografica const projection = d3 .geoEquirectangular() .scale(panelWidth / 6) .translate([panelWidth / 2, panelHeight / 2]); const path = d3.geoPath().projection(projection); // Disegna sfondo oceano in bianco g.append("path") .datum({ type: "Sphere" }) .attr("fill", "#FFFFFF") .attr("stroke", "#888") .attr("stroke-width", 0.5) .attr("d", path); // Disegna le terre in grigio g.append("path") .datum(worldLands) .attr("fill", "#f0f0f0") .attr("stroke", "#ccc") .attr("stroke-width", 0.3) .attr("d", path); // Disegna graticola const graticule = d3.geoGraticule(); g.append("path") .datum(graticule) .attr("d", path) .attr("fill", "none") .attr("stroke", "#ccc") .attr("stroke-width", 0.5); // Campiona i dati per prestazioni migliori const sampledData = dataset.filter( (d, i) => i % Math.ceil(dataset.length / 4000) === 0 ); // Disegna punti dati g.selectAll("circle") .data(sampledData) .join("circle") .attr("cx", (d) => { const coords = projection([d.longitude, d.latitude]); return coords ? coords[0] : null; }) .attr("cy", (d) => { const coords = projection([d.longitude, d.latitude]); return coords ? coords[1] : null; }) .attr("r", 1.0) .attr("fill", (d) => customColorScale(d.valueMedian)) .attr("opacity", 0.7); // Aggiungi etichetta (spostata più in alto per evitare sovrapposizioni) g.append("text") .attr("x", 10) .attr("y", 150) .attr("font-size", "17px") .attr("font-weight", "bold") .attr("fill", "#555") .text(panel.label); }); // Aggiungi legenda colori comune const legendWidth = 400; const legendHeight = 15; const legendX = (width - legendWidth) / 2; const legendY = height - margin.bottom - 5; const legendScale = d3 .scaleLinear() .domain([-0.17, 1.06]) .range([0, legendWidth]); const legendAxis = d3 .axisBottom(legendScale) .ticks(8) .tickFormat((d) => d.toFixed(2)); // Crea gradiente per la legenda const defs = svg.append("defs"); const linearGradientId = "color-gradient-" + Math.random().toString(36).substr(2, 9); const linearGradient = defs .append("linearGradient") .attr("id", linearGradientId) .attr("x1", "0%") .attr("y1", "0%") .attr("x2", "100%") .attr("y2", "0%"); // Aggiungi fermate di colore al gradiente personalizzate const gradientStops = [ { offset: "0%", value: -0.17 }, { offset: "14%", value: 0 }, { offset: "40%", value: 0.3 }, { offset: "65%", value: 0.6 }, { offset: "100%", value: 1.06 } ]; gradientStops.forEach((stop) => { linearGradient .append("stop") .attr("offset", stop.offset) .attr("stop-color", customColorScale(stop.value)); }); // Disegna rettangolo della legenda con gradiente svg .append("g") .attr("transform", `translate(${legendX}, ${legendY})`) .append("rect") .attr("width", legendWidth) .attr("height", legendHeight) .style("fill", `url(#${linearGradientId})`); // Aggiungi asse della legenda svg .append("g") .attr("transform", `translate(${legendX}, ${legendY + legendHeight})`) .call(legendAxis); // Aggiungi titolo legenda svg .append("text") .attr("x", width / 2) .attr("y", legendY + legendHeight + 40) .attr("text-anchor", "middle") .attr("font-size", "14px") .attr("font-weight", "normal") .attr("fill", "#333") .text("RSLR (m)"); // Aggiungi titolo principale svg .append("text") .attr("x", width / 2) .attr("y", 15) .attr("text-anchor", "middle") .attr("font-size", "16px") .attr("font-weight", "bold") .text("Relative Sea Level Rise Projections"); return svg.node(); }36:Ta2b,Uno studio di Christodoulou et al. (2019) ha analizzato gli impatti del cambiamento climatico sui porti, evidenziando come un aumento del livello del mare di oltre 0,5 metri potrebbe avere conseguenze significative per le coste europee. Le aree più a rischio includono il Mare del Nord, il Mar Baltico occidentale e le coste atlantiche britanniche e francesi. Inoltre, si prevede un aumento considerevole del volume di merci movimentate in porti esposti a livelli estremi del mare superiori a 4,5 metri, con la maggior parte di questi porti situati in Spagna, Regno Unito, Irlanda, Portogallo e Norvegia. Grafico 4, rischio porti europei ## L'impatto economico sui porti a livello globale Le conseguenze economiche dell'innalzamento del livello del mare sui porti globali non sono solo teoriche, ma rappresentano un rischio concreto e quantificabile. La ricerca condotta da Verschuur et al. (2023) offre una valutazione completa di questo impatto, isolando il contributo specifico delle inondazioni costiere rispetto ad altri pericoli naturali. Secondo questo studio autorevole, il rischio economico annuale derivante dalle sole inondazioni costiere ammonta a circa 0,8 miliardi di dollari per le infrastrutture portuali globali. Questa cifra, sebbene già considerevole, rappresenta solo una frazione del rischio totale di 7,5 miliardi di dollari annui che i porti affrontano a causa di tutti i pericoli naturali combinati. Particolarmente allarmante è l'effetto a cascata che queste interruzioni hanno sul commercio mondiale. Le inondazioni costiere contribuiscono significativamente al rischio commerciale totale, stimato in 63,1 miliardi di dollari annui. In termini percentuali, circa lo 0,8% del valore totale del commercio marittimo globale è a rischio di interruzione ogni anno a causa di eventi naturali, con le inondazioni costiere che rappresentano la minaccia dominante per quasi un quarto (23,7%) dei porti mondiali. La distribuzione geografica di questo rischio non è uniforme: i porti dell'Europa occidentale e settentrionale risultano particolarmente vulnerabili, come evidenziato nel grafico seguente che visualizza il rischio medio annuale stimato per ciascun porto dovuto specificamente alle inondazioni costiere. Questa visualizzazione non solo illustra l'entità del rischio economico, ma evidenzia anche le aree geografiche prioritarie dove gli investimenti in misure di adattamento potrebbero generare i maggiori benefici in termini di protezione del commercio globale e delle economie locali. Grafico 5, danno economico (https://www.nature.com/articles/s43247-022-00656-7)37:T1ced,// Crea una proiezione geografica map = { const width = 960; const height = 500; // Crea una proiezione naturale della Terra const projection = d3 .geoNaturalEarth1() .scale(width / 2 / Math.PI) .translate([width / 2, height / 2]); // Crea un percorso per disegnare i contorni dei paesi const path = d3.geoPath(projection); // Carica i dati geografici mondiali const world = d3 .json("https://unpkg.com/world-atlas@1/world/110m.json") .then((world) => { const countries = topojson.feature(world, world.objects.countries); // Crea una scala di colori per il rischio const riskColor = d3 .scaleOrdinal(d3.schemeCategory10) .domain(["Coastal"]); // Crea una scala per le dimensioni dei punti basata sul rischio medio // Riduzione delle dimensioni per evitare sovrapposizioni const riskSize = d3 .scaleSqrt() .domain([0, d3.max(coastal_data, (d) => +d.risk_median)]) .range([1, 10]); // Crea il grafico SVG const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width) .attr("height", height) .attr("style", "max-width: 100%; height: auto;"); // Aggiungi un elemento per il panning e lo zoom const g = svg.append("g"); // Disegna i contorni dei paesi g.append("g") .selectAll("path") .data(countries.features) .join("path") .attr("fill", "#ddd") .attr("stroke", "#fff") .attr("d", path); // Ordina i dati dal più grande al più piccolo const sortedData = [...coastal_data].sort( (a, b) => +b.risk_median - +a.risk_median ); // Disegna i punti per i porti, colorati in base al rischio costiero // Prima i più grandi (dietro), poi i più piccoli (davanti) g.append("g") .selectAll("circle") .data(sortedData) .join("circle") .attr("cx", (d) => projection([+d.lon, +d.lat])[0]) .attr("cy", (d) => projection([+d.lon, +d.lat])[1]) .attr("r", (d) => riskSize(+d.risk_median)) .attr("fill", (d) => "#f9a03c") .attr("opacity", 0.7) .attr("stroke", "#fff") .attr("stroke-width", 0.5) .append("title") .text((d) => { // Converte il valore in milioni e arrotonda a 1 decimale const riskInMillions = (+d.risk_median / 1000000).toFixed(1); return `${d.port_name}, ${d.country}\nRischio: ${riskInMillions} milioni all'anno`; }); // Aggiungi il titolo in italiano svg .append("text") .attr("x", width / 2) .attr("y", 30) .attr("text-anchor", "middle") .style("font-size", "20px") .style("font-weight", "bold") .text("Impronta globale del rischio costiero portuale"); // Aggiungi la legenda const legendSize = [0, 50, 100, 200, 500]; // Valori in milioni di USD const legend = svg .append("g") .attr("transform", `translate(20, ${height - 130})`); legend .append("text") .attr("x", 0) .attr("y", -10) .style("font-size", "12px") .style("font-weight", "bold") .text("Legenda (USDmio per anno)"); // Usa la stessa scala della mappa per i pallini della legenda legend .selectAll("circle") .data(legendSize) .join("circle") .attr("cx", 10) .attr("cy", (d, i) => i * 25 + 10) .attr("r", (d) => riskSize(d * 1000000)) // Usa la stessa scala della mappa .attr("fill", "#f9a03c") .attr("opacity", 0.7) .attr("stroke", "#fff") .attr("stroke-width", 0.5); legend .selectAll("text") .data(legendSize) .join("text") .attr("x", 30) .attr("y", (d, i) => i * 25 + 10) .attr("dy", "0.35em") .style("font-size", "12px") .text((d) => d + " USDmio"); // Aggiungi i controlli dello zoom con pulsanti const zoomControl = svg .append("g") .attr("transform", `translate(${width - 60}, ${height - 100})`); // Crea un rettangolo di sfondo per i controlli zoomControl .append("rect") .attr("x", -10) .attr("y", -10) .attr("width", 60) .attr("height", 140) // Aumentato per includere il pulsante RESET .attr("fill", "white") .attr("opacity", 0.7) .attr("rx", 5); // Pulsante per lo zoom in const zoomIn = zoomControl.append("g").attr("cursor", "pointer"); zoomIn .append("circle") .attr("r", 15) .attr("fill", "#f5f5f5") .attr("stroke", "#aaa"); zoomIn .append("text") .attr("text-anchor", "middle") .attr("dy", "0.35em") .style("font-size", "18px") .style("font-weight", "bold") .text("+"); // Pulsante per lo zoom out const zoomOut = zoomControl .append("g") .attr("transform", "translate(0, 40)") .attr("cursor", "pointer"); zoomOut .append("circle") .attr("r", 15) .attr("fill", "#f5f5f5") .attr("stroke", "#aaa"); zoomOut .append("text") .attr("text-anchor", "middle") .attr("dy", "0.35em") .style("font-size", "18px") .style("font-weight", "bold") .text("−"); // Pulsante di reset zoom const zoomReset = zoomControl .append("g") .attr("transform", "translate(0, 80)") .attr("cursor", "pointer"); zoomReset .append("circle") .attr("r", 15) .attr("fill", "#f5f5f5") .attr("stroke", "#aaa"); zoomReset .append("text") .attr("text-anchor", "middle") .attr("dy", "0.35em") .style("font-size", "10px") .style("font-weight", "bold") .text("RESET"); // Aggiungi funzionalità di zoom con dettaglio migliorato const zoom = d3 .zoom() .scaleExtent([1, 15]) // Aumentato il limite massimo di zoom a 15 .on("zoom", (event) => { // Applica la trasformazione al gruppo principale g.attr("transform", event.transform); // Aggiorna i raggi dei cerchi in base al livello di zoom per mantenere le proporzioni g.selectAll("circle") .attr( "r", (d) => riskSize(+d.risk_median) / Math.sqrt(event.transform.k) ) .attr("stroke-width", 0.5 / event.transform.k); // Aggiorna anche lo spessore del bordo // Aggiorna lo spessore delle linee di confine per mantenere le proporzioni g.selectAll("path").attr("stroke-width", 1 / event.transform.k); }); // Non usiamo lo zoom tramite scroll svg.call(zoom.filter((event) => event.type !== "wheel")); // Aggiungi eventi per i pulsanti di zoom zoomIn.on("click", () => { svg.transition().duration(300).call(zoom.scaleBy, 1.5); }); zoomOut.on("click", () => { svg.transition().duration(300).call(zoom.scaleBy, 0.75); }); // Aggiungi evento per il pulsante di reset zoomReset.on("click", () => { svg.transition().duration(500).call(zoom.transform, d3.zoomIdentity); }); return svg.node(); }); return world; }38:T117b,coastal_risk_chart = { // Ordina e inverti i dati dal basso verso l'alto const sortedData = [...filtered_data].reverse(); // Definisci margini e dimensioni const margin = { top: 30, right: 150, bottom: 100, left: 180 }; const width = 960 - margin.left - margin.right; const height = 800 - margin.top - margin.bottom; // Trova valori minimi e massimi del rischio specifici per i porti italiani const minRisk = Math.max(1e1, d3.min(sortedData, (d) => d.risk_low) * 0.8); const maxRisk = Math.min(1e7, d3.max(sortedData, (d) => d.risk_high) * 1.2); // Crea le scale const y = d3 .scaleBand() .domain(sortedData.map((d) => d.label)) .range([0, height]) .padding(0.2); // Usa scala logaritmica adattata ai valori dei porti italiani const x = d3.scaleLog().domain([minRisk, maxRisk]).range([0, width]); // Crea SVG const svg = d3 .create("svg") .attr("viewBox", [ 0, 0, width + margin.left + margin.right, height + margin.top + margin.bottom ]) .style("font", "12px sans-serif"); const g = svg .append("g") .attr("transform", `translate(${margin.left},${margin.top})`); // Aggiungi asse Y per i nomi dei porti g.append("g") .call(d3.axisLeft(y).tickSize(0).tickPadding(10)) .call((g) => g.select(".domain").remove()) .selectAll("text") .attr("font-size", "10px") .style("text-anchor", "end"); // Aggiungi asse X (scala logaritmica) con valori adattati e formattazione monetaria g.append("g") .attr("transform", `translate(0,${height})`) .call( d3 .axisBottom(x) .tickValues([1e1, 1e2, 1e3, 1e4, 1e5, 1e6, 1e7]) .tickFormat((d) => { if (d >= 1e6) return `$${d / 1e6}M`; if (d >= 1e3) return `$${d / 1e3}K`; return `$${d}`; }) ) .selectAll("text") .attr("transform", "rotate(-45)") .attr("dx", "-.8em") .attr("dy", ".15em") .style("text-anchor", "end"); // Aggiungi etichetta asse X g.append("text") .attr("text-anchor", "middle") .attr("x", width / 2) .attr("y", height + margin.bottom - 10) .attr("font-weight", "bold") .text("Rischio (USD/anno)"); // Aggiungi titolo svg .append("text") .attr("x", width / 2 + margin.left) .attr("y", 15) .attr("text-anchor", "middle") .attr("font-weight", "bold") .attr("font-size", "14px") .text("Porti Italiani per Rischio Costiero"); // Aggiungi le barre e gli elementi di errore const bars = g .selectAll(".bar") .data(sortedData) .join("g") .attr("class", "bar") .attr("transform", (d) => `translate(0,${y(d.label)})`); // Aggiungi barre di sfondo grigio chiaro per l'intero intervallo di rischio bars .append("rect") .attr("x", (d) => x(Math.max(minRisk, d.risk_low))) .attr("width", (d) => x(d.risk_high) - x(Math.max(minRisk, d.risk_low))) .attr("height", y.bandwidth()) .attr("fill", "#e0e0e0"); // Aggiungi un marcatore per il rischio medio bars .append("line") .attr("x1", (d) => x(d.risk_median)) .attr("x2", (d) => x(d.risk_median)) .attr("y1", 0) .attr("y2", y.bandwidth()) .attr("stroke", "black") .attr("stroke-width", 2); // Aggiungi linea orizzontale dal rischio basso a quello alto bars .append("line") .attr("x1", (d) => x(Math.max(minRisk, d.risk_low))) .attr("x2", (d) => x(d.risk_high)) .attr("y1", y.bandwidth() / 2) .attr("y2", y.bandwidth() / 2) .attr("stroke", "black") .attr("stroke-width", 1.5); // Aggiungi limite all'estremità di rischio basso bars .append("line") .attr("x1", (d) => x(Math.max(minRisk, d.risk_low))) .attr("x2", (d) => x(Math.max(minRisk, d.risk_low))) .attr("y1", y.bandwidth() / 2 - 5) .attr("y2", y.bandwidth() / 2 + 5) .attr("stroke", "black") .attr("stroke-width", 1.5); // Aggiungi limite all'estremità di rischio alto bars .append("line") .attr("x1", (d) => x(d.risk_high)) .attr("x2", (d) => x(d.risk_high)) .attr("y1", y.bandwidth() / 2 - 5) .attr("y2", y.bandwidth() / 2 + 5) .attr("stroke", "black") .attr("stroke-width", 1.5); // Aggiungi linee della griglia g.append("g") .attr("class", "grid") .attr("opacity", 0.2) .call( d3 .axisBottom(x) .tickValues([1e1, 1e2, 1e3, 1e4, 1e5, 1e6, 1e7]) .tickSize(height) .tickFormat("") ); return svg.node(); }39:T97d, ## Investimenti necessari per l'adattamento Lo studio di Verschuur et al. (2023) fornisce anche una stima degli investimenti necessari per l'adattamento all'innalzamento del livello del mare: entro il 2100, saranno necessari tra 12 e 63 miliardi di dollari solo per elevare i terminali portuali per adattarsi a questo fenomeno. Questa cifra rappresenta diverse volte il rischio specifico annuale stimato per i porti, evidenziando l'urgenza di investimenti preventivi in infrastrutture resilienti. Particolarmente vulnerabili sono i Piccoli Stati Insulari in Via di Sviluppo (SIDS), che affrontano un rischio commerciale 3,7 volte superiore rispetto alle altre economie. Paesi come le Isole Marianne Settentrionali (1,8% del commercio a rischio), Guinea-Bissau (1,7%), Guam (1,5%), Filippine (1,3%), Saint Vincent e Grenadine (1,2%) e Dominica (1,2%) mostrano la percentuale più alta di rischio di interruzioni commerciali, principalmente a causa dell'alta concentrazione di commercio attraverso porti a rischio. ## Infrastruture critiche vulnerabili Un aspetto fondamentale emerso dallo studio di Verschuur et al. è che i danni all'infrastruttura critica (strade, ferrovie, elettricità) contribuiscono al 28,2% del rischio complessivo dovuto alle inondazioni costiere. Questo evidenzia come gli effetti dell'innalzamento del mare si estendano ben oltre le strutture portuali stesse, interessando l'intero ecosistema infrastrutturale che supporta le operazioni portuali. In particolare, l'86% dei porti globali è esposto a più di tre rischi naturali, con l'innalzamento del livello del mare che rappresenta una minaccia significativa e crescente. La resilienza portuale è determinata da vari fattori critici, tra cui gli standard ingegneristici (altezza dei terminali, protezioni contro le inondazioni), le soglie operative per le condizioni estreme e la durata del recupero dopo eventi dannosi. In sintesi, l'innalzamento del livello del mare rappresenta una minaccia crescente per i porti, con impatti economici e sociali significativi già quantificabili in decine di miliardi di dollari annui. È fondamentale adottare misure di adattamento e mitigazione per ridurre la vulnerabilità dei porti e garantire la continuità delle attività economiche marittime, con investimenti preventivi che, sebbene sostanziali, risultano economicamente più vantaggiosi rispetto ai costi derivanti da danni e interruzioni future.3a:[] 2f:{"id":"43ef5182d3387495","slug":null,"title":"Se il mare si alza, ci sono dei costi per i porti","thumbnail":"7fda902c207cc0758ae9e1fc69f37b6212890d6c07076f83ccd08a36044a15ff","access_level":"public","create_time":"$D2025-03-20T10:06:42.040Z","update_time":"$D2025-03-27T10:41:50.759Z","view_time":null,"first_public_time":"$D2025-03-20T10:06:42.040Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"93d26fdafb97ff02","login":"sergiocima","name":"Sergio Cima","avatar_url":"https://avatars-next.observableusercontent.com/530d1a0a599d424cf9e375e063a8115d6c5225dc2ab76228bd85d5e623a4b969","tier":"starter_2024"},"version":392,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"8b952bfac1d3bc22","login":"sergiocima","name":"Sergio Cima","avatar_url":"https://avatars-next.observableusercontent.com/530d1a0a599d424cf9e375e063a8115d6c5225dc2ab76228bd85d5e623a4b969","tier":null}],"members":[{"type":"individual","id":"8b952bfac1d3bc22","login":"sergiocima","name":"Sergio Cima","avatar_url":"https://avatars-next.observableusercontent.com/530d1a0a599d424cf9e375e063a8115d6c5225dc2ab76228bd85d5e623a4b969","tier":null,"role":"editor"},{"type":"team","id":"93d26fdafb97ff02","login":"sergiocima","name":"Sergio Cima","avatar_url":"https://avatars-next.observableusercontent.com/530d1a0a599d424cf9e375e063a8115d6c5225dc2ab76228bd85d5e623a4b969","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Se il mare si alza, ci sono dei costi per i porti","cells":[{"id":0,"value":"# Se il mare si alza, ci sono dei costi per i porti\n\nL'innalzamento del livello del mare è una problematica globale sempre più evidente, supportata da dati provenienti da mareografi e satelliti. \n\nIl grafico 1 mostra l'innalzamento del livello del mare misurato da mareografi e satelliti (fonte https://www.epa.gov/climate-indicators/climate-change-indicators-sea-level).\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":61,"value":"data = d3.csv(\n \"https://raw.githubusercontent.com/sergiocima/sealevelrise/refs/heads/main/Global_average_slr/sea-level_fig-1.csv\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"viewof dataTable = {\n return html`\n \n \n \n \n ${Object.keys(data[0]).map((col) => html``)}\n \n \n \n ${data.map(\n (row) => html`\n \n ${Object.keys(row).map((key) => html``)}\n \n `\n )}\n \n

${col}
${row[key]}

${col}
${row[key]}

\n `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"projectedSeaLevelChart(data2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"I **porti**, in particolare, sono particolarmente vulnerabili a questi cambiamenti. Essi sono esposti a eventi meteorologici estremi, come tempeste e mareggiate, che possono causare interruzioni operative e danni significativi. L'innalzamento del livello del mare aumenta il rischio di inondazioni costiere, minacciando le infrastrutture portuali e le attività economiche ad esse connesse.\n\nUn'analisi di Asariotis et al. (2024) conferma che molti porti globali saranno sempre più esposti a pericoli crescenti, tra cui livelli estremi del mare, onde e ondate di calore estreme. Entro il 2050, tra il 55% e il 59% dei porti globali potrebbe affrontare livelli estremi del mare superiori a 2 metri rispetto ai livelli medi del mare di base, e entro il 2100 questa percentuale potrebbe salire tra il 71% e l'83%.\n\nGrafico 3, rischio coste (fonte: https://link.springer.com/article/10.1007/s44218-024-00047-9)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":180,"value":"// Cella 1: URL di base\nbaseUrl = \"https://raw.githubusercontent.com/sergiocima/sealevelrise/refs/heads/main/water_level_jrc/globalESLprojections_Present-day/\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"// Cella 2: Configurazione dei file\nfileConfig = [\n {\n id: \"rcp45_2050\",\n url: baseUrl + \"RSLR_RCP45-2050.csv\",\n label: \"RCP4.5, 2050\"\n },\n {\n id: \"rcp45_2100\",\n url: baseUrl + \"RSLR_RCP45-2100.csv\",\n label: \"RCP4.5, 2100\"\n },\n {\n id: \"rcp85_2050\",\n url: baseUrl + \"RSLR_RCP85-2050.csv\",\n label: \"RCP8.5, 2050\"\n },\n {\n id: \"rcp85_2100\",\n url: baseUrl + \"RSLR_RCP85-2100.csv\",\n label: \"RCP8.5, 2100\"\n }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"// Cella 3: Funzione per caricare i dati\nloadCSV = async function (url) {\n const response = await fetch(url);\n const text = await response.text();\n return d3.csvParse(text, (d) => ({\n latitude: +d.latitude,\n longitude: +d.longitude,\n valueMedian: +d.valueMedian,\n value5th: +d.value5th,\n value95th: +d.value95th\n }));\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"// Cella 4: Caricamento parallelo di tutti i dataset\ndata3 = Promise.all(\n fileConfig.map((file) => loadCSV(file.url).then((data) => [file.id, data]))\n).then((results) => {\n return Object.fromEntries(results);\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"// Cella 5: Controllo per selezionare lo scenario\nviewof selectedScenario = Inputs.radio(\n fileConfig.map((f) => f.label),\n { label: \"Scenario:\", value: \"RCP8.5, 2100\" }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"// Cella 6: Conversione del valore selezionato all'ID del dataset\nselectedDatasetId = selectedScenario\n .replace(\".\", \"\")\n .replace(\", \", \"_\")\n .toLowerCase()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"// Cella: Caricamento dei dati geografici (aggiungere questa cella prima della 7)\nworldLands = d3\n .json(\"https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json\")\n .then((topology) => topojson.feature(topology, topology.objects.countries))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"// Cella 8: Visualizzazione della mappa con debug\nchart = {\n // Verifica se i dati sono caricati\n if (!data3) return \"Caricamento dati in corso...\";\n\n // Mostra info sul dataset selezionato\n const dataset = data3[selectedDatasetId];\n if (!dataset) {\n return `Nessun dato trovato per ${selectedDatasetId}. Chiavi disponibili: ${Object.keys(\n data3\n ).join(\", \")}`;\n }\n\n // Mostra qualche statistica sui dati\n console.log(`Dataset ${selectedDatasetId} ha ${dataset.length} punti`);\n console.log(\"Primi 5 punti:\", dataset.slice(0, 5));\n\n // Continua con la visualizzazione\n return createMap(dataset, selectedScenario);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"$36","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":279,"value":"coastal_data = d3.csv(\n \"https://raw.githubusercontent.com/sergiocima/sealevelrise/refs/heads/main/port_risk/coastal_ensemble.csv\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":281,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":"// Funzione per elaborare i dati\nprocessData = (data) => {\n // Filtra solo per rischi costieri\n const coastalOnly = data.filter((d) => d.hazard.toLowerCase() === \"coastal\");\n\n // Ordina per risk_median e prendi i primi 50\n return coastalOnly\n .sort((a, b) => +b.risk_median - +a.risk_median)\n .slice(0, 50)\n .map((d) => ({\n port_name: d.port_name,\n country: d.country,\n risk_median: +d.risk_median,\n risk_low: +d.risk_low,\n risk_high: +d.risk_high,\n label: `${d.port_name}, ${d.country}`\n }));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":302,"value":"filtered_data = {\n // Filtra per rischi costieri e solo porti italiani\n const coastalOnly = coastal_data.filter(\n (d) => d.hazard.toLowerCase() === \"coastal\" && d.country === \"Italy\"\n );\n\n // Se non ci sono abbastanza porti italiani (o nessuno), mostra un messaggio\n if (coastalOnly.length === 0) {\n console.log(\"Nessun porto italiano trovato nel dataset!\");\n return []; // Restituisci array vuoto\n }\n\n // Ordina per risk_median\n return coastalOnly\n .sort((b, a) => +b.risk_median - +a.risk_median)\n .map((d) => ({\n port_name: d.port_name,\n country: d.country,\n risk_median: +d.risk_median,\n risk_low: +d.risk_low,\n risk_high: +d.risk_high,\n label: `${d.port_name}, ${d.country}`\n }));\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":304,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":254,"value":"$39","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W3a","stdlib":"1","titling":"auto"}} 30:"$2f:body"