2f:T10d5, chart = { // dimensions const width = 750; const height = 400; const marginTop = 30; const marginRight = 40; const marginBottom = 30; const marginLeft = 40; // Axe X const x = d3.scaleBand() .domain(data_annuelle.map(d => d.AAAAMM)) .range([marginLeft, width - marginRight]) .padding(0.1); // Axe Y de gauche (précipitations) const y = d3.scaleLinear() .domain([0, d3.max(data_annuelle, (d) => d.RR)]) .range([height - marginBottom, marginTop]); // Axe Y de droite (température) const y2 = d3.scaleLinear() .domain([0, d3.max(data_annuelle, (d) => d.TM)]) .range([height - marginBottom, marginTop]); // Créer le conteneur SVG. const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .style("background-color", "#293845"); // Fond de couleur #293845 // Ajouter les barres. svg.append("g") .attr("fill", "url(#gradient)") .selectAll() .data(data_annuelle) .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()); // Ajouter la courbe. const line = d3.line() .x(d => x(d.AAAAMM) + x.bandwidth() / 2) // Positionner la ligne au milieu de chaque bande .y(d => y2(d.TM)); svg.append("path") .datum(data_annuelle) .attr("fill", "none") .attr("stroke", "#e89999") // Couleur de la ligne .attr("stroke-width", 2) // Épaisseur de la ligne .attr("stroke-dasharray", "3.3") .attr("d", line); svg.append(() => htl.svg` `); // Ajouter l'axe des X avec les mois. svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(d3.axisBottom(x) .tickFormat(d => { // Convertir la valeur AAAAMM en nom de mois const year = Math.floor(d / 100); const month = d % 100; const date = new Date(year, month - 1); return d3.timeFormat("%b")(date); // Utiliser D3 pour formater le nom du mois }) .tickSizeOuter(0)) .selectAll("text") .attr("fill", "white") // Texte en blanc .selectAll(".tick line") // Sélectionner les lignes des graduations .attr("stroke", "white"); // Changer leur couleur en blanc // Ajouter l'axe des Y pour les barres à gauche. svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(y).tickFormat((y) => (y).toFixed())) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick") // Classe pour les graduations .attr("class", "y-tick")) .call(g => g.append("text") .attr("x", -20) .attr("y", 10) .attr("fill", "white") .attr("text-anchor", "start") .text("Précipitations (mm)")) .selectAll("text") .attr("fill", "#C3E4F0"); // Texte en blanc // Ajouter l'axe des Y pour la courbe à droite. svg.append("g") .attr("transform", `translate(${width - marginRight},0)`) .call(d3.axisRight(y2).tickFormat((y) => (y).toFixed())) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick") // Classe pour les graduations .attr("class", "y2-tick")) // .call(g => g.append("text") .attr("fill", "#fcac92") .attr("x", -100) // Ajuster la position x pour être à l'intérieur de la zone de dessin .attr("y", 10) .attr("text-anchor", "start") .text("Températures moyennes (°C)")) .selectAll("text") .attr("fill", "#fcac92") svg.selectAll(".y2-tick line") // graduations de l'axe des Y de droite .attr("stroke", "#fcac92"); svg.selectAll(".y-tick line") // graduations de l'axe des Y de gauche .attr("stroke", "white"); // Sélectionner les lignes des graduations de l'axe des X et les mettre en blanc svg.selectAll(".tick line") .attr("stroke", "white"); return svg.node(); } 30:T806,Plot.plot({ width: 750, height: 400, style: { backgroundColor: '#293845', color: '#ffffff', // margin: 'auto', // Centrer le plot horizontalement }, y: {grid: true, label: "Température (°C)"}, x: { grid: false, label: "Années", tickFormat: d3.format("d"), // Formatage des années pour éviter l'affichage en float domain: [d3.min(data_meteo, d => d.ANNEE), d3.max(data_meteo, d => d.ANNEE) + 5], // marge à droite }, marks: [ () => htl.svg` `, /// Limites de X Plot.ruleY([5,25]), /// Remplissage dégradé Plot.area(data_meteo, {x1: "ANNEE", y1: "TX", x2: "ANNEE", y2: "TN", fill: "url(#gradient2)", fillOpacity: 0.5}), /// Tracer les 3 courbes Plot.lineY(data_meteo, {x: "ANNEE", y: "TM", stroke: "#FFFFFF", strokeWidth: 2.5}), Plot.lineY(data_meteo, {x: "ANNEE", y: "TX", stroke: "#ED977A", strokeDasharray: "3.3"}), Plot.lineY(data_meteo, {x: "ANNEE", y: "TN", stroke: "#82BAD8", strokeDasharray: "3.3"}), /// Etiquette au survol Plot.tip(data_meteo, Plot.pointerX({ x: "ANNEE", y: "TM", fill: "#293845", title: (d) => `Année: ${d.ANNEE}\nT° moyenne: ${d.TM.toFixed(2)}°C \nT° Min: ${d.TN.toFixed(2)}°C \nT° Max: ${d.TX.toFixed(2)}°C` })), /// Etiquette des courbes Plot.text(data_meteo, Plot.selectFirst({x: "ANNEE", y: "TM", text: ["Température\nmoyenne"], fill: "#FFFFFF", fillOpacity: 1, fontSize: 12, dx: 675, dy: -35})), Plot.text(data_meteo, Plot.selectFirst({x: "ANNEE", y: "TX", text: ["Moyenne des \n maximales"], fill: "#ED977A", fillOpacity: 1, dx: 675, dy: -50})), Plot.text(data_meteo, Plot.selectFirst({x: "ANNEE", y: "TN", text: ["Moyenne des\n minimales"], fill: "#82BAD8" , fillOpacity: 1, dx: 675, dy: -20})) ], }); 31:[] 2d:{"title":"Nîmes, météo et changement climatique","cells":[{"id":0,"value":"# Nîmes, météo et changement climatique","pinned":false,"hidden":false,"mode":"md"},{"id":490,"value":"Située dans le département du Gard, dans le Sud de la France, Nimes est une ville connue pour son riche patrimoine historique. A mi-chemin entre la Méditerranée et les Cévennes, elle est exposée à un climat méditerranéen. Ce climat est caractérisé par des hivers doux et des étés chauds, ainsi qu'un ensoleillement important.","pinned":false,"hidden":false,"mode":"md"},{"id":570,"value":"## 1. Météo annuelle","pinned":false,"hidden":false,"mode":"md"},{"id":233,"value":"viewof choix_annee = Inputs.select(annees, {value: \"2019\", label: \"Choisir une année\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":268,"value":"### 1.1 Diagramme ombro-thermique","pinned":false,"hidden":false,"mode":"md"},{"id":51,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":183,"value":"Le diagramme ombro thermique est typique des régions méditerranéennes : la température est supérieure à la quantité de précipitations pendant le printemps et l'été.","pinned":false,"hidden":false,"mode":"md"},{"id":554,"value":"### 1.2. Carte de chaleur annuelle","pinned":false,"hidden":false,"mode":"md"},{"id":510,"value":"Plot.plot({\n width: 750,\n height: 400,\n style: {\n backgroundColor: '#293845',\n color: '#ffffff'\n },\n padding: 0,\n color: { scheme: \"BuRd\", type: \"linear\", legend: true, label : \"Température maximale (°C)\" },\n y: { tickFormat: Plot.formatMonth(\"en\", \"short\") },\n\n marks: [\n Plot.cell(data_jour_1an, {\n x: (d) => d.date.getUTCDate(),\n y: (d) => d.date.getUTCMonth(),\n fill: \"TM\",\n inset: 0, // supprimer les espaces entre les cellules\n stroke: 'none' // pas de bordure\n }),\n Plot.tip(data_jour_1an, Plot.pointerX({\n x: (d) => d.date.getUTCDate(),\n y: (d) => d.date.getUTCMonth(),\n fontWeight: \"bold\",\n textAlign: \"center\",\n fill: \"#293845\",\n title: (d) => `T°C max : ${d.TM}°C`\n }))\n ]\n});\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":557,"value":"Ce graphique présente la température maximale pour chaque jour de l'année choisie.","pinned":false,"hidden":false,"mode":"md"},{"id":481,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":270,"value":"## 2. Evolution des températures moyennes depuis 1964","pinned":false,"hidden":false,"mode":"md"},{"id":478,"value":"### 2.1 Courbe de l'évolution des températures moyennes annuelles","pinned":false,"hidden":false,"mode":"md"},{"id":167,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":485,"value":"Sans grande surprise, on peut observer une hausse de la température moyenne depuis 1964 : plus de 1°C pour la température moyenne.","pinned":false,"hidden":false,"mode":"md"},{"id":366,"value":"### 2.2 Visualisation de l'anomalie de température annuelle","pinned":false,"hidden":false,"mode":"md"},{"id":370,"value":"L'anomalie correspond à la différence entre la température moyenne de l'année et la température moyenne calculée sur la période 1991 - 2020 (la normale).","pinned":false,"hidden":false,"mode":"md"},{"id":341,"value":"Plot.plot({\n\n height: 150, // Définir la hauteur souhaitée du graphique\n width: 750, // Définir la largeur souhaitée du graphique\n x: {round: true},\n color: {scheme: \"BuRd\"},\n marks: [\n Plot.barX(anomalie, {\n x: \"year\",\n fill: \"anomalie\",\n interval: \"year\", // données annuelles\n inset: 0 // pas de lacunes\n },),\n Plot.tip(anomalie, Plot.pointerX({\n x: \"year\",\n fontWeight: \"bold\",\n textAlign: \"center\",\n title: (d) => `${d.anneetxt}\\nAnomalie: ${d.anomalie.toFixed(2)}°C`\n })) \n ],\n\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":472,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":191,"value":"### Données utilisées","pinned":false,"hidden":false,"mode":"md"},{"id":599,"value":"map = {\n const container = yield htl.html`

`;\n const map = L.map(container).setView([data_jour[0].LAT, data_jour[0].LON], 9);\n L.tileLayer(\"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\", {\n attribution: \"© OpenStreetMap contributors\"\n }).addTo(map);\n L.marker([data_jour[0].LAT, data_jour[0].LON]).addTo(map)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":625,"value":"Les données météo proviennent de la station de NIMES-GARONS (30258001)","pinned":false,"hidden":false,"mode":"md"},{"id":452,"value":"##### Données annuelles","pinned":false,"hidden":false,"mode":"md"},{"id":253,"value":"➡️ Données annuelles moyennées de 1964 à 2023 :","pinned":false,"hidden":false,"mode":"md"},{"id":165,"value":"data_meteo = await d3.dsv(\";\", \"https://raw.githubusercontent.com/claireduj/data/main/moy_annuelles_nimes.csv\", d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":420,"value":"➡️ Calcul de l'anomalie annuelle de 1964 à 2023 :","pinned":false,"hidden":false,"mode":"md"},{"id":302,"value":"anomalie = data_meteo.map(d => {\n return {\n year: new Date(Date.UTC(d.ANNEE, 0, 1)), /// Convertir l'année au format DATE pour pouvoir l'afficher dans le plot\n TM: d.TM, \n anomalie: (d.TM - 15.3), // Différence entre la moyenne annuelle et la moyenne calculée sur la période 1991−2020\n anneetxt : d.ANNEE.toString()\n };\n}); \n","pinned":false,"hidden":false,"mode":"ojs"},{"id":257,"value":"➡️ Création de la liste des années disponibles (pour la liste déroulante) :","pinned":false,"hidden":false,"mode":"md"},{"id":231,"value":"annees = data_meteo.map(d => d.ANNEE.toString());","pinned":false,"hidden":false,"mode":"ojs"},{"id":460,"value":"##### Données mensuelles","pinned":false,"hidden":false,"mode":"md"},{"id":255,"value":"➡️ Données mensuelles de 1964 à 2023 :","pinned":false,"hidden":false,"mode":"md"},{"id":4,"value":"data_mois = await d3.csv(\"https://raw.githubusercontent.com/claireduj/data/main/nimes_garons_1964_2024.csv\", d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":259,"value":"➡️ Données mensuelles pour l'année choisie (par défaut, 2019) :","pinned":false,"hidden":false,"mode":"md"},{"id":6,"value":"data_annuelle = data_mois.filter(data_mois => {\n return data_mois && typeof data_mois.AAAAMM === 'number' && Math.floor(data_mois.AAAAMM / 100) === parseFloat(choix_annee);\n});\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":492,"value":"##### Données journalières","pinned":false,"hidden":false,"mode":"md"},{"id":499,"value":"➡️ Données journalières de 1964 à 2023 :","pinned":false,"hidden":false,"mode":"md"},{"id":495,"value":"data_jour = await d3.csv(\"https://raw.githubusercontent.com/claireduj/data/main/nimes_garons_donnees_jour.csv\", d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":507,"value":"➡️ Données journalières filtrées sur l'année choisie (par défaut, 2019):","pinned":false,"hidden":false,"mode":"md"},{"id":515,"value":"function convertDate(data) {\n const dateString = data.toString(); // Convertir AAAAMMJJ en chaîne de caractères\n const year = dateString.substring(0, 4); // Extraire l'année\n const month = dateString.substring(4, 6); // Extraire le mois\n const day = dateString.substring(6, 8); // Extraire le jour\n return new Date(`${year}-${month}-${day}`); // Créer un objet Date avec le format YYYY-MM-DD\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":502,"value":"// Filtrer les données pour l'année 2016 et convertir la date\ndata_jour_1an = data_jour.filter(data_jour => {\n return data_jour && typeof data_jour.AAAAMMJJ === 'number' && Math.floor(data_jour.AAAAMMJJ / 10000) === parseFloat(choix_annee);\n}).map(data_jour => {\n return {\n ...data_jour,\n // Ajouter la date convertie au format AAAA-MM-JJ\n date: convertDate(data_jour.AAAAMMJJ)\n };\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":470,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":292,"value":"## Source des données","pinned":false,"hidden":false,"mode":"md"},{"id":585,"value":" Open Data Météo France","pinned":false,"hidden":false,"mode":"html"}],"files":"$W31","stdlib":"1","titling":"auto"}