2f:Ted2,chart = { // Dimensions du graphique const width = 750; const height = 400; const marginTop = 50; // Augmenté pour donner de l'espace au titre const marginRight = 50; // Ajusté pour l'axe des températures const marginBottom = 50; // Augmenté pour l'espace du titre de l'axe X const marginLeft = 60; // Ajusté pour le titre de l'axe des précipitations // Axe X pour les mois const x = d3.scaleBand() .domain(Data.map(d => d.AAAAMM)) .range([marginLeft, width - marginRight]) .padding(0.1); // Axe Y de gauche pour les précipitations const y = d3.scaleLinear() .domain([0, d3.max(Data, d => d.RR)]) .range([height - marginBottom, marginTop]); // Axe Y de droite pour les températures const y2 = d3.scaleLinear() .domain([d3.min(Data, d => d.TM), d3.max(Data, d => d.TM)]) .range([height - marginBottom, marginTop]); // Création du conteneur SVG avec un fond gris const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .style("background-color", "white"); // Fond gris // Ajout des barres pour les précipitations en bleu foncé svg.append("g") .attr("fill", "darkblue") .selectAll("rect") .data(Data) .join("rect") .attr("x", d => x(d.AAAAMM)) .attr("y", d => y(d.RR)) .attr("height", d => y(0) - y(d.RR)) .attr("width", x.bandwidth()); // Ajout de la courbe pour les températures en rouge foncé const line = d3.line() .x(d => x(d.AAAAMM) + x.bandwidth() / 2) .y(d => y2(d.TM)); svg.append("path") .datum(Data) .attr("fill", "none") .attr("stroke", "darkred") .attr("stroke-width", 3) .attr("d", line); // Ajout de l'axe X avec les noms des mois svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(d3.axisBottom(x) .tickFormat(d => { const date = d3.timeParse("%Y%m")(d); return d3.timeFormat("%b")(date); }) .tickSizeOuter(0)) .selectAll("text") .attr("fill", "Black"); // Ajout et coloration de l'axe Y de gauche pour les précipitations const yAxisLeft = svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(y).tickFormat(d => `${d} mm`)); yAxisLeft.selectAll("text") .attr("fill", "darkblue"); yAxisLeft.selectAll("line") .attr("stroke", "darkblue"); yAxisLeft.select(".domain") .attr("stroke", "darkblue"); yAxisLeft.append("text") .attr("transform", "rotate(-90)") .attr("y", 0 - marginLeft) .attr("x", 0 - (height / 2)) .attr("dy", "1em") .attr("fill", "darkblue") .style("text-anchor", "middle") .text("Précipitation (mm)"); // Ajout et coloration de l'axe Y de droite pour les températures const yAxisRight = svg.append("g") .attr("transform", `translate(${width - marginRight},0)`) .call(d3.axisRight(y2).tickFormat(d => `${d}°C`)); yAxisRight.selectAll("text") .attr("fill", "darkred"); yAxisRight.selectAll("line") .attr("stroke", "darkred"); yAxisRight.select(".domain") .attr("stroke", "darkred"); yAxisRight.append("text") .attr("transform", "rotate(-90)") .attr("y", 85 - marginRight) .attr("x", 0 - (height / 2)) .attr("dy", "1em") .attr("fill", "darkred") .style("text-anchor", "middle") .text("Température (°C)"); // Titre de l'axe X pour la date svg.append("text") .attr("transform", `translate(${width / 2}, ${height - 5})`) .attr("fill", "Black") .style("text-anchor", "middle") .text("Mois de l'année"); return svg.node(); } 30:Tfd0,map = { // Création du

conteneur de la carte let container = DOM.element('div', { style: `width:800px;height:600px` }); // Ajustez les dimensions si nécessaire // Rendu du conteneur pour qu'il se dimensionne avant que Leaflet ne dessine la carte yield container; // Création de la carte Leaflet centrée sur une latitude et longitude approximatives du département 66 let map = L.map(container).setView([42.688659, 2.894833], 8); // Centre sur le département 66 // Ajout d'une couche de fond OSM L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19, attribution: '© OpenStreetMap contributors' }).addTo(map); // Ajout des cercles pour chaque station dans filteredData filteredData.forEach(d => { const circleColor = getColor(d.TM); // Obtient la couleur en fonction de la température const circleRadius = getRadius(d.RR,8); // Utilise getRadius pour déterminer la taille du cercle L.circle([d.LAT, d.LON], { color: circleColor, fillColor: circleColor, fillOpacity: 0.5, radius: circleRadius }).addTo(map) .bindPopup(`Station: ${d.NOM_USUEL}
Précipitations: ${d.RR} mm
Température moyenne: ${d.TM} °C`); }); // Initialisation de la légende var legend = L.control({position: 'bottomright'}); legend.onAdd = function(map) { var div = L.DomUtil.create('div', 'info legend'); div.setAttribute('id', 'legend'); // Initialisation du contenu de la légende avec le niveau de zoom actuel updateLegendContent(map.getZoom(), div); return div; }; legend.addTo(map); // Fonction pour mettre à jour le contenu de la légende en fonction du zoom function updateLegendContent(zoomLevel, div) { // Assurez-vous que div est bien le conteneur de la légende if (!div) return; // Ici, ajustez le contenu de la légende en fonction du zoomLevel div.innerHTML = 'Niveau de Zoom: ' + zoomLevel + '
'; // Vous pouvez ajouter ici la logique pour recalculer et afficher les tailles des cercles et les intervalles de température // Exemple de mise à jour des intervalles de température basés sur min et max const numGrades = 5; const gradeStep = (tempMax - tempMin) / numGrades; const grades = Array.from({length: numGrades}, (_, i) => tempMin + i * gradeStep); div.innerHTML += 'Température (°C)
'; grades.forEach((grade, index) => { div.innerHTML += ' ' + grade.toFixed(1) + (grades[index + 1] ? '–' + grades[index + 1].toFixed(1) : '+') + '
'; }); // Mise à jour dynamique pour les tailles des cercles (précipitations) // Section pour les précipitations div.innerHTML += 'Précipitations (mm)
'; const examplePrecipitations = [precipMin, (precipMin + precipMax) / 2, precipMax]; // Utilisez les valeurs min, moyenne, et max comme exemples const legendScaleFactor = 0.002; // Ajustez ce facteur selon les besoins pour équilibrer la taille des cercles dans la légende examplePrecipitations.forEach(precip => { // Appliquez le facteur d'échelle au rayon pour l'affichage dans la légende var radius = getRadius(precip, zoomLevel) * legendScaleFactor; var svgSize = radius * 2 + 10; // Ajustez en conséquence pour accommoder le cercle réduit div.innerHTML += ' ' + precip + ' mm
'; }); } // Mise à jour de la légende lorsque le niveau de zoom change map.on('zoomend', function() { updateLegendContent(map.getZoom(), document.getElementById('legend')); }); return map; } 31:T451,function getColor(temperature) { // Définit les couleurs de début et de fin const startColor = '#4575b4'; // Bleu pour la température basse const endColor = '#d73027'; // Rouge pour la température haute // Calcule le ratio de la position de la température actuelle entre min et max const ratio = (temperature - tempMin) / (tempMax - tempMin); // Convertit les couleurs hexadécimales en RGB function hexToRgb(hex) { var bigint = parseInt(hex.slice(1), 16); var r = (bigint >> 16) & 255; var g = (bigint >> 8) & 255; var b = bigint & 255; return [r, g, b]; } // Interpolation linéaire entre les couleurs de début et de fin function interpolateColor(color1, color2, ratio) { var r = Math.ceil(color1[0] * (1 - ratio) + color2[0] * ratio); var g = Math.ceil(color1[1] * (1 - ratio) + color2[1] * ratio); var b = Math.ceil(color1[2] * (1 - ratio) + color2[2] * ratio); return `rgb(${r}, ${g}, ${b})`; } return interpolateColor(hexToRgb(startColor), hexToRgb(endColor), ratio); }32:[{"id":"9455a0be2e8800be2f74f34fdde936eb6d4a858cf27deb1e5b52fb7727181190ae95165919d9194a20a3e3ab90b09bcc593d6735b4c40add7c97e58ecf538ba3","href":"https://static.observableusercontent.com/files/9455a0be2e8800be2f74f34fdde936eb6d4a858cf27deb1e5b52fb7727181190ae95165919d9194a20a3e3ab90b09bcc593d6735b4c40add7c97e58ecf538ba3","name":"MENSQ_66_previous-1950-2022@1.csv","type":"text/csv","lastModified":1708096402656.975,"size":12666602},{"id":"cbedb0b3b45b3f89f7fbb3c2fbf1db30a9a7cd05ec38ffd3ff6ba266a54e6fce3aa5365a39917b4e7cb62d827427ce8ae9f7218debe52db6a818eefdc37051d9","href":"https://static.observableusercontent.com/files/cbedb0b3b45b3f89f7fbb3c2fbf1db30a9a7cd05ec38ffd3ff6ba266a54e6fce3aa5365a39917b4e7cb62d827427ce8ae9f7218debe52db6a818eefdc37051d9","name":"MENSQ_66_previous-1950-2022@2.csv","type":"text/csv","lastModified":1708098316619.903,"size":12921651}] 2d:{"title":"Dataviz (Projet UE 902-2)","cells":[{"id":0,"value":"# Dataviz (Projet UE 902-2)","pinned":false,"hidden":false,"mode":"md"},{"id":458,"value":"Groupe : Jérémy Leinen et Matthieu Clouet","pinned":false,"hidden":false,"mode":"md"},{"id":355,"value":"## Thématique : Visualisation des données météorologiques du département des Pyrénées-Orientales","pinned":false,"hidden":false,"mode":"md"},{"id":446,"value":"### Chargement des données : ","pinned":false,"hidden":false,"mode":"md"},{"id":8,"value":"DT = d3.dsv(\";\", await FileAttachment(\"MENSQ_66_previous-1950-2022@2.csv\").url(), d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":320,"value":"### Cumul mensuel de la hauteur de neige tombée en 24h des stations","pinned":false,"hidden":false,"mode":"md"},{"id":143,"value":"viewof Checkbox = Inputs.checkbox(Stationunique, {\n value: [\"Les Angles\", \"FORMIGUERE\",\"PORTE PUYMORENS\"], // Les valeurs pré-cochées\n label: \"Sélectionnez la station météo\"\n});\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":182,"value":"viewof LAnnee = Inputs.range([1950, 2022], {value: \"2000\", label: \"Choix de l'année\", step: 1 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"Plot.plot({\n x: {\n label: \"Mois\",\n },\n y: {\n label: \"Cumul mensuel de la hauteur de neige tombée en 24H (m)\"\n },\n color: {\n legend: true\n },\n marks: [\n Plot.line(dataForPlot.filter(d => Checkbox.includes(d.NOM_USUEL)), {\n x: \"AAAAMMFormatted\",\n y: \" HNEIGEFTOT\",\n stroke: \"NOM_USUEL\",\n title: d => `${d.NOM_USUEL}: ${d.ALTI} m ` // Exemple de contenu de tooltip\n })\n ],\n width: 800,\n height: 400,\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"### Analyse de la température et précipitation ","pinned":false,"hidden":false,"mode":"md"},{"id":86,"value":"viewof Annee = Inputs.range([1950, 2022], { value: 2000 ,label: \"Choix de l'année\", step: 1 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":319,"value":"### Diagramme ombro-thermique de la station :","pinned":false,"hidden":false,"mode":"md"},{"id":31,"value":"viewof Station = Inputs.select(uniqueStations, {value: \"AMELIE-LES-BAINS\"\n, label: \"Choix de la station météo\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":176,"value":"### Cartographie de la précipitation et de la température dans les Pyrénées-Orientales :","pinned":false,"hidden":false,"mode":"md"},{"id":178,"value":"viewof moismot = Inputs.select(\n moisListe,\n {value: \"Janvier\"\n,label: \"Choix du mois\"} // Ajoutez une étiquette au menu déroulant si vous le souhaitez\n);","pinned":false,"hidden":false,"mode":"ojs"},{"id":210,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":350,"value":"### Sources des données :","pinned":false,"hidden":false,"mode":"md"},{"id":352,"value":"données météos : https://meteo.data.gouv.fr/","pinned":false,"hidden":false,"mode":"md"},{"id":362,"value":"Map de fond : https://openstreetmap.org","pinned":false,"hidden":false,"mode":"md"},{"id":333,"value":"### Constantes et fonctions utilisées pour la création des graphiques : ","pinned":false,"hidden":false,"mode":"md"},{"id":303,"value":"import {Plot} from \"@mkfreeman/plot-tooltip\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":365,"value":"dataForPlot = datafiltre.map(d => ({\n ...d,\n AAAAMMFormatted: d.AAAAMM.toString().slice(-2) // Ajoute les deux derniers chiffres comme une nouvelle propriété\n}));","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"datafiltre = DT.filter(d => Checkbox.includes(d.NOM_USUEL)&& d.AAAAMM.toString().startsWith(LAnnee));","pinned":false,"hidden":false,"mode":"ojs"},{"id":135,"value":"Stationunique = [...new Set(a)]; // Enlever les doublons","pinned":false,"hidden":false,"mode":"ojs"},{"id":122,"value":"a = DT.filter( d=> d.AAAAMM.toString().startsWith(LAnnee) && d[\" HNEIGEFTOT\"]>1 ) // filtrer les éléments où ALTI > f\n .map(d => d[\"NOM_USUEL\"]); // extraire \"NOM_USUEL\" des éléments filtrés\n\n\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"Data = DT.filter(d => d.NOM_USUEL === Station && d.AAAAMM.toString().startsWith(Annee));\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"uniqueStations = Array.from(new Set(DT.map(d => d.NOM_USUEL)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":292,"value":"moisListe = [\n \"Janvier\", \"Février\", \"Mars\", \"Avril\", \n \"Mai\", \"Juin\", \"Juillet\", \"Août\", \n \"Septembre\", \"Octobre\", \"Novembre\", \"Décembre\"\n];","pinned":false,"hidden":false,"mode":"ojs"},{"id":298,"value":"mois = moisListe.indexOf(moismot) + 1;","pinned":false,"hidden":false,"mode":"ojs"},{"id":192,"value":"formattedMonth = mois < 10 ? `0${mois}` : `${mois}`;","pinned":false,"hidden":false,"mode":"ojs"},{"id":195,"value":"targetPeriodString = `${Annee}${formattedMonth}`;","pinned":false,"hidden":false,"mode":"ojs"},{"id":207,"value":"targetPeriod = parseInt(targetPeriodString, 10);","pinned":false,"hidden":false,"mode":"ojs"},{"id":198,"value":"filteredData = DT.filter(d => d.AAAAMM === targetPeriod);","pinned":false,"hidden":false,"mode":"ojs"},{"id":216,"value":"tempMin = Math.min(...filteredData.map(d => d.TM));","pinned":false,"hidden":false,"mode":"ojs"},{"id":218,"value":"tempMax = Math.max(...filteredData.map(d => d.TM));","pinned":false,"hidden":false,"mode":"ojs"},{"id":220,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":239,"value":"precipMin = Math.min(...filteredData.map(d => d.RR));","pinned":false,"hidden":false,"mode":"ojs"},{"id":241,"value":"precipMax = Math.max(...filteredData.map(d => d.RR));","pinned":false,"hidden":false,"mode":"ojs"},{"id":244,"value":"function getRadius(precipitation, zoomLevel) {\n const zoomAdjustmentFactor = Math.pow(2, zoomLevel - 8); // Exemple d'ajustement basé sur le zoom\n const minRadius = 500; // Rayon minimal pour les cercles, en pixels\n const maxRadius = 5000; // Rayon maximal pour les cercles, en pixels\n const ratio = (precipitation - precipMin) / (precipMax - precipMin);\n return (minRadius + (maxRadius - minRadius) * ratio) * zoomAdjustmentFactor; // Ajuste le rayon basé sur le zoom\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":252,"value":"// Exemples de valeurs de précipitations pour illustrer les tailles de cercles dans la légende\nexamplePrecipitations = [precipMin, (precipMin + precipMax) / 2, precipMax];\n","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}