29:null 2a:["$","title",null,{"children":"Projet Visualisation : Prototype and Implementation | SihamZR | Observable"}] 2f:T2580,function LineGraphByCountryAndYear(selectedCity, data_project, population_data, temperature_data) { const margin = { top: 50, right: 120, bottom: 80, left: 80 }; const width = 800 - margin.left - margin.right; const height = 400 - margin.top - margin.bottom; const filteredData = data_project .filter(d => d.Area === selectedCity && !isNaN(Number(d.Value)) && Number(d.Value) > 0) .map(d => ({ ...d, Value: Number(d.Value) })); if (filteredData.length === 0) { console.error(`No data available for ${selectedCity}`); return document.createElement("p").textContent = `No data available for ${selectedCity}`; } let popArray = Object.entries(population_data[0]) .filter(([key]) => !isNaN(key)) .map(([year, value]) => ({ Year: +year, Population: +value })); let tempArray = Array.from( d3.rollup( temperature_data, v => d3.mean(v, d => +d.Value), d => d.Area, d => d.Year ), ([area, yearMap]) => Array.from(yearMap, ([year, avgTemp]) => ({ Area: area, Year: +year, Temperature: avgTemp })) ).flat(); const allYearsFiltered = [...new Set([ ...filteredData.map(d => d.Year), ...popArray.map(d => d.Year), ...tempArray.map(d => d.Year) ])].filter(year => year >= 1967 && year <= 2021).sort((a, b) => a - b); const groupedData = allYearsFiltered.map(year => ({ Year: year, usage: d3.sum(filteredData.filter(d => d.Year === year && d.type === "usage"), d => d.Value) || 0, resource: d3.sum(filteredData.filter(d => d.Year === year && d.type === "resource"), d => d.Value) || 0, population: popArray.find(p => p.Year === year)?.Population || null, temperature: tempArray.find(t => t.Year === year)?.Temperature || null })); const div = document.createElement("div"); div.style.width = `${width + margin.left + margin.right}px`; div.style.margin = "auto"; div.style.position = "relative"; const tooltip = document.createElement("div"); tooltip.style.position = "absolute"; tooltip.style.background = "rgba(255, 255, 255, 0.9)"; tooltip.style.border = "1px solid #ccc"; tooltip.style.padding = "8px"; tooltip.style.borderRadius = "5px"; tooltip.style.fontSize = "12px"; tooltip.style.visibility = "hidden"; tooltip.style.pointerEvents = "none"; tooltip.style.zIndex = "1000"; tooltip.style.boxShadow = "2px 2px 10px rgba(0,0,0,0.3)"; document.body.appendChild(tooltip); const select = document.createElement("select"); select.innerHTML = ` `; div.appendChild(select); const waterSelect = document.createElement("select"); waterSelect.innerHTML = ` `; div.appendChild(waterSelect); const title = document.createElement("h3"); title.textContent = `Water, Population & Temperature Trends in ${selectedCity}`; title.style.textAlign = "center"; div.appendChild(title); const legendContainer = document.createElement("div"); legendContainer.style.display = "flex"; legendContainer.style.justifyContent = "center"; legendContainer.style.gap = "20px"; legendContainer.style.marginTop = "10px"; div.appendChild(legendContainer); const container = document.createElement("div"); container.style.display = "flex"; container.style.flexDirection = "column"; container.style.alignItems = "center"; div.appendChild(container); const svg = d3.create("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom); const g = svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); const xAxisTitle = g.append("text") .attr("class", "x-axis-title") .attr("transform", `translate(${width / 2}, ${height + 50})`) .style("text-anchor", "middle") .style("font-size", "14px") .text("Année"); const yAxisLeftTitle = g.append("text") .attr("class", "y-axis-left-title") .attr("transform", "rotate(-90)") .attr("x", -height / 2) .attr("y", -60) .style("text-anchor", "middle") .style("font-size", "14px") .text("Water Usage"); const yAxisRightTitle = g.append("text") .attr("class", "y-axis-right-title") .attr("transform", "rotate(-90)") .attr("x", -height / 2) .attr("y", width + 50) .style("text-anchor", "middle") .style("font-size", "14px") .text("Population"); const legendWater = document.createElement("div"); legendWater.style.display = "flex"; legendWater.style.alignItems = "center"; legendWater.style.gap = "5px"; const legendVariable = document.createElement("div"); legendVariable.style.display = "flex"; legendVariable.style.alignItems = "center"; legendVariable.style.gap = "5px"; legendContainer.appendChild(legendWater); legendContainer.appendChild(legendVariable); const xScale = d3.scaleLinear().domain([1967, 2021]).range([0, width]); let yScaleWater = d3.scaleLinear().range([height, 0]); let yScaleRight = d3.scaleLinear() .domain([0, d3.max(groupedData, d => d.population) * 1.1]) .nice() .range([height, 0]); const xAxis = g.append("g") .attr("transform", `translate(0, ${height})`) .call(d3.axisBottom(xScale).tickFormat(d3.format("d"))); const yAxisLeft = g.append("g"); const yAxisRight = g.append("g") .attr("transform", `translate(${width}, 0)`) .call(d3.axisRight(yScaleRight)); function updateGraph() { const selectedField = select.value; const selectedWaterField = waterSelect.value; const selectedColor = selectedField === "population" ? "green" : "orange"; const selectedData = selectedField === "population" ? groupedData : groupedData.filter(d => d.temperature !== null); yAxisLeftTitle.text(selectedWaterField === "usage" ? "Water Usage" : "Water Resources"); yAxisRightTitle.text(selectedField === "population" ? "Population" : "Température"); yScaleWater.domain([ d3.min(groupedData, d => d[selectedWaterField]) * 0.9, d3.max(groupedData, d => d[selectedWaterField]) * 1.1 ]).nice(); yAxisLeft.transition().duration(500).call(d3.axisLeft(yScaleWater)); yScaleRight.domain([ d3.min(selectedData, d => d[selectedField]) * 0.9, d3.max(selectedData, d => d[selectedField]) * 1.1 ]).nice(); yAxisRight.transition().duration(500).call(d3.axisRight(yScaleRight)); legendWater.innerHTML = ""; legendVariable.innerHTML = ""; const waterCircle = document.createElement("span"); waterCircle.style.width = "10px"; waterCircle.style.height = "10px"; waterCircle.style.borderRadius = "50%"; waterCircle.style.display = "inline-block"; waterCircle.style.background = waterSelect.value === "usage" ? "steelblue" : "red"; const waterText = document.createElement("span"); waterText.textContent = waterSelect.value === "usage" ? "Water Usage" : "Water Resources"; legendWater.appendChild(waterCircle); legendWater.appendChild(waterText); const variableCircle = document.createElement("span"); variableCircle.style.width = "10px"; variableCircle.style.height = "10px"; variableCircle.style.borderRadius = "50%"; variableCircle.style.display = "inline-block"; variableCircle.style.background = select.value === "population" ? "green" : "orange"; const variableText = document.createElement("span"); variableText.textContent = select.value === "population" ? "Population" : "Température"; legendVariable.appendChild(variableCircle); legendVariable.appendChild(variableText); g.selectAll(".line-path").remove(); g.selectAll(".tooltip-circle").remove(); g.append("path").datum(groupedData).attr("fill", "none") .attr("stroke", selectedWaterField === "usage" ? "steelblue" : "red") .attr("stroke-width", 2) .attr("class", "line-path") .attr("d", d3.line().x(d => xScale(d.Year)).y(d => yScaleWater(d[selectedWaterField]))); g.append("path").datum(selectedData).attr("fill", "none").attr("stroke", selectedColor).attr("stroke-width", 2).attr("class", "line-path") .attr("d", d3.line().x(d => xScale(d.Year)).y(d => yScaleRight(d[selectedField]))); g.selectAll(".tooltip-circle") .data(groupedData.flatMap(d => [ { Year: d.Year, type: selectedWaterField, value: d[selectedWaterField], color: selectedWaterField === "usage" ? "steelblue" : "red" }, { Year: d.Year, type: selectedField, value: d[selectedField], color: selectedColor } ])) .enter() .append("circle") .attr("class", "tooltip-circle") .attr("cx", d => xScale(d.Year)) .attr("cy", d => (d.type === selectedWaterField) ? yScaleWater(d.value) : yScaleRight(d.value)) .attr("r", 5) .attr("fill", d => d.color) .on("mouseover", (event, d) => { tooltip.style.visibility = "visible"; tooltip.innerHTML = `Année: ${d.Year}
${d.type}: ${d.value.toFixed(2)}`; }) .on("mousemove", event => { tooltip.style.top = `${event.pageY - 20}px`; tooltip.style.left = `${event.pageX + 10}px`; }) .on("mouseout", () => { tooltip.style.visibility = "hidden"; }); } select.addEventListener("change", updateGraph); waterSelect.addEventListener("change", updateGraph); updateGraph(); container.appendChild(svg.node()); return div; } 30:T2a18,function BarChartForVariables(selectedCountry, data_project, population_data, temperature_data) { console.log("🔹 Fonction BarChartForVariablesByCountryAndYearaxeY exécutée !"); const margin = { top: 60, right: 60, bottom: 100, left: 80 }; const width = 900 - margin.left - margin.right; const height = 500 - margin.top - margin.bottom; const div = document.createElement("div"); div.style.width = `${width + margin.left + margin.right}px`; div.style.margin = "auto"; div.style.position = "relative"; const controls = document.createElement("div"); controls.style.marginBottom = "20px"; controls.innerHTML = ` Année de début : Année de fin : Type de données : Variable secondaire : `; div.appendChild(controls); function getUniqueColors() { const countryVariables = new Map(); data_project.forEach(d => { if (!countryVariables.has(d.Area)) { countryVariables.set(d.Area, new Set()); } countryVariables.get(d.Area).add(d.Variable); }); let maxCountry = null, maxVariables = 0; countryVariables.forEach((vars, country) => { if (vars.size > maxVariables) { maxVariables = vars.size; maxCountry = country; } }); const uniqueVariables = [...(countryVariables.get(maxCountry) || [])]; const colorPalette = d3.schemeCategory10.concat(d3.schemeSet3); return new Map(uniqueVariables.map((v, i) => [v, colorPalette[i % colorPalette.length]])); } const variableToColor = getUniqueColors(); function renderChart(startYear = 1967, endYear = 2021, dataType = "usage", secondaryVariable = "population") { div.querySelectorAll("svg").forEach(svg => svg.remove()); const svg = d3.create("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom + 50); svg.append("text") .attr("x", (width + margin.left + margin.right) / 2) .attr("y", 30) .attr("text-anchor", "middle") .style("font-size", "20px") .style("font-weight", "bold") .text(`${dataType === "usage" ? "Consommation d'eau" : "Ressources en eau"} & ${secondaryVariable === "population" ? "Population" : "Température"} pour ${selectedCountry}`); const g = svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); let filteredData = data_project.filter(d => d.Area === selectedCountry && !isNaN(Number(d.Value)) && Number(d.Value) > 0 && d.type === dataType && d.Year >= startYear && d.Year <= endYear ); if (filteredData.length === 0) { console.warn(`Aucune donnée d'eau trouvée pour ${selectedCountry}`); return div; } const groupedData = d3.rollups( filteredData, v => d3.sum(v, d => d.Value), d => d.Year, d => d.Variable ).map(([Year, vars]) => Object.assign({ Year }, Object.fromEntries(vars))); const variables = Object.keys(groupedData[0] || {}).filter(d => d !== "Year"); let popArray = Object.entries(population_data[0]) .filter(([key]) => !isNaN(key)) .map(([year, value]) => ({ Year: +year, Population: +value })) .filter(d => d.Year >= startYear && d.Year <= endYear); let tempArray = Array.from( d3.rollup( temperature_data, v => d3.mean(v, d => +d.Value), d => d.Area, d => d.Year ), ([area, yearMap]) => Array.from(yearMap, ([year, avgTemp]) => ({ Area: area, Year: +year, Temperature: avgTemp })) ).flat().filter(d => d.Area === selectedCountry && d.Year >= startYear && d.Year <= endYear); if (popArray.length === 0 && secondaryVariable === "population") { console.warn("Aucune donnée de population trouvée !"); return div; } if (tempArray.length === 0 && secondaryVariable === "temperature") { console.warn("Aucune donnée de température trouvée !"); return div; } const allYears = [...new Set([ ...groupedData.map(d => d.Year), ...popArray.map(d => d.Year), ...tempArray.map(d => d.Year) ])].sort((a, b) => a - b); const xScale = d3.scaleBand() .domain(allYears.map(String)) .range([0, width]) .padding(0.2); const stack = d3.stack() .keys(variables) .value((d, key) => d[key] || 0) .order(d3.stackOrderNone) .offset(d3.stackOffsetNone)(groupedData); const yScaleWater = d3.scaleLinear() .domain([0, d3.max(groupedData, d => d3.sum(variables, key => d[key] || 0))]) .nice() .range([height, 0]); const secondaryExtent = secondaryVariable === "population" ? [0, d3.max(popArray, d => d.Population)] : d3.extent(tempArray, d => d.Temperature); const yScaleSecondary = d3.scaleLinear() .domain(secondaryExtent) .nice() .range([height, 0]); const tooltip = d3.select("body") .append("div") .style("position", "absolute") .style("background", "#fff") .style("border", "1px solid #999") .style("padding", "5px") .style("border-radius", "4px") .style("pointer-events", "none") .style("visibility", "hidden"); const serie = g.selectAll(".serie") .data(stack) .enter() .append("g") .attr("class", "serie") .attr("fill", d => variableToColor.get(d.key)); serie.selectAll("rect") .data(d => d) .enter() .append("rect") .attr("x", d => xScale(String(d.data.Year))) .attr("y", d => yScaleWater(d[1])) .attr("width", xScale.bandwidth()) .attr("height", d => Math.max(yScaleWater(d[0]) - yScaleWater(d[1]), 1)) .attr("stroke", "black") .attr("stroke-width", 0.5) .on("mouseover", (event, d) => { tooltip.style("visibility", "visible"); const variableName = d3.select(event.currentTarget.parentNode).datum().key; const barValue = (d[1] - d[0]).toFixed(2); const waterUnit = "m³/an"; tooltip.html(` Variable : ${variableName}
Année : ${d.data.Year}
Valeur : ${barValue} ${waterUnit} `); }) .on("mousemove", (event) => { tooltip .style("top", (event.pageY - 10) + "px") .style("left", (event.pageX + 10) + "px"); }) .on("mouseleave", () => { tooltip.style("visibility", "hidden"); }); const lineSecondary = d3.line() .x(d => xScale(String(d.Year)) + xScale.bandwidth() / 2) .y(d => yScaleSecondary(secondaryVariable === "population" ? d.Population : d.Temperature)) .curve(d3.curveMonotoneX); const secondaryData = secondaryVariable === "population" ? popArray : tempArray; g.append("path") .datum(secondaryData) .attr("fill", "none") .attr("stroke", secondaryVariable === "population" ? "darkblue" : "orange") .attr("stroke-width", 2) .attr("d", lineSecondary); g.selectAll(".secondaryCircle") .data(secondaryData) .enter() .append("circle") .attr("class", "secondaryCircle") .attr("cx", d => xScale(String(d.Year)) + xScale.bandwidth() / 2) .attr("cy", d => yScaleSecondary(secondaryVariable === "population" ? d.Population : d.Temperature)) .attr("r", 4) .attr("fill", secondaryVariable === "population" ? "darkblue" : "orange") .on("mouseover", (event, d) => { tooltip.style("visibility", "visible"); const unit = secondaryVariable === "population" ? "habitants" : "°C"; tooltip.html(` Année : ${d.Year}
${secondaryVariable === "population" ? "Population" : "Température"} : ${d[secondaryVariable === "population" ? "Population" : "Temperature"]} ${unit} `); }) .on("mousemove", (event) => { tooltip .style("top", (event.pageY - 10) + "px") .style("left", (event.pageX + 10) + "px"); }) .on("mouseleave", () => { tooltip.style("visibility", "hidden"); }); g.append("text") .attr("class", "x-axis-title") .attr("transform", `translate(${width / 2}, ${height + margin.bottom - 10})`) .style("text-anchor", "middle") .style("font-size", "14px") .text("Année"); g.append("text") .attr("class", "y-axis-left-title") .attr("transform", "rotate(-90)") .attr("x", -height / 2) .attr("y", -margin.left + 20) .style("text-anchor", "middle") .style("font-size", "14px") .text(dataType === "usage" ? "Consommation d'eau (m³/an)" : "Ressources en eau (m³/an)"); g.append("text") .attr("class", "y-axis-right-title") .attr("transform", "rotate(-90)") .attr("x", -height / 2) .attr("y", width + margin.right - 20) .style("text-anchor", "middle") .style("font-size", "14px") .text(secondaryVariable === "population" ? "Population (habitants)" : "Température (°C)"); g.append("g") .attr("transform", `translate(0, ${height})`) .call(d3.axisBottom(xScale).tickFormat(d3.format("d"))) .selectAll("text") .attr("transform", "rotate(-45)") .style("text-anchor", "end"); g.append("g").call(d3.axisLeft(yScaleWater)); g.append("g") .attr("transform", `translate(${width}, 0)`) .call(d3.axisRight(yScaleSecondary)); div.appendChild(svg.node()); return div; } div.querySelector("#updateChart").addEventListener("click", () => { renderChart( parseInt(document.getElementById("startYear").value), parseInt(document.getElementById("endYear").value), document.getElementById("dataType").value, document.getElementById("secondaryVariable").value ); }); renderChart(); return div; }31:Teac,async function ScatterplotForTempVsWater(selectedCountry) { const filteredData = dataset.filter( d => d.Area === selectedCountry && !isNaN(d.Year) && !isNaN(d.Water_Resource) && !isNaN(d.Avg_Temperature) ); if (filteredData.length === 0) { console.error(`Pas de données disponibles pour ${selectedCountry}`); const errorElem = document.createElement("p"); errorElem.textContent = `Pas de données disponibles pour ${selectedCountry}`; return errorElem; } const units = Array.from(new Set(filteredData.map(d => d.Water_Unit))); let yAxisLabel = "Utilisation de l'eau"; if (units.length === 1) { yAxisLabel += ` (${units[0]})`; } else if (units.length > 1) { yAxisLabel += " (unités multiples)"; } const margin = { top: 20, right: 30, bottom: 50, left: 60 }; const width = 800 - margin.left - margin.right; const height = 400 - margin.top - margin.bottom; const div = document.createElement("div"); div.style.width = `${width + margin.left + margin.right}px`; div.style.margin = "auto"; const title = document.createElement("h3"); title.textContent = `Impact de la température sur l'utilisation de l'eau pour ${selectedCountry} (1967-2021)`; title.style.textAlign = "center"; div.appendChild(title); const svg = d3.create("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom); const g = svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); const xScale = d3.scaleLinear() .domain(d3.extent(filteredData, d => d.Avg_Temperature)) .range([0, width]) .nice(); const yScale = d3.scaleLinear() .domain(d3.extent(filteredData, d => d.Water_Resource)) .range([height, 0]) .nice(); g.append("g") .attr("transform", `translate(0, ${height})`) .call(d3.axisBottom(xScale)); // Axe Y const yAxis = g.append("g") .call(d3.axisLeft(yScale)); yAxis.append("text") .attr("fill", "currentColor") .attr("text-anchor", "middle") .attr("transform", `translate(${-margin.left + 15}, ${height / 2}) rotate(-90)`) .style("font-weight", "bold") .text(yAxisLabel); g.selectAll("circle") .data(filteredData) .enter() .append("circle") .attr("cx", d => xScale(d.Avg_Temperature)) .attr("cy", d => yScale(d.Water_Resource)) .attr("r", 4) .attr("fill", "blue") .attr("opacity", 0.7) .append("title") .text(d => `Année: ${d.Year}\nTempérature moyenne: ${d.Avg_Temperature.toFixed(2)} °C\nUtilisation de l'eau: ${d.Water_Resource}`); // ss.linearRegression() : Utilise la biblio simple-statistics pour calculer les coefficients de la RL (pente et ordonnée à l'origine). // ss.linearRegressionLine() : Crée une fct qui permet de calculer la valeur prédite de l'utilisation de l'eau en fonction de la température moy. const regression = ss.linearRegression(filteredData.map(d => [d.Avg_Temperature, d.Water_Resource])); const regressionLine = ss.linearRegressionLine(regression); // On prépare les points de début et de fin de la ligne de régression pour l'affichage. Point de départ et d'arrivée const xMin = d3.min(filteredData, d => d.Avg_Temperature); const xMax = d3.max(filteredData, d => d.Avg_Temperature); const lineData = [ { x: xMin, y: regressionLine(xMin) }, { x: xMax, y: regressionLine(xMax) } ]; // On dessine la ligne de régression sur le graphique g.append("path") .datum(lineData) .attr("fill", "none") .attr("stroke", "red") .attr("stroke-width", 2) .attr("d", d3.line() .x(d => xScale(d.x)) .y(d => yScale(d.y)) ); div.appendChild(svg.node()); return div; } 32:T3b88,async function MyWaterPredictionChart(selectedCity) { const waterUnit = "m³"; const futureSteps = 10; // On nettoyer les colonnes de population (suppression des espaces inutiles) popData.columns = popData.columns.map(col => col.trim()); function mergeData(tempData, waterDataRessource, popData, selectedCity) { const tempCity = tempData .filter(d => d.Area === selectedCity) .map(d => ({ Year: +d.Year, Value: +d.Value })); const waterCity = waterDataRessource .filter(d => d.Area === selectedCity && d.type === "resource") .map(d => ({ Year: +d.Year, Value: +d.Value })); const popCity = popData .map(d => { const yearCols = Object.keys(d).filter(key => key.startsWith("20")); return yearCols.map(year => ({ Location: d['Country Name'], Year: +year, Population: +d[year] })); }) .flat() .filter(d => d.Location === selectedCity); const cityData = tempCity.map(temp => { const water = waterCity.find(w => w.Year === temp.Year); const pop = popCity.find(p => p.Year === temp.Year); return { Year: temp.Year, TempValue: temp.Value, WaterValue: water ? water.Value : null, Population: pop ? pop.Population : null }; }).filter(d => d.WaterValue !== null && d.Population !== null); return cityData; } // On normalise les données pour qu'elles aient une moyenne de 0 et un écart-type de 1. function normalizeData(cityData) { const scaler = (arr) => { const mean = d3.mean(arr); const std = d3.deviation(arr) || 1; // Évite la division par zéro return { mean, std }; }; // On calcul les scalers (mean et std) pour chaque variable const tempScaler = scaler(cityData.map(d => d.TempValue)); const popScaler = scaler(cityData.map(d => d.Population)); const watScaler = scaler(cityData.map(d => d.WaterValue)); cityData.forEach(d => { d.ScaledTemp = (d.TempValue - tempScaler.mean) / tempScaler.std; d.ScaledPop = (d.Population - popScaler.mean) / popScaler.std; d.ScaledWater = (d.WaterValue - watScaler.mean) / watScaler.std; }); return { data: cityData, scalers: { temp: tempScaler, pop: popScaler, water: watScaler } }; } // 2) Fonctions de régression / prédiction /** * Effectue une régression linéaire multiple pour prédire les ressources en eau. * @param {Array} cityData - Données de la ville. * @returns {Object} - Résultats de la régression (MAE, MSE, prédictions, erreurs). */ function performLinearRegression(cityData) { const X = cityData.map(d => [d.Year, d.ScaledTemp, d.ScaledPop]); const y = cityData.map(d => d.WaterValue); const splitIndex = Math.floor(X.length * 0.8); const X_train = X.slice(0, splitIndex); const X_test = X.slice(splitIndex); const y_train = y.slice(0, splitIndex); const y_test = y.slice(splitIndex); const result = regression.linear( X_train.map((x, i) => [x[0], y_train[i]]) ); const y_pred = X_test.map(x => result.predict(x[0])[1]); // Calcul des erreurs const errors = y_test.map((val, i) => Math.abs(val - y_pred[i])); const mae = d3.mean(errors); const mse = d3.mean(errors.map(e => e ** 2)); const stdError = d3.deviation(errors) || 0; // Écart-type des erreurs return { mae, mse, y_pred, stdError }; } /** * Entraîne un modèle LSTM et effectue des prédictions futures. * @param {Array} cityData - Données de la ville. * @param {Object} scalers - Scalers pour inverser la normalisation. * @param {number} futureSteps - Nombre d'années de prévision. * @returns {Object} - Résultats de la prédiction (MAE, prédictions futures, erreurs). */ async function LSTMTrainTestFuture(cityData, scalers, futureSteps) { const windowSize = 3; const X = []; const Y = []; for (let i = windowSize; i < cityData.length; i++) { const slice_ = cityData.slice(i - windowSize, i); const featuresMatrix = slice_.map(d => [ d.ScaledTemp, d.ScaledPop, d.ScaledWater ]); X.push(featuresMatrix); Y.push([ cityData[i].ScaledWater ]); } const totalSamples = X.length; const trainSize = Math.floor(totalSamples * 0.8); const Xtrain = X.slice(0, trainSize); const Ytrain = Y.slice(0, trainSize); const Xtest = X.slice(trainSize); const Ytest = Y.slice(trainSize); const tensorXtrain = tf.tensor3d(Xtrain); const tensorYtrain = tf.tensor2d(Ytrain); const tensorXtest = tf.tensor3d(Xtest); const tensorYtest = tf.tensor2d(Ytest); const model = tf.sequential(); model.add(tf.layers.lstm({ units: 16, inputShape: [windowSize, 3] })); model.add(tf.layers.dense({ units: 1 })); model.compile({ optimizer: "adam", loss: "meanSquaredError" }); await model.fit(tensorXtrain, tensorYtrain, { epochs: 50, batchSize: 4, verbose: 0 }); const predsTest = model.predict(tensorXtest); const predsTestArr = await predsTest.array(); const YtestArr = await tensorYtest.array(); const absErrors = predsTestArr.map((p,i) => Math.abs(p[0] - YtestArr[i][0])); const maeScaled = d3.mean(absErrors); const maeDescaled = maeScaled * scalers.water.std; const stdError = d3.deviation(absErrors) || 0; // Écart-type des erreurs let currentWindow = cityData .slice(-windowSize) .map(d => [ d.ScaledTemp, d.ScaledPop, d.ScaledWater ]); const futurePredScaled = []; for (let i = 0; i < futureSteps; i++) { const input = tf.tensor3d([ currentWindow ]); const scaledVal = model.predict(input).dataSync()[0]; futurePredScaled.push(scaledVal); currentWindow.shift(); const [lastTemp, lastPop] = currentWindow[currentWindow.length - 1]; currentWindow.push([ lastTemp, lastPop, scaledVal ]); } const futurePred = futurePredScaled.map( sv => sv * scalers.water.std + scalers.water.mean ); return { maeDescaled, futurePred, stdError }; } // ------------------------------------------------------------------ // 3) Pipeline : fusion, normalisation, calcul des modèles // ------------------------------------------------------------------ const mergedData = mergeData(tempData, waterDataRessource, popData, selectedCity); if (!mergedData.length) { const errorElem = document.createElement("p"); errorElem.textContent = `Pas de données pour ${selectedCity}`; return errorElem; } mergedData.sort((a, b) => d3.ascending(a.Year, b.Year)); const { data: normalizedData, scalers } = normalizeData(mergedData); const { mae: maeLinear, y_pred: y_predLinear, stdError: stdErrorLinear } = performLinearRegression(normalizedData); const { maeDescaled, futurePred, stdError: stdErrorLSTM } = await LSTMTrainTestFuture(normalizedData, scalers, futureSteps); const lastYear = normalizedData[normalizedData.length - 1].Year; const futureYears = d3.range(lastYear + 1, lastYear + 1 + futureSteps); // ------------------------------------------------------------------ // 4) Construction du graphique // ------------------------------------------------------------------ const chartContainer = document.createElement("div"); chartContainer.style.width = "800px"; chartContainer.style.margin = "auto"; // Ajouter l'incertitude dans le titre const title = document.createElement("h3"); title.textContent = `Prediction of Water Resources for ${selectedCity} (Linear Uncertainty: ${stdErrorLinear.toFixed(2)}, LSTM: ${stdErrorLSTM.toFixed(2)})`; title.style.textAlign = "center"; chartContainer.appendChild(title); // Créer un conteneur pour la légende const legendContainer = document.createElement("div"); legendContainer.style.display = "flex"; legendContainer.style.justifyContent = "center"; legendContainer.style.gap = "20px"; legendContainer.style.marginTop = "10px"; // Fonction pour créer un élément de légende const createLegendItem = (color, label) => { const item = document.createElement("div"); item.style.display = "flex"; item.style.alignItems = "center"; item.style.gap = "5px"; const colorBox = document.createElement("div"); colorBox.style.width = "10px"; colorBox.style.height = "10px"; colorBox.style.backgroundColor = color; const labelText = document.createElement("span"); labelText.textContent = label; item.appendChild(colorBox); item.appendChild(labelText); return item; }; // Ajouter les éléments de la légende legendContainer.appendChild(createLegendItem("blue", "Historique")); legendContainer.appendChild(createLegendItem("red", "Linear Regression")); legendContainer.appendChild(createLegendItem("#1f77b4", "Uncertainty (Linear)")); legendContainer.appendChild(createLegendItem("orange", "LSTM")); legendContainer.appendChild(createLegendItem("#2ca02c", "Uncertainty (LSTM)")); // Ajouter la légende au conteneur principal chartContainer.appendChild(legendContainer); const margin = { top: 40, right: 30, bottom: 60, left: 70 }; const width = 800 - margin.left - margin.right; const height = 400 - margin.top - margin.bottom; const svg = d3.create("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom); const g = svg.append("g") .attr("transform", `translate(${margin.left},${margin.top})`); const xDomainMin = d3.min(normalizedData, d => d.Year); const xDomainMax = Math.max(d3.max(normalizedData, d => d.Year), d3.max(futureYears)); const x = d3.scaleLinear() .domain([xDomainMin, xDomainMax]) .range([0, width]); const maxWater = d3.max([ d3.max(normalizedData, d => d.WaterValue), d3.max(y_predLinear), d3.max(futurePred) ]); const y = d3.scaleLinear() .domain([0, maxWater * 1.1]) .range([height, 0]); const xAxis = d3.axisBottom(x).ticks(10); g.append("g") .attr("transform", `translate(0,${height})`) .call(xAxis) .selectAll("text") .attr("transform", "rotate(-45)") .style("text-anchor", "end"); const yAxis = d3.axisLeft(y); g.append("g").call(yAxis); g.append("text") .attr("text-anchor", "middle") .attr("x", width / 2) .attr("y", height + 35) .style("font-weight", "bold") .text("Année"); g.append("text") .attr("text-anchor", "middle") .attr("transform", `translate(${-50},${height/2}) rotate(-90)`) .style("font-weight", "bold") .text(`Water Ressources (${waterUnit})`); // Historique (en bleu) const validHistoricalData = normalizedData.filter(d => !isNaN(d.WaterValue) && !isNaN(d.Year)); g.selectAll(".historical") .data(validHistoricalData) .enter() .append("circle") .attr("cx", d => x(d.Year)) .attr("cy", d => y(d.WaterValue)) .attr("r", 4) .attr("fill", "blue") .attr("stroke", "black") .append("title") .text(d => `Année : ${d.Year}\nValue : ${d.WaterValue.toFixed(2)}`); const lineHistorical = d3.line() .x(d => x(d.Year)) .y(d => y(d.WaterValue)) .defined(d => !isNaN(d.WaterValue)); g.append("path") .datum(validHistoricalData) .attr("fill", "none") .attr("stroke", "blue") .attr("stroke-width", 2) .attr("d", lineHistorical); // Prédiction Régression Linéaire (rouge) const forecastDataLinear = [ { Year: lastYear, WaterValue: normalizedData[normalizedData.length - 1].WaterValue }, ... futureYears.map((year, i) => ({ Year: year, WaterValue: y_predLinear[i] })) ]; const validForecastDataLinear = forecastDataLinear.filter(d => !isNaN(d.WaterValue)); // Intervalle d'incertitude pour la régression linéaire const uncertaintyLinear = validForecastDataLinear.map(d => ({ Year: d.Year, Upper: d.WaterValue + stdErrorLinear, Lower: d.WaterValue - stdErrorLinear })); console.log("Uncertainty Linear Data:", uncertaintyLinear); // Tracé de l'intervalle d'incertitude const areaLinear = d3.area() .x(d => x(d.Year)) .y0(d => y(d.Upper)) .y1(d => y(d.Lower)) .defined(d => !isNaN(d.Upper) && !isNaN(d.Lower)); console.log("Area Linear Path:", areaLinear(uncertaintyLinear)); g.append("path") .datum(uncertaintyLinear) .attr("fill", "#1f77b4") // Bleu foncé pour l'incertitude .attr("fill-opacity", 0.3) // Opacité ajustée .attr("stroke", "none") .attr("d", areaLinear); // Tracé des prédictions linéaires g.selectAll(".forecast1-point") .data(validForecastDataLinear.slice(1)) .enter() .append("circle") .attr("cx", d => x(d.Year)) .attr("cy", d => y(d.WaterValue)) .attr("r", 3) // Taille des points réduite .attr("fill", "red") .attr("stroke", "black") .append("title") .text(d => `Année : ${d.Year}\nForecast RL: ${d.WaterValue.toFixed(2)}`); const lineForecast1 = d3.line() .x(d => x(d.Year)) .y(d => y(d.WaterValue)) .defined(d => !isNaN(d.WaterValue)); g.append("path") .datum(validForecastDataLinear) .attr("fill", "none") .attr("stroke", "red") .attr("stroke-width", 2) .attr("d", lineForecast1); // Prédiction LSTM (orange) const forecastDataLSTM = [ { Year: lastYear, WaterValue: normalizedData[normalizedData.length - 1].WaterValue }, ... futureYears.map((year, i) => ({ Year: year, WaterValue: futurePred[i] })) ]; const validForecastDataLSTM = forecastDataLSTM.filter(d => !isNaN(d.WaterValue)); // Intervalle d'incertitude pour le modèle LSTM const uncertaintyLSTM = validForecastDataLSTM.map(d => ({ Year: d.Year, Upper: d.WaterValue + stdErrorLSTM, Lower: d.WaterValue - stdErrorLSTM })); console.log("Uncertainty LSTM Data:", uncertaintyLSTM); // Tracé de l'intervalle d'incertitude const areaLSTM = d3.area() .x(d => x(d.Year)) .y0(d => y(d.Upper)) .y1(d => y(d.Lower)) .defined(d => !isNaN(d.Upper) && !isNaN(d.Lower)); console.log("Area LSTM Path:", areaLSTM(uncertaintyLSTM)); g.append("path") .datum(uncertaintyLSTM) .attr("fill", "#2ca02c") // Vert foncé pour l'incertitude .attr("fill-opacity", 0.3) // Opacité ajustée .attr("stroke", "none") .attr("d", areaLSTM); // Tracé des prédictions LSTM g.selectAll(".forecast3-point") .data(validForecastDataLSTM.slice(1)) .enter() .append("circle") .attr("cx", d => x(d.Year)) .attr("cy", d => y(d.WaterValue)) .attr("r", 3) // Taille des points réduite .attr("fill", "orange") .attr("stroke", "black") .append("title") .text(d => `Année : ${d.Year}\nForecast LSTM: ${d.WaterValue.toFixed(2)}`); const lineForecast3 = d3.line() .x(d => x(d.Year)) .y(d => y(d.WaterValue)) .defined(d => !isNaN(d.WaterValue)); g.append("path") .datum(validForecastDataLSTM) .attr("fill", "none") .attr("stroke", "orange") .attr("stroke-width", 2) .attr("d", lineForecast3); chartContainer.appendChild(svg.node()); return chartContainer; }33:T84d,Dans un monde où l'eau devient une ressource de plus en plus précieuse, **MyWater** est là pour aider à mieux comprendre son utilisation et sa gestion. Imaginez une plateforme interactive où vous pouvez explorer, analyser et visualiser comment l’eau est consommée (U), quelles ressources sont disponibles (R), comment la population (P) évolue et comment la température (T) influence tout cela. Il suffit de **cliquer sur un pays sur la carte**, et vous accédez instantanément à une vue détaillée avec des **graphiques dynamiques**, qui vous révèlent les tendances clés et les liens cachés entre ces facteurs. L’eau, la population et le climat sont profondément liés. Plus la population augmente, plus la demande en eau explose, que ce soit pour l’agriculture, l’industrie ou la consommation quotidienne. En parallèle, les températures grimpent sous l'effet du changement climatique, accélérant l’évaporation et diminuant les réserves d’eau. Ce cocktail explosif peut mener à un **stress hydrique** : moins d’eau disponible, plus de conflits d’usage, et une menace sur la durabilité des ressources naturelles. **MyWater vous permet de visualiser ces interactions en temps réel**, afin de mieux comprendre comment ces changements impactent votre région ou le monde entier. Mais MyWater ne s’arrête pas à une simple photographie du présent. L’application intègre aussi un **module de prédiction avancé** qui vous projette **dans les 10 prochaines années**. Grâce à des modèles basés sur les tendances historiques et climatiques, vous pouvez anticiper les scénarios futurs : quels pays risquent de manquer d’eau ? Quelles solutions peuvent être mises en place dès maintenant ? Ces prévisions sont essentielles pour les **décideurs, les chercheurs et tous ceux qui veulent agir pour un avenir plus durable**. Avec **MyWater**, chaque donnée racontée devient une histoire, chaque courbe de tendance est une alerte, et chaque clic est une opportunité d’apprendre et d’agir. Parce que comprendre l’eau, c’est déjà commencer à la préserver. 💧🌍34:[{"id":"cb687e2313d198dc3191c8d461c67d88259d0db4a17c2d5b8c28b904e8775bbdc54bbec9e3eadb326a6a0fd5279cefd0f66242c1b9d988b15d23efbc35b2cabf","href":"https://static.observableusercontent.com/files/cb687e2313d198dc3191c8d461c67d88259d0db4a17c2d5b8c28b904e8775bbdc54bbec9e3eadb326a6a0fd5279cefd0f66242c1b9d988b15d23efbc35b2cabf","name":"temp_dataset.csv","type":"text/csv","lastModified":1739621608005.855,"size":36568192},{"id":"4e958d0b8e766525121c0d90decb61fcc8dbe12e3e17354428b32dd73f1102c2102585fe35dee07a8cd79f6a980b8a5caa45f1d79aba3d6c10656c6cb081e743","href":"https://static.observableusercontent.com/files/4e958d0b8e766525121c0d90decb61fcc8dbe12e3e17354428b32dd73f1102c2102585fe35dee07a8cd79f6a980b8a5caa45f1d79aba3d6c10656c6cb081e743","name":"water_use_rsc_dataset@2.csv","type":"text/csv","lastModified":1740095074622.53,"size":15082997},{"id":"4e958d0b8e766525121c0d90decb61fcc8dbe12e3e17354428b32dd73f1102c2102585fe35dee07a8cd79f6a980b8a5caa45f1d79aba3d6c10656c6cb081e743","href":"https://static.observableusercontent.com/files/4e958d0b8e766525121c0d90decb61fcc8dbe12e3e17354428b32dd73f1102c2102585fe35dee07a8cd79f6a980b8a5caa45f1d79aba3d6c10656c6cb081e743","name":"water_use_rsc_dataset@3.csv","type":"text/csv","lastModified":1740095229628.442,"size":15082997},{"id":"551593efde82d78503907c80a72594d2da0f414f1e0075f4f58e030398e5ef2d09d89a41e5dd38d2983002803723e4d670f43b7a74a826c3f1d5419217957bb2","href":"https://static.observableusercontent.com/files/551593efde82d78503907c80a72594d2da0f414f1e0075f4f58e030398e5ef2d09d89a41e5dd38d2983002803723e4d670f43b7a74a826c3f1d5419217957bb2","name":"population.csv","type":"text/csv","lastModified":1739664559762.042,"size":180218},{"id":"9e473b78113bacbcb6953f1654e290e229d8848be630c1331fc37bddbb93cf333c89949b54dd0320d368ba0ce1bf703885df096f710e3bebbd47abe7a680659f","href":"https://static.observableusercontent.com/files/9e473b78113bacbcb6953f1654e290e229d8848be630c1331fc37bddbb93cf333c89949b54dd0320d368ba0ce1bf703885df096f710e3bebbd47abe7a680659f","name":"prototype-projet-vis.jpg","type":"image/jpeg","lastModified":1740340499365.895,"size":324390}] 2d:{"id":"34b8113cc0cae60b","slug":null,"title":"Projet Visualisation : Prototype and Implementation","thumbnail":"1c1eda5acd319e0ed9915b8d21faecd471c68f926bb6f0a456050e5c6dda8961","access_level":"public","create_time":"$D2025-02-15T12:09:46.754Z","update_time":"$D2025-02-23T23:39:16.887Z","view_time":null,"first_public_time":"$D2025-03-16T13:57:15.674Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"a4c844299b24c9f2","login":"sihamzr","name":"SihamZR","avatar_url":"https://avatars-next.observableusercontent.com/2604988acdf83287206ea3001f30a28b9253eb98dacb288e264025c8f0340895","tier":"starter_2024"},"version":840,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b9bb2f3b9fc5e13b","login":"sihamzr","name":"SihamZR","avatar_url":"https://avatars-next.observableusercontent.com/3df0a3c85402c72ce5fd9515c2ef0d20bd780cd37d2bb25a681e4c0e71e98c24","tier":null},{"type":"individual","id":"54c2d82cd1e3e0f9","login":"ismail-ben-alla","name":"Ismail ben alla","avatar_url":"https://avatars-next.observableusercontent.com/ed9a78eecccd5c7f7432463d53d04402725a187d36dd00b0bb650d24ad2f1117","tier":null},{"type":"individual","id":"560201c9c61a188e","login":"romsson","name":"Romain Vuillemot","avatar_url":"https://avatars-next.observableusercontent.com/3b127750f8c67597cf2e60d4296f87cde15f59cdb4d1853063922cce5489fb4b","tier":null}],"members":[{"type":"team","id":"a4c844299b24c9f2","login":"sihamzr","name":"SihamZR","avatar_url":"https://avatars-next.observableusercontent.com/2604988acdf83287206ea3001f30a28b9253eb98dacb288e264025c8f0340895","tier":"starter_2024","role":"editor"},{"type":"individual","id":"b9bb2f3b9fc5e13b","login":"sihamzr","name":"SihamZR","avatar_url":"https://avatars-next.observableusercontent.com/3df0a3c85402c72ce5fd9515c2ef0d20bd780cd37d2bb25a681e4c0e71e98c24","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Projet Visualisation : Prototype and Implementation","cells":[{"id":223,"value":"# Projet Visualisation : Prototype and Implementation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":763,"value":"## Romain Vuillemot– romain.vuillemot@ec-lyon.fr\n## Réalisé par : Siham ZARMOUM & Ismail BEN ALLA","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":332,"value":"## Importation de packages","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":34,"value":"ss = require(\"simple-statistics\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":240,"value":"tf = await require('@tensorflow/tfjs')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":327,"value":"d3 = require(\"d3\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":330,"value":"regression = require(\"regression\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":788,"value":"import {html} from \"@observablehq/htl\"; ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":334,"value":"## Télechargement des bases de données","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":483,"value":"#### BD : Température","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":337,"value":"tempData = await FileAttachment(\"temp_dataset.csv\").csv({ typed: true });","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":481,"value":"#### BD : Water","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":556,"value":"waterData = await FileAttachment(\"water_use_rsc_dataset@3.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":340,"value":"waterDataRessource = (waterData).filter(d => d.type === \"resource\" && d.VariableGroup === \"Water resources\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":345,"value":"waterDataUsage = (waterData).filter(d => d.type === \"usage\" && d.VariableGroup === \"Water use\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":479,"value":"#### BD : Population","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":343,"value":"popData = await FileAttachment(\"population.csv\").csv({ typed: true });","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":361,"value":"## Etude préalable des bases de données","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":364,"value":"Réalisation d'une phase (rapide) de découverte de données (regarder les données brutes, types, etc.)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":381,"value":"### 1- Affichage des 5 premières lignes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":439,"value":"#### BD : Water","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":370,"value":"waterData.filter(d => d.type === \"usage\").slice(0, 5)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":372,"value":"waterData.filter(d => d.type === \"resource\").slice(0, 5)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":441,"value":"#### BD : Population","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":443,"value":"popData.slice(0, 5)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":445,"value":"#### BD : Température","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":448,"value":"tempData.slice(0, 5)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":383,"value":"### 2- Comptage de nombre de lignes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":450,"value":"#### BD : Water","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":385,"value":"waterData.filter(d => d.type === \"usage\").length","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":387,"value":"waterData.filter(d => d.type === \"resource\").length","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":455,"value":"#### BD : Population","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":468,"value":"popData.length","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":470,"value":"#### BD : Température","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":477,"value":"tempData.length","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":389,"value":"### 3- Identification des colonnes disponibles","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":488,"value":"#### BD : Water","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":391,"value":"resourceColumns = Object.keys(waterData.filter(d => d.type === \"resource\")[0]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":393,"value":"usageColumns = Object.keys(waterData.filter(d => d.type === \"usage\")[0]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":397,"value":"- Utilisation de columns pour afficher les types","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":399,"value":"Inputs.table(\n resourceColumns.map(col => ({\n column: col,\n types: [...new Set(waterData.map(row => typeof row[col]))]\n }))\n);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":401,"value":"Inputs.table(\n usageColumns.map(col => ({\n column: col,\n types: [...new Set(waterData.map(row => typeof row[col]))]\n }))\n);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":490,"value":"#### BD : Population","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":492,"value":"popColumns = Object.keys(popData[0]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":497,"value":"Inputs.table(\n popColumns.map(col => ({\n column: col,\n types: [...new Set(popData.map(row => typeof row[col]))]\n }))\n);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":499,"value":"#### BD : Température","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":501,"value":"tempColumns = Object.keys(tempData[0]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":503,"value":"Inputs.table(\n tempColumns.map(col => ({\n column: col,\n types: [...new Set(tempData.map(row => typeof row[col]))]\n }))\n);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":403,"value":"### 4- Affichage des Statistiques (min, max, moyenne) pour chaque colonne numérique","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":405,"value":"function calculateStats_project(data, columnName, selectedType) {\n let min = Infinity, max = -Infinity, sum = 0, count = 0;\n\n for (let i = 0; i < data.length; i++) {\n if (data[i].type === selectedType) {\n const value = +data[i][columnName];\n if (!isNaN(value)) {\n min = Math.min(min, value);\n max = Math.max(max, value);\n sum += value;\n count++;\n }\n }\n }\n\n return {\n column: columnName,\n type: selectedType,\n min,\n max,\n mean: count > 0 ? sum / count : NaN\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":509,"value":"#### BD : Water","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":411,"value":"calculateStats_project(waterData, \"Year\", \"usage\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":415,"value":"calculateStats_project(waterData, \"Year\", \"resource\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":417,"value":"calculateStats_project(waterData, \"Value\", \"usage\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":419,"value":"calculateStats_project(waterData, \"Value\", \"resource\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":516,"value":"#### BD : Température","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":523,"value":"calculateStats_project(tempData, \"Year\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":526,"value":"calculateStats_project(tempData, \"Value\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":421,"value":"### 5- Affichage des Statistiques pour chaque colonne catégorielle","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":423,"value":"function categoricalStats_project(data, columnName, selectedType) {\n const counts = data\n .filter(row => row.type === selectedType)\n .reduce((acc, row) => {\n const value = row[columnName];\n acc[value] = (acc[value] || 0) + 1;\n return acc;\n }, {});\n\n const total = Object.values(counts).reduce((a, b) => a + b, 0);\n\n const stats = Object.entries(counts).map(([category, count]) => ({\n category,\n type: selectedType,\n count,\n percentage: ((count / total) * 100).toFixed(2) + \"%\" \n }));\n\n return stats;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":529,"value":"#### BD : Water","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":425,"value":"categoricalStats_project(waterData, \"Country\", \"usage\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":427,"value":"categoricalStats_project(waterData, \"Country\", \"resource\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":429,"value":"Inputs.table(categoricalStats_project(waterData, \"Variable\", \"usage\"));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":431,"value":"Inputs.table(categoricalStats_project(waterData, \"Unit\", \"usage\"));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":433,"value":"Inputs.table(categoricalStats_project(waterData, \"Symbol\", \"usage\"));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":531,"value":"#### BD : Température","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":533,"value":"Inputs.table(categoricalStats_project(tempData, \"Unit\"));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":543,"value":"## Selection des variables","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":574,"value":"#### Select Year","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":548,"value":"viewof selectedYear = Inputs.range([d3.min(waterData, d => d.Year), d3.max(waterData, d => d.Year)], {\n label: \"Year:\",\n step: 1,\n value: d3.min(waterData, d => d.Year)\n});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":578,"value":"#### Select Country","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":550,"value":"cityList = Array.from(new Set(waterData.map(d => d.Area)));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":567,"value":"viewof selectedCity = Inputs.select(\n Array.from(new Set(waterData.map(d => d.Area))), \n { label: \"Choisissez une ville :\", value: \"Afghanistan\" }\n);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":580,"value":"## Implementation des Graphes Interactive","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":582,"value":"### 1- LineChart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":695,"value":"Ce graphe facilite l’analyse des tendances et des corrélations entre l’utilisation de l’eau, les ressources disponibles et les facteurs démographiques ou climatiques. Il permet d’examiner comment les variations de population ou de température influencent la gestion de l’eau dans une ville donnée.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":666,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":587,"value":"{\n const existingChart = document.querySelector(\".linegraph-container\");\n if (existingChart) {\n existingChart.remove();\n }\n\n const chartContainer = document.createElement(\"div\");\n chartContainer.className = \"linegraph-container\";\n\n const chart = LineGraphByCountryAndYear(selectedCity, waterData, popData, tempData);\n console.log(\"Graphique LineGraph retourné :\", chart);\n\n if (chart) {\n chartContainer.appendChild(chart);\n } else {\n console.error(\"Aucun LineGraph n'a été généré.\");\n }\n\n return chartContainer;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":687,"value":"### 2- Bar Chart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":726,"value":"Ce graphique affiche la valeur de chaque variable pour chaque année via des info-bulles interactives.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":691,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":699,"value":"{\n const existingChart = document.querySelector(\".bar-chart-container\");\n if (existingChart) {\n existingChart.remove();\n }\n \n const chartContainer = document.createElement(\"div\");\n chartContainer.className = \"bar-chart-container\";\n \n const chart = BarChartForVariables(selectedCity, waterData, popData, tempData);\n console.log(\"Graphique retourné :\", chart);\n \n if (chart) {\n chartContainer.appendChild(chart);\n } else {\n console.error(\"Aucun graphique n'a été généré.\");\n }\n \n return chartContainer;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":0,"value":"# Scatterplot","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":67,"value":"aggregatedTemp = Array.from(\n d3.rollup(\n tempData,\n v => d3.mean(v, d => d.Value),\n d => d.Area,\n d => d.Year\n ),\n \n ([area, yearMap]) =>\n Array.from(yearMap, ([year, avgTemp]) => ({\n Area: area,\n Year: +year,\n Avg_Temperature: avgTemp\n }))\n).flat();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"dataset = aggregatedTemp.map(tempRow => {\n const waterRow = waterDataRessource.find(\n w => w.Area === tempRow.Area && +w.Year === tempRow.Year\n );\n return waterRow\n ? {\n ...tempRow,\n Water_Resource: +waterRow.Value,\n Water_Unit: waterRow.Unit // <-- On conserve l'unité\n }\n : null;\n}).filter(d => d !== null);\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":60,"value":"console.log(\"Temp Data Sample:\", tempData.slice(0, 5));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":62,"value":"console.log(\"Filtered Water Data Sample (only 'resource'):\", waterDataRessource.slice(0, 5));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":64,"value":"console.log(\"Merged Dataset Sample:\", dataset.slice(0, 5));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"async function main() {\n const chartContainer = document.createElement(\"div\");\n chartContainer.className = \"scatterplot-container\";\n const chart = await ScatterplotForTempVsWater(selectedCity);\n if (chart) chartContainer.appendChild(chart);\n return chartContainer;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":15,"value":"main();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":79,"value":"# Prediction","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":104,"value":"popData.columns = popData.columns.map(col => col.trim());","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":834,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":735,"value":"viewof ChartMultF = MyWaterPredictionChart(selectedCity);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":812,"value":"### Notre Histoire :","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":814,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":829,"value":"prototypeProjetVis = FileAttachment(\"prototype-projet-vis.jpg\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 2e:"$2d:body"