29:null 2a:["$","title",null,{"children":"Indice di isolamento dei comuni lucani | Danilo Di Cuia | Observable"}] 2f:T1053,combinedDashboard = { // 1. Core State let selectedCity = null; // 2. Data transformation for isolation index const barData = destinations.map((city, i) => { const totalDistance = d3.sum(matrix[i]); const totalTime = d3.sum(matrixTimes[i]); return { city, value: totalDistance, time: totalTime }; }).sort((a, b) => d3.descending(a.value, b.value)); const mapHeight = mapWidth; const mainContainer = d3.create("div") .style("display", "flex") .style("gap", "20px") .style("border-radius", "8px") .style("padding", "15px") .style("position", "relative") .style("font-family", "system-ui, -apple-system, sans-serif"); // Create the Floating HTML Tooltip (attached to main wrapper) const tooltip = mainContainer.append("div") .style("position", "absolute") .style("visibility", "hidden") .style("background-color", "rgba(15, 23, 42, 0.95)") .style("color", "#fff") .style("padding", "8px 12px") .style("border-radius", "6px") .style("font-size", "12px") .style("box-shadow", "0 4px 6px -1px rgba(0,0,0,0.1)") .style("pointer-events", "none") .style("z-index", "10"); // ========================================== // ELEMENT: THE MAP SVG // ========================================== const mapSvg = mainContainer.append("svg") .attr("viewBox", [0, 0, mapWidth, mapHeight]) .style("width", `${mapWidth}px`) .style("height", `${mapHeight}px`); const maxValue = d3.max(data || barData, (d) => d.value); const color = d3.scaleSequential(d3.interpolateBlues).domain([ 0,maxValue]); const indexColor = d3.scaleSequential(d3.interpolateBlues).domain([131, 0]); const projection = d3.geoMercator().fitSize([mapWidth, mapHeight - 50], basilicataComuni); const path = d3.geoPath().projection(projection); const paths = mapSvg.append("g") .selectAll("path") .data(basilicataComuni.features) .join("path") .attr("d", path) .attr("stroke", "#0284c7") .attr("stroke-width", 1) .on("mouseover", (e, d) => { selectedCity = d.properties.name; update(); showTooltip(d); }) .on("mousemove", updateTooltip) .on("mouseout", hideTooltip); function showTooltip(d) { const cityByDistanceIndex = barData.findIndex(item => item.city === selectedCity); if (cityByDistanceIndex === -1) return; const cityByDistance = barData[cityByDistanceIndex]; const totalCities = destinations.length; tooltip.style("visibility", "visible") .html(`${selectedCity}
Indice di isolamento: ${cityByDistanceIndex + 1} / ${totalCities}
Distanza media: ${(cityByDistance.value / totalCities).toFixed(1)} km`); } function updateTooltip(event) { const [mouseX, mouseY] = d3.pointer(event, mainContainer.node()); tooltip.style("left", `${mouseX + 15}px`).style("top", `${mouseY - 20}px`); } function hideTooltip() { selectedCity = null; update(); tooltip.style("visibility", "hidden"); } // ========================================== // HELPER AND UNIFIED UPDATE FUNCTIONS // ========================================== function findIndex(name) { return destinations.indexOf(name); } function update() { // --- MAP UPDATES --- paths.attr("fill", (d,i) => { const cityName = d.properties.name; const cityByDistanceIndex = barData.findIndex(item => item.city === cityName); // Initial state: color by isolation index value if (!selectedCity) { return indexColor(cityByDistanceIndex); } // Hover state: color based on distance matrix to selected city const index = findIndex(selectedCity); const cityIndex = findIndex(cityName); if (index === -1 || cityIndex === -1) return "#fff"; if (cityName !== destinations[index]) { return color(matrix[index][cityIndex]); } else { return color(0); // Color code for the source city itself } }); } // Initial render run update(); return mainContainer.node(); }30:T1809,chart = { const height = 600; const mainContainer = d3.create("div"); const colors = [ "#0284c7", // blue "#f97316" // orange ]; // Increased margins to accommodate both left and right axes and long tilted labels const margin = { top: 40, right: 40, bottom: 90, left: 40 }; const keys = ["distance", "time"]; const svg = mainContainer .append("svg") .attr("viewBox", [0, 0, width, height]); // 1. Core Structural Groups const gBars = svg.append("g"); const xAxisGroup = svg .append("g") .attr("transform", `translate(0,${height - margin.bottom})`); const yAxisLeftGroup = svg .append("g") .attr("transform", `translate(${margin.left},0)`); const yAxisRightGroup = svg .append("g") .attr("transform", `translate(${width - margin.right},0)`); // 2. Base Scales const x0 = d3 .scaleBand() .range([margin.left, width - margin.left]) .paddingInner(provincia === "Matera" ? 0.25 : 0.1) .paddingOuter(1); const x1 = d3.scaleBand().domain(keys); // SEPARATE Y-SCALES: Independent ranges mapping to their own physical axes const yDistance = d3 .scaleLinear() .rangeRound([height - margin.bottom, margin.top]); const yTime = d3 .scaleLinear() .rangeRound([height - margin.bottom, margin.top]); const color = d3.scaleOrdinal().domain(keys).range(colors); // Create the Floating HTML Tooltip (attached to main wrapper) const tooltip = mainContainer .append("div") .style("position", "absolute") .style("visibility", "hidden") .style("background-color", "#fff") .style("font-family", "sans-serif") .style("padding", "8px 12px") .style("border-radius", "6px") .style("font-size", "12px") .style("box-shadow", "0 4px 6px -1px rgba(0,0,0,0.1)") .style("pointer-events", "none") .style("z-index", "10"); function showTooltip({ city, distance, time }) { tooltip.style("visibility", "visible").html( `${selectedCity} > ${city}
Distanza: ${distance.toFixed(1)} km
Tempo: ${(time / 60).toFixed(1)} ore ` ); } function updateTooltup(event) { const [mouseX, mouseY] = d3.pointer(event, mainContainer.node()); tooltip.style("left", `${mouseX + 15}px`).style("top", `${mouseY - 20}px`); } function hideTooltip() { tooltip.style("visibility", "hidden"); } // 3. The Update Function svg.update = function (sourceCity) { // Find the specific row for our origin city in both matrices const distRow = distanze.find((d) => d[""] === sourceCity); const timeRow = tempi.find((d) => d[""] === sourceCity); // Guard clause in case matrix hasn't loaded or city mismatch occurs if (!distRow || !timeRow) return; // Transform matrix keys into a clean data array const formattedData = selectedComuni .filter((city) => city !== "Da" && city !== sourceCity) .map((city) => ({ city: city, distance: +distRow[city] || 0, time: +timeRow[city] || 0 })); const sortByKey = sortBy === "Distanza" ? "distance" : "time"; // Sort dynamically based on the user's preference formattedData.sort((a, b) => d3.ascending(a[sortByKey], b[sortByKey])); // Update X scale domains based on the sorted order x0.domain(formattedData.map((d) => d.city)); x1.rangeRound([0, x0.bandwidth()]); // Set independent domains for both Y scales based on their respective max values yDistance.domain([0, d3.max(formattedData, (d) => d.distance)]).nice(); yTime.domain([0, d3.max(formattedData, (d) => d.time)]).nice(); // 4. Render / Update Grouped Bars const cityGroups = gBars .selectAll("g.city-group") .data(formattedData, (d) => d.city); const mergedGroups = cityGroups .enter() .append("g") .attr("class", "city-group") .on("mouseover", (event, d, i) => { mergedGroups.transition().style("opacity", (dd) => (dd == d ? 1 : 0.5)); showTooltip(d); }) .on("mousemove", updateTooltup) .on("mouseout", (d) => { mergedGroups.transition().style("opacity", 1); hideTooltip(); }) .merge(cityGroups); mergedGroups.attr("transform", (d) => `translate(${x0(d.city)}, 0)`); // Render individual inner bars utilizing their respective unique Y-scale variables const bars = mergedGroups.selectAll("rect").data((d) => [ { key: "distance", value: d.distance, yScale: yDistance }, { key: "time", value: d.time, yScale: yTime } ]); bars .join("rect") .attr("x", (d) => x1(d.key)) .attr("width", x1.bandwidth()) .attr("y", (d) => d.yScale(d.value)) .attr("height", (d) => d.yScale(0) - d.yScale(d.value)) .attr("fill", (d) => color(d.key)); // 5. Update Axes with Independent Scales xAxisGroup // .transition() //.duration(750) .call(d3.axisBottom(x0).tickSizeOuter(0)); xAxisGroup .selectAll("text") .attr("transform", "rotate(-45)") .style("text-anchor", "end") .attr("dx", "-.8em") .attr("dy", ".15em") .style("font-size", formattedData.length > 50 ? "7px" : "10px"); // Left axis handles distance yAxisLeftGroup.call(d3.axisLeft(yDistance)); // Right axis handles time yAxisRightGroup.call(d3.axisRight(yTime)); }; // 6. Axis Labels & Static Legend Configuration yAxisLeftGroup .append("text") .attr("x", -margin.left + 10) .attr("y", margin.top - 15) .attr("fill", colors[0]) .attr("font-weight", "bold") .style("text-anchor", "start") .text("← Distanza (km)"); yAxisRightGroup .append("text") .attr("x", margin.right - 10) .attr("y", margin.top - 15) .attr("fill", colors[1]) .attr("font-weight", "bold") .style("text-anchor", "end") .text("Tempo (min) →"); // Initialize view using your external variable svg.update(selectedCity, "distance"); return mainContainer.node(); } 31:T1cb0,matrixChart = { const cellWidth = 30; const margin = 120; const n = selectedComuniMatrice.length; const width = n * cellWidth + margin * 2; const height = n * cellWidth + margin; // Create outer container wrapping controls, tooltip, and chart const container = d3.create("div") .attr("class", "matrix-chart-container") .style("position", "relative"); // Crucial for absolute positioning of tooltip // 1. Create native HTML Tooltip const tooltip = container.append("div") .attr("class", "matrix-tooltip") .style("position", "absolute") .style("opacity", 0) .style("pointer-events", "none") .style("background", "rgba(0, 0, 0, 0.85)") .style("color", "#fff") .style("padding", "8px 12px") .style("border-radius", "4px") .style("font-family", "sans-serif") .style("font-size", "12px") .style("line-height", "1.4") .style("z-index", "10") .style("transition", "opacity 0.08s ease"); // 2. Generate Data & Compute isolation sums in a single pass const cells = []; const isolationSums = {}; for (let i = 0; i < n; i++) { const sourceCity = selectedComuniMatrice[i]; let sum = 0; for (let j = 0; j < n; j++) { const targetCity = selectedComuniMatrice[j]; const val = +matrix[destinations.indexOf(sourceCity)][destinations.indexOf(targetCity)]; const timeVal = +matrixTimes[destinations.indexOf(sourceCity)][destinations.indexOf(targetCity)]; if (!isNaN(val)) sum += val; cells.push({ source: sourceCity, target: targetCity, value: val, time: timeVal, x: j * cellWidth, y: i * cellWidth, w: cellWidth, h: cellWidth }); } isolationSums[sourceCity] = sum; } const color = d3 .scaleSequential(d3.interpolateOranges) .domain([0, d3.max(cells, (d) => d.value) || 1]); let currentSort = "alphabetical"; // Control Panel & Toggle Buttons const controlPanel = container .append("div") .attr("class", "matrix-control-panel") .style("margin-bottom", "10px"); controlPanel .append("span") .attr("class", "matrix-sort-label") .style("font-weight", "bold") .style("margin-right", "8px") .text("ORDINE:"); const buttonAlphabetical = controlPanel .append("button") .attr("class", "matrix-sort-btn active") .text("Alfabetico"); const buttonIsolated = controlPanel .append("button") .attr("class", "matrix-sort-btn") .style("margin-left", "5px") .text("Per distanza"); function setButtonStyles() { buttonAlphabetical.classed("active", currentSort === "alphabetical"); buttonIsolated.classed("active", currentSort === "isolated"); } // Create SVG container const svg = container .append("svg") .attr("class", "matrix-svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]); const chartG = svg .append("g") .attr("transform", `translate(${margin}, ${margin/2})`); // Interactive Event Handlers function highlight(event, d) { chartG .selectAll(".cell") .filter((k) => k.source !== d.source && k.target !== d.target) .style("opacity", 0.3); // Dynamic HTML Generation for Tooltip let htmlContent = ""; if (d.source === d.target) { htmlContent = `${d.source}`; } else { const val = d.value !== undefined ? d.value.toFixed(1) : "0.0"; htmlContent = `

${d.source} → ${d.target}

Distanza: ${val} km

Tempo: ${d.time} min

`; } // Get position relative to container bounds const containerRect = container.node().getBoundingClientRect(); const xPos = event.clientX - containerRect.left + 15; const yPos = event.clientY - containerRect.top - 15; tooltip .html(htmlContent) .style("left", `${xPos}px`) .style("top", `${yPos}px`) .style("opacity", 1); } function fade(event, d) { chartG.selectAll(".cell").style("opacity", 1); tooltip.style("opacity", 0); } // Draw the Matrix Cells const cell = chartG .selectAll("g.cell") .data(cells) .join("g") .attr("class", "cell") .attr("transform", (d) => `translate(${d.x}, ${d.y})`) .on("mouseover", highlight) .on("mousemove", highlight) // Smooth tracking tracking across cell moves .on("mouseout", fade); cell .append("rect") .attr("height", (d) => d.h) .attr("width", (d) => d.w) .style("stroke", "#eee") .style("fill", (d) => (d.value ? color(d.value) : "#fff")); // Draw source (Y-Axis) labels chartG .selectAll("text.source") .data(selectedComuniMatrice) .join("text") .attr("class", "source") .attr("y", (_, i) => i * cellWidth + cellWidth / 2) .attr("x", -10) .attr("text-anchor", "end") .attr("dominant-baseline", "middle") .style("font-family", "sans-serif") .style("font-size", "11px") .text((d) => d); // Draw target (X-Axis) labels chartG .selectAll("text.target") .data(selectedComuniMatrice) .join("text") .attr("class", "target") .attr("transform", (_, i) => { const x = i * cellWidth + cellWidth / 2; const y = -10; return `translate(${x}, ${y}) rotate(-45)`; }) .attr("text-anchor", "start") .style("font-family", "sans-serif") .style("font-size", "11px") .text((d) => d); // Ordering Transition Logic function updateOrder(sortType) { let activeDestinations; if (sortType === "alphabetical") { activeDestinations = [...selectedComuniMatrice].sort((a, b) => a.localeCompare(b) ); } else { activeDestinations = [...selectedComuniMatrice].sort( (a, b) => isolationSums[b] - isolationSums[a] ); } // Optimization: Create a fast Map lookup instead of running .indexOf nested inside loop loops const indexLookup = new Map(activeDestinations.map((city, idx) => [city, idx])); const t = chartG.transition().duration(1200); chartG .selectAll("g.cell") .transition(t) .attr("transform", (d) => { const colIndex = indexLookup.get(d.target); const rowIndex = indexLookup.get(d.source); d.x = colIndex * cellWidth; d.y = rowIndex * cellWidth; return `translate(${d.x}, ${d.y})`; }); chartG .selectAll("text.source") .transition(t) .attr("y", (d) => { const index = indexLookup.get(d); return index * cellWidth + cellWidth / 2; }); chartG .selectAll("text.target") .transition(t) .attr("transform", (d) => { const index = indexLookup.get(d); const x = index * cellWidth + cellWidth / 2; const y = -10; return `translate(${x}, ${y}) rotate(-45)`; }); } buttonAlphabetical.on("click", () => { if (currentSort !== "alphabetical") { currentSort = "alphabetical"; setButtonStyles(); updateOrder("alphabetical"); } }); buttonIsolated.on("click", () => { if (currentSort !== "isolated") { currentSort = "isolated"; setButtonStyles(); updateOrder("isolated"); } }); return container.node(); }32:Ta13,province = { const comuniPotenza = [ "Abriola", "Acerenza", "Albano di Lucania", "Anzi", "Armento", "Atella", "Avigliano", "Balvano", "Banzi", "Baragiano", "Barile", "Bella", "Brienza", "Brindisi Montagna", "Calvello", "Calvera", "Campomaggiore", "Cancellara", "Carbone", "Castelgrande", "Castelluccio Inferiore", "Castelluccio Superiore", "Castelmezzano", "Castelsaraceno", "Castronuovo di Sant'Andrea", "Cersosimo", "Chiaramonte", // Chiaromonte "Corleto Perticara", "Episcopia", "Fardella", "Filiano", "Forenza", "Francavilla in Sinni", "Gallicchio", "Genzano di Lucania", "Ginestra", "Grumento Nova", "Guardia Perticara", "Lagonegro", "Latronico", "Laurenzana", "Lauria", "Lavello", "Maratea", "Marsico Nuovo", "Marsicovetere", "Maschito", "Melfi", "Missanello", "Moliterno", "Montemilone", "Montemurro", "Muro Lucano", "Nemoli", "Noepoli", "Oppido Lucano", "Palazzo San Gervasio", "Paterno", "Pescopagano", "Picerno", "Pietragalla", "Pietrapertosa", "Pignola", "Potenza", "Rapolla", "Rapone", "Rionero in Vulture", "Ripacandida", "Rivello", "Roccanova", "Rotonda", "Ruoti", "Ruvo del Monte", "San Chirico Nuovo", "San Chirico Raparo", "San Costantino Albanese", "San Fele", "San Martino d'Agri", "San Paolo Albanese", "San Severino Lucano", "Sant'Angelo Le Fratte", "Sant'Arcangelo", "Sarconi", "Sasso di Castalda", "Satriano di Lucania", "Savoia di Lucania", "Senise", "Spinoso", "Teana", "Terranova di Pollino", "Tito", "Tolve", "Tramutola", "Trecchina", "Trivigno", "Vaglio Basilicata", "Venosa", "Vietri di Potenza", "Viggianello", "Viggiano" ]; const comuniMatera = [ "Accettura", "Aliano", "Bernalda", "Calciano", "Cirigliano", "Colobraro", "Craco", "Ferrandina", "Garaguso", "Gorgoglione", "Grassano", "Grottole", "Irsina", "Matera", "Miglionico", "Montalbano Jonico", "Montescaglioso", "Nova Siri", "Oliveto Lucano", "Pisticci", "Policoro", "Pomarico", "Rotondella", "Salandra", "San Giorgio Lucano", "San Mauro Forte", "Scanzano Jonico", "Stigliano", "Tricarico", "Tursi", "Valsinni" ]; return { comuniMatera, comuniPotenza }; } 33:T8db,34:[{"id":"94bf03e99528426e7dfcbe032ec7a73c1b94d9b8e71731e23307addc200abd16d79cbe9eeda3af1714c3f7498d66476e7f52613cd976ff88b896212af90724e2","href":"https://static.observableusercontent.com/files/94bf03e99528426e7dfcbe032ec7a73c1b94d9b8e71731e23307addc200abd16d79cbe9eeda3af1714c3f7498d66476e7f52613cd976ff88b896212af90724e2","name":"indice_prossimita_ospedali.csv","type":"text/csv","lastModified":1780078254661.383,"size":5526},{"id":"1e062ff41b45be2dded3a4c0b2f9e2d11348dce7ceb450816ec5cb5ead932c732397cf702fce6caefa7d233975b917115028c373eabc306bbd81065a1c3253df","href":"https://static.observableusercontent.com/files/1e062ff41b45be2dded3a4c0b2f9e2d11348dce7ceb450816ec5cb5ead932c732397cf702fce6caefa7d233975b917115028c373eabc306bbd81065a1c3253df","name":"matrice_tempi_basilicata.csv","type":"text/csv","lastModified":1780078254955.26,"size":95112},{"id":"5c004eaf315f2547722b9da3fb2b52cb4ab4bdd9a5609ac5cd1d7998b76f6a9a38afbfd4f14ab302a53cdf178691b4a1a9c7919788f2ef8437ac320e5321d340","href":"https://static.observableusercontent.com/files/5c004eaf315f2547722b9da3fb2b52cb4ab4bdd9a5609ac5cd1d7998b76f6a9a38afbfd4f14ab302a53cdf178691b4a1a9c7919788f2ef8437ac320e5321d340","name":"indice_prossimita_ospedali (1).csv","type":"text/csv","lastModified":1780078993498.756,"size":7412},{"id":"33844eb0e7af42b45e9185b93f16300b21155126f6a72238a78e6b83e9c27ffde82132b8997de4c65bc8e13864b5302e71ced2dcc6db9d4de4918aa725e5a8d7","href":"https://static.observableusercontent.com/files/33844eb0e7af42b45e9185b93f16300b21155126f6a72238a78e6b83e9c27ffde82132b8997de4c65bc8e13864b5302e71ced2dcc6db9d4de4918aa725e5a8d7","name":"matrice_distanze_basilicata@1.csv","type":"text/csv","lastModified":1780078254946.216,"size":94863},{"id":"181866aa53409c87ee3a03fd56ad2e5c8293a9aae0a509dec62cf88920333814631d763e5ad22d32955ed1d6d4367f0e73ec7c74de601a5e605406709424196c","href":"https://static.observableusercontent.com/files/181866aa53409c87ee3a03fd56ad2e5c8293a9aae0a509dec62cf88920333814631d763e5ad22d32955ed1d6d4367f0e73ec7c74de601a5e605406709424196c","name":"indice_prossimita_ospedali (2).csv","type":"text/csv","lastModified":1780079643436.195,"size":10252}] 2d:{"id":"dba05656e37c480f","slug":null,"title":"Indice di isolamento dei comuni lucani","thumbnail":"1a302dc49dbd84ffd8cabc35124b77d5251e0f5764f89956cd8e1322544de72f","access_level":"public","create_time":"$D2026-05-26T15:32:17.489Z","update_time":"$D2026-06-08T19:06:34.448Z","view_time":null,"first_public_time":"$D2026-05-26T21:31:06.539Z","fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"eb1622af3a3424c4","login":"tezzutezzu","name":"Danilo Di Cuia","avatar_url":"https://avatars-next.observableusercontent.com/5a45613905d20893204c493a74859b19e92527edd065ed5c2e7d494ee41aafda","tier":"starter_2024"},"version":664,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"55520ddc700d286d","login":"tezzutezzu","name":"Danilo Di Cuia","avatar_url":"https://avatars-next.observableusercontent.com/5a45613905d20893204c493a74859b19e92527edd065ed5c2e7d494ee41aafda","tier":null}],"members":[{"type":"individual","id":"55520ddc700d286d","login":"tezzutezzu","name":"Danilo Di Cuia","avatar_url":"https://avatars-next.observableusercontent.com/5a45613905d20893204c493a74859b19e92527edd065ed5c2e7d494ee41aafda","tier":null,"role":"editor"},{"type":"team","id":"eb1622af3a3424c4","login":"tezzutezzu","name":"Danilo Di Cuia","avatar_url":"https://avatars-next.observableusercontent.com/5a45613905d20893204c493a74859b19e92527edd065ed5c2e7d494ee41aafda","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":{"id":"ec0c7055883e15df","slug":"basilicata","title":"Basilicata","owner":{"id":"eb1622af3a3424c4","login":"tezzutezzu","name":"Danilo Di Cuia"}},"type":"notebook","body":{"title":"Indice di isolamento dei comuni lucani","cells":[{"id":549,"value":"# Indice di isolamento dei comuni lucani\nLa mappa mostra l'indice di isolamento calcolato usando la percorrenza stradale in auto, di ogni comune. \n\nPiù il colore è scuro più il comune è isolato.Passando il mouse su un comune, questo viene impostato come punto di origine. I colori degli altri comuni varieranno in base alla distanza: più la tonalità di blu è scura, maggiore è la distanza stradale da percorrere.\n\n\n### Curiosità sui dati\nIn media, il comune geograficamente e logisticamente più isolato (più distante da tutti gli altri) risulta essere **Maratea**, mentre quello più centrale e interconnesso (con la somma delle distanze minore verso il resto della regione) è **Laurenzana**.\n\n\n\n### Note tecniche e licenza\nLe distanze e i tempi di percorrenza sono stati calcolati tramite le API di [OSRM routing (Open Source Routing Machine)](https://project-osrm.org/docs/v5.5.1/api/#general-options).\n\nIl codice sorgente e i dati di questo progetto sono rilasciati sotto licenza **AGPLv3**.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":4,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":350,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":347,"value":"## Distanze geografiche e tempi di percorrenza\n\nIn questo grafico ogni comune presenta due barre affiancate: una blu per la distanza (scala superiore in km) e una arancione per il tempo (scala inferiore in minuti), permettendo un confronto diretto tra lo spazio e il tempo necessario a raggiungere la meta.\n\nPassando il mouse sopra la barra si può leggere sia la distanza che il tempo di percorrenza. \n\nUna differenza tra le due barre evidenzia l'efficienza della rete stradale.\n\nSeleziona la provincia o il comune per filtrare i dati.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":372,"value":"\nviewof provincia = Inputs.select([\"Matera\", \"Potenza\"], {value:\"Matera\", label: \"Seleziona una provincia\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":197,"value":"viewof selectedCity = {\n\n return Inputs.select(selectedComuni, {\n value: \"Matera\",\n label: \"Seleziona un comune\"\n });\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":355,"value":"\nviewof sortBy = Inputs.select([\"Distanza\", \"Tempo\"], {value:\"Distanza\", label: \"Ordina per\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":202,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":634,"value":"### Matrice di adiacenza\n\nQuesta matrice di adiacenza interattiva (o heatmap) visualizza le distanze chilometriche tra tutti i comuni della provincia di Matera: più scuro è il colore, pìu alta è la distanza.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":636,"value":"\nviewof provinciaMatrice = Inputs.select([\"Matera\", \"Potenza\"], {value:\"Matera\", label: \"Seleziona una provincia\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":624,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":536,"value":" mapWidth = width*.9;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":18,"value":" destinations = distanze.columns.slice(1);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":33,"value":" data = {\n let w = 1,\n h = 1,\n value = 1;\n\n const len = destinations.length;\n\n const resultMatrix = [];\n for (let s = 0; s < matrix.length; s++) {\n for (let t = 0; t < matrix.length; t++) {\n const value = matrix[s][t];\n const edge = {\n source: destinations[s],\n target: destinations[t],\n value,\n time: matrixTimes[s][t]\n };\n resultMatrix.push(edge);\n \n }\n }\n return resultMatrix;\n \n \n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":" matrix = destinations.map(fromTown => {\n const sourceKey = \"\"\n const row = distanze.find(r => r[sourceKey] === fromTown) ;\n return destinations.map(toTown => +row[toTown]);\n });","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":175,"value":"matrixTimes = destinations.map(fromTown => {\n const sourceKey = \"\"\n const row = tempi.find(r => r[sourceKey] === fromTown) ;\n return destinations.map(toTown => +row[toTown]);\n });","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":36,"value":"basilicataComuni = {\n const response = await fetch(\"https://raw.githubusercontent.com/openpolis/geojson-italy/master/geojson/limits_R_17_municipalities.geojson\");\n const italyGeo = await response.json();\n \n // Filter for the province of Matera (pro_com_code starts with 077 or reg_com/prov_acr is \"MT\")\n const materaFeatures = italyGeo.features;\n materaFeatures.forEach(d=>{\n if(d.properties.name === \"Chiaromonte\") d.properties.name = \"Chiaramonte\" // FIX THIS STUPID BUG!\n })\n return {\n type: \"FeatureCollection\",\n features: materaFeatures\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":367,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":639,"value":" selectedComuniMatrice = destinations.filter((d) => {\n if (provinciaMatrice == \"Matera\") {\n return province.comuniMatera.indexOf(d) != -1;\n } else {\n return province.comuniPotenza.indexOf(d) != -1;\n }\n });","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":377,"value":" selectedComuni = destinations.filter((d) => {\n if (provincia == \"Tutte\") return true;\n if (provincia == \"Matera\") {\n return province.comuniMatera.indexOf(d) != -1;\n } else {\n return province.comuniPotenza.indexOf(d) != -1;\n }\n });","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":568,"value":"## Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":173,"value":"tempi = FileAttachment(\"matrice_tempi_basilicata.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":138,"value":"distanze = FileAttachment(\"matrice_distanze_basilicata@1.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":395,"value":"hospitalProximity = FileAttachment(\"indice_prossimita_ospedali (2).csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":54,"value":"$33","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 2e:"$2d:body"