2e:null 2f:["$","title",null,{"children":"Copie de Projet QualitySeine | Neirouz | Observable"}] 34:T5d2,

Copie de Projet QualitySeine

Étude des mesures chimiques et biologiques de l'eau de la Seine (2014-2024)

En prévision des épreuves des Jeux Olympiques de Paris 2024, la mairie de Paris s'était engagée à nettoyer la Seine pour permettre la baignade. Ce projet vise à analyser la qualité de l’eau sur les dix dernières années (2014-2024), en évaluant son évolution d’un point de vue chimique et biologique.

La Seine est-elle réellement plus propre aujourd’hui ? Ce « nettoyage » concerne-t-il toute la Seine ou seulement la portion parisienne ?

Autrices : Neirouz BOUCHAIRA et Margaux Demeillers

Source : Base de données Naiades (Eau de France)

35:T8f0,grid = html`

Analyse de la qualité de l'eau de la Seine entre 2014 et 2024

`36:T3380,function map_interactive_merged (d3, proj4, france, stations, width, height, selectedDate, zoom1, selectMode = false, uniques) { if (!france || !france.features) { console.error("Données France invalides ou mal chargées"); return; } const mapWidth = width; const mapHeight = height; let data = stations.filter(d => d.LbLongParamètre === "Température de l'Eau").filter(d => d.RsAna <= 50); const RsAnacolors = data .filter(d => d.RsAna !== null && d.RsAna !== undefined) .map(d => parseFloat(d.RsAna)); const colorScale = d3.scaleSequential(d3.interpolateInferno) .domain(d3.extent(RsAnacolors.length ? RsAnacolors : [0, 1])); let filteredStations = data.filter(d => d.DatePrel === selectedDate); // Définition de la projection const lambert93 = "+proj=lcc +lat_1=49 +lat_2=44 +lat_0=46.5 +lon_0=3 +x_0=700000 +y_0=6600000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs"; const projection = d3.geoMercator() .center([2.5, 48.6]) .scale(zoom1) .translate([width / 2, height / 2]); const path = d3.geoPath().projection(projection); // Création du conteneur SVG const svgContainer = d3.create("div").style("position", "relative"); const svgElement = svgContainer.append("svg") .attr("viewBox", [0, 0, width, height]) .style("width", "100%") .style("height", "auto") .style("background-color", "white"); const style = svgElement.append("style").text(` .no-select { pointer-events: none; user-select: none; } `); // Pour ne pas que le texte soit sélectionné // Tooltip à l'intérieur du conteneur const tooltip = svgContainer.append("div") .attr("class", "tooltip") .style("position", "absolute") .style("border", "1px solid black") .style("border-radius", "5px") .style("padding", "5px") .style("font-size", "10px") .style("display", "none") .style("pointer-events", "none") .style("background", "rgba(0, 0, 0, 0.8)") .style("z-index", "1500") .style("color", "#fff"); let selectedStationsIds = new Set(); // Garder la sélection quand la date change let lockedTooltip = false; // Initialiser selectedStationsIds avec la station "LA SEINE A POSES 2" si elle existe const defaultStation = data.find(d => d.LbStationMesureEauxSurface === "LA SEINE A POSES 2"); if (defaultStation) { selectedStationsIds.add(defaultStation.LbStationMesureEauxSurface); } const mapGroup = svgElement.append('g').attr("class", "topg"); const title = svgElement.append("text") .attr("x", mapWidth / 2) .attr("y", 30) .attr("text-anchor", "middle") .style("font-size", "14px") .style("font-weight", "bold") .attr("class", "special no-select") .text("Carte des stations de mesure de la qualité de l'eau de la Seine"); // Dessin du fond de carte mapGroup.selectAll('path') .data(france.features) .enter().append('path') .attr('d', path) .style('fill', '#ccc') .style('stroke', 'white'); let stationsWithCoords = data.map(d => { const [lon, lat] = proj4(lambert93, "WGS84", [d.CoordXStationMesureEauxSurface, d.CoordYStationMesureEauxSurface]); const projected = projection([lon, lat]); const stationData = filteredStations.find(s => s.LbStationMesureEauxSurface === d.LbStationMesureEauxSurface); const rsAnaForDate = stationData ? stationData.RsAna : null; return { ...d, x: projected[0], y: projected[1], RsAnaForDate: rsAnaForDate }; }); const specialPoints = [ { name: "Source-Seine", x: 826900, y: 6711200 }, { name: "Le Havre", x: 490389, y: 6935091 } ]; specialPoints.forEach(point => { const [lon, lat] = proj4(lambert93, "WGS84", [point.x, point.y]); const projected = projection([lon, lat]); point.x = projected[0]; point.y = projected[1]; }); let links = []; for (let i = 0; i < stationsWithCoords.length - 1; i++) { links.push({ from: stationsWithCoords[i], to: stationsWithCoords[i + 1] }); } const legendWidth = 15; const legendHeight = 100; const legendPadding = 10; const legendX = Math.min(mapWidth - legendWidth - legendPadding - 10, mapWidth * 0.995 - 10); const legendY = Math.min(mapHeight - legendHeight - legendPadding, mapHeight * 0.7); const legend = svgElement.append("g") .attr("transform", `translate(${legendX}, ${legendY})`) .style("font-size", `${mapWidth * 0.008}px`); const temperatureValues = stationsWithCoords.map(d => d.RsAna); mapGroup.selectAll("line") .data(links) .enter().append("line") .attr("x1", d => d.from.x) .attr("y1", d => d.from.y) .attr("x2", d => d.to.x) .attr("y2", d => d.to.y) .attr("stroke", d => (d.from.RsAnaForDate !== null ? colorScale(d.from.RsAnaForDate) : "#999")) .attr("stroke-width", 2); // Ajout des points de mesure const circles = mapGroup.selectAll("circle") .data(stationsWithCoords) .enter().append("circle") .attr("cx", d => d.x) .attr("cy", d => d.y) .attr("r", 4) .attr("fill", d => uniques.includes(d.LbStationMesureEauxSurface) ? "blue" : (d.RsAnaForDate !== null ? colorScale(d.RsAnaForDate) : "gray")) .attr("stroke", "black") .attr("stroke-width", 0.5) .on("mouseover", function (event, d) { updateSelectedStations(); d3.select(this).attr("r", 6); if (!lockedTooltip) { tooltip.style("display", "block") .html(`${d.LbStationMesureEauxSurface}
Température: ${d.RsAnaForDate !== null ? d.RsAnaForDate.toFixed(2) + " " + d.SymUniteMesure : "Pas de données"}
pH: ${d.RsAna_pH !== null ? d.RsAna_pH.toFixed(2) + " " : "Pas de données"}
Oxygène Dissous: ${d.RsAna_Ox !== null ? d.RsAna_Ox.toFixed(2) + " " + d.SymUniteMesure_Ox : "Pas de données"}
Carbone Organique: ${d.RsAna_C !== null ? d.RsAna_C.toFixed(2) + " " + d.SymUniteMesure_C : "Pas de données"}
Saturation Oxygène: ${d.RsAna_sat_O !== null ? d.RsAna_sat_O.toFixed(2) + " " + d.SymUniteMesure_sat_O : "Pas de données"}
Phosphates: ${d.RsAna_phosphate !== null ? d.RsAna_phosphate.toFixed(2) + " " + d.SymUniteMesure_phosphate : "Pas de données"}
Nitrites: ${d.RsAna_nitrite !== null ? d.RsAna_nitrite.toFixed(2) + " " + d.SymUniteMesure_nitrite : "Pas de données"}
Nitrates: ${d.RsAna_nitrate !== null ? d.RsAna_nitrate.toFixed(2) + " " + d.SymUniteMesure_nitrate : "Pas de données"}`); adjustTooltipPosition(tooltip, svgContainer.node().getBoundingClientRect(), event); } }) .on("mousemove", function (event) { if (!lockedTooltip) { adjustTooltipPosition(tooltip, svgContainer.node().getBoundingClientRect(), event); } }) .on("mouseout", function () { if (!lockedTooltip) { d3.select(this).attr("r", 4); tooltip.style("display", "none"); } }) .on("click", function (event, d) { event.stopPropagation(); lockedTooltip = true; tooltip.style("display", "block") .html(`${d.LbStationMesureEauxSurface}
Température: ${d.RsAnaForDate !== null ? d.RsAnaForDate.toFixed(2) + " " + d.SymUniteMesure : "Pas de données"}
pH: ${d.RsAna_pH !== null ? d.RsAna_pH.toFixed(2) + " " : "Pas de données"}
Oxygène Dissous: ${d.RsAna_Ox !== null ? d.RsAna_Ox.toFixed(2) + " " + d.SymUniteMesure_Ox : "Pas de données"}
Carbone Organique: ${d.RsAna_C !== null ? d.RsAna_C.toFixed(2) + " " + d.SymUniteMesure_C : "Pas de données"}
Saturation Oxygène: ${d.RsAna_sat_O !== null ? d.RsAna_sat_O.toFixed(2) + " " + d.SymUniteMesure_sat_O : "Pas de données"}
Phosphates: ${d.RsAna_phosphate !== null ? d.RsAna_phosphate.toFixed(2) + " " + d.SymUniteMesure_phosphate : "Pas de données"}
Nitrites: ${d.RsAna_nitrite !== null ? d.RsAna_nitrite.toFixed(2) + " " + d.SymUniteMesure_nitrite : "Pas de données"}
Nitrates: ${d.RsAna_nitrate !== null ? d.RsAna_nitrate.toFixed(2) + " " + d.SymUniteMesure_nitrate : "Pas de données"}`) .style("left", (event.pageX + 10) + "px") .style("top", (event.pageY - 10) + "px"); // Toggle selection if (selectedStationsIds.has(d.LbStationMesureEauxSurface)) { selectedStationsIds.delete(d.LbStationMesureEauxSurface); updateSelectedStations(); } else { selectedStationsIds.add(d.LbStationMesureEauxSurface); updateSelectedStations(); } updateSelectedStations(); }); d3.select("body").on("click", function (event) { if (!event.target.closest(".tooltip")) { lockedTooltip = false; tooltip.style("display", "none"); } }); mapGroup.selectAll("circle.special") .data(specialPoints) .enter().append("circle") .attr("class", "special") .attr("cx", d => d.x) .attr("cy", d => d.y) .attr("r", 6) .attr("fill", "black") .attr("stroke", "black") .attr("stroke-width", 1); // Ajout des étiquettes pour les points spéciaux mapGroup.selectAll("text.special-label") .data(specialPoints) .enter().append("text") .attr("class", "special no-select") .attr("x", d => d.x + 10) .attr("y", d => d.y + 10) .attr("fill", "black") .attr("font-size", "8px") .attr("font-weight", "bold") .text(d => d.name); const legendScale = d3.scaleLinear() .domain(colorScale.domain()) .range([100, 0]); const legendAxis = d3.axisRight(legendScale).ticks(5); const gradient = svgElement.append("defs") .append("linearGradient") .attr("id", "legendGradient") .attr("x1", "0%").attr("y1", "0%") .attr("x2", "0%").attr("y2", "100%"); gradient.selectAll("stop") .data(d3.range(0, 1.1, 0.1)) .enter().append("stop") .attr("offset", d => `${d * 100}%`) .attr("stop-color", d => colorScale(legendScale.invert(d * 100))); legend.append("rect") .attr("class", "special no-select") .attr("width", 15) .attr("height", 100) .style("fill", "url(#legendGradient)"); legend.append("g") .attr("transform", "translate(15,0)") .call(legendAxis); // Fonction pour mettre à jour l'affichage des stations sélectionnées function updateSelectedStations() { circles.each(function (d) { const isSelected = selectedStationsIds.has(d.LbStationMesureEauxSurface); d3.select(this) .attr("r", isSelected ? 6 : 4) .attr("fill", isSelected ? "blue" : (uniques.includes(d.LbStationMesureEauxSurface) ? "blue" : (d.RsAnaForDate !== null ? colorScale(d.RsAnaForDate) : "gray"))); }); // Mettre à jour la liste des stations sélectionnées updateSelectedList(); } function updateSelectedList() { d3.select("#selected-stations").remove(); let stationList = svgElement.append("g") .attr("id", "selected-stations") .attr("transform", "translate(" + (width - 475) + ", 70)"); stationList.append("text") .text("Stations sélectionnées :") .attr("font-size", "10px") .style("fill", "blue") .attr("font-weight", "bold"); let distinctStations = Array.from(selectedStationsIds) .map(id => stationsWithCoords.find(d => d.LbStationMesureEauxSurface === id)); stationList.selectAll("text.station") .data(distinctStations) .enter().append("text") .attr("class", "station") .attr("y", (d, i) => 20 + i * 15) .attr("font-size", "10px") .style("fill", "blue") .text(d => d.LbStationMesureEauxSurface); // Mettre à jour la liste uniques correctement mutable uniques = [...new Set(distinctStations.map(d => d.LbStationMesureEauxSurface))]; uniques.splice(0, uniques.length, ...new Set(distinctStations.map(d => d.LbStationMesureEauxSurface))); } function adjustTooltipPosition(tooltip, containerBounds, event) { const tooltipBounds = tooltip.node().getBoundingClientRect(); const tooltipWidth = tooltipBounds.width; const tooltipHeight = tooltipBounds.height; // Coordonnées de la souris par rapport au conteneur let left = event.offsetX; let top = event.offsetY; // Ajuster la position pour que la tooltip ne sorte pas de l'écran if (left + tooltipWidth > containerBounds.width) { left = containerBounds.width - tooltipWidth; } if (top + tooltipHeight > containerBounds.height) { top = containerBounds.height - tooltipHeight; } if (left < 0) { left = 0; } if (top < 0) { top = 0; } // Appliquer les nouvelles positions tooltip.style("left", left + "px"); tooltip.style("top", top + "px"); } // ******************** // AJOUT DU ZOOM // ******************** const zoomBehavior = d3.zoom() .scaleExtent([0.5, 10]) // Limites minimales et maximales du zoom .on("zoom", (event) => { mapGroup.attr("transform", event.transform); }); svgElement.call(zoomBehavior); // ******************** // Retourner à la fois le conteneur SVG et la liste des stations uniques return svgContainer.node(); } 37:T100a,

Signification et impact des paramètres étudiés sur la qualité de l'eau et la santé

Paramètre	Impact sur la qualité de l’eau	Impact sur la santé	Valeurs acceptables
Température de l’Eau	Influence la solubilité des gaz et l’activité biologique.	Une eau trop chaude peut favoriser le développement de bactéries pathogènes et perturber la digestion.	Eau potable : 10-15°C. Milieux aquatiques : < 25°C.
Potentiel en Hydrogène (pH)	Affecte l’équilibre chimique et biologique de l’eau, la solubilité des métaux lourds.	Un pH trop acide ou trop basique peut provoquer des irritations et des troubles digestifs.	Eau potable : 6,5 - 8,5. Milieux aquatiques : 6 - 9.
Oxygène dissous	Essentiel pour la vie aquatique ; sa diminution entraîne des zones mortes.	Pas d’impact direct sur la santé humaine.	Milieux aquatiques : > 5 mg/L.
Taux de saturation en oxygène	Indique la capacité de l’eau à absorber l’oxygène atmosphérique.	Un taux trop bas peut signifier une pollution organique ou chimique.	Milieux aquatiques : 80 - 120 %.
Nitrites (NO₂⁻)	Très toxiques pour les poissons et indicateurs d’une pollution organique récente.	Peuvent provoquer une méthémoglobinémie (altère hémoglobine).	Eau potable : < 0,1 mg/L (OMS), max 0,5 mg/L.
Nitrates (NO₃⁻)	En excès, ils favorisent l’eutrophisation des milieux aquatiques.	Sont suspectés d’avoir un lien avec certains cancers.	Eau potable : < 50 mg/L (OMS). Milieux aquatiques : < 10 mg/L.
Carbone Organique	Indique la présence de matière organique (d'origine naturelle ou anthropique) qui peut favoriser la prolifération bactérienne.	Un excès de carbone organique peut favoriser la croissance bactérienne et entraîner la formation de sous-produits indésirables lors du traitement de l’eau.	Eau potable : < 2 mg/L. Milieux aquatiques : 2-10 mg/L.
Orthophosphates (PO₄³⁻)	Favorisent la surabondance de matière organique et la prolifération d’algues.	Peu de toxicité directe, mais indirectement liés à la pollution de l’eau potable.	Eau potable : < 0,1 - 0,5 mg/L. Milieux aquatiques : < 0,1 mg/L.

38:Tdc4,function barChartInteractive(d3, proj4, france, stations, width, height, selectedDate, zoom, uniques) { const margin = { top: 50, right: 20, bottom: 130, left: 60 }; const chartWidth = width - margin.left - margin.right; const chartHeight = height - margin.top - margin.bottom; if (!france || !france.features) { console.error("Données France invalides ou mal chargées"); return; } // Filtrer les données avec température let data = stations.filter(d => d.LbLongParamètre === "Température de l'Eau") .filter(d => d.RsAna <= 50 && d.DatePrel === selectedDate); // Projeter toutes les stations, même celles sans données pour la date sélectionnée const lambert93 = "+proj=lcc +lat_1=49 +lat_2=44 +lat_0=46.5 +lon_0=3 +x_0=700000 +y_0=6600000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs"; let allStations = stations.map(d => { const [lon, lat] = proj4(lambert93, "WGS84", [d.CoordXStationMesureEauxSurface, d.CoordYStationMesureEauxSurface]); return { ...d, lon, lat }; }); let stationMap = new Map(data.map(d => [d.CdStationMesureEauxSurface, d])); let stationsWithCoords = allStations.map(d => { return stationMap.has(d.CdStationMesureEauxSurface) ? { ...d, RsAna: stationMap.get(d.CdStationMesureEauxSurface).RsAna } : { ...d, RsAna: null }; }); stationsWithCoords.sort((a, b) => b.CdStationMesureEauxSurface - a.CdStationMesureEauxSurface); // Extract only the part after "La Seine à " stationsWithCoords.forEach(d => { d.CleanedStationName = d.LbStationMesureEauxSurface.replace(/^LA SEINE A /i, ""); }); const xScale = d3.scaleBand() .domain(stationsWithCoords.map(d => d.CleanedStationName)) .range([0, chartWidth]) .padding(0.2); const yScale = d3.scaleLinear() .domain([0, d3.max(stationsWithCoords, d => d.RsAna || 0)]) .nice() .range([chartHeight, 0]); const colorScale = d3.scaleSequential(d3.interpolateInferno) .domain([0, d3.max(stationsWithCoords, d => d.RsAna || 0)]); const svg = d3.create("svg") .attr("viewBox", `0 0 ${width} ${height}`) .style("width", "100%") .style("height", "auto"); const chartGroup = svg.append("g") .attr("transform", `translate(${margin.left},${margin.top})`); chartGroup.append("g") .attr("transform", `translate(0,${chartHeight})`) .call(d3.axisBottom(xScale)) .selectAll("text") .style("text-anchor", "end") .attr("transform", "rotate(-45)"); chartGroup.append("g") .call(d3.axisLeft(yScale)); chartGroup.selectAll("rect") .data(stationsWithCoords) .enter().append("rect") .attr("x", d => xScale(d.CleanedStationName)) .attr("y", d => d.RsAna !== null ? yScale(d.RsAna) : chartHeight) .attr("width", xScale.bandwidth()) .attr("height", d => d.RsAna !== null ? chartHeight - yScale(d.RsAna) : 0) .attr("fill", d => d.RsAna !== null ? (uniques.includes(d.LbStationMesureEauxSurface) ? "blue" : colorScale(d.RsAna)) : "lightgray") .attr("stroke", "black"); svg.append("text") .attr("x", width / 2) .attr("y", 20) .attr("text-anchor", "middle") .style("font-size", "16px") .style("font-weight", "bold") .text(`Température de l'eau par station (${selectedDate})`); return svg.node(); } 39:T468,function legendComponent(d3, uniqueStations, width, heigth) { const margin = { top: 10, right: 10, bottom: 10, left: 10 }; const colorScale = d3.scaleOrdinal(d3.schemeCategory10); // Create an SVG element const svg = d3.create("svg") .attr("viewBox", `0 0 ${width} ${uniqueStations.length * 20 + margin.top + margin.bottom}`) .style("width", "100%") .style("height", "auto"); // Append the legend group const legend = svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); // Add legend items uniqueStations.forEach((station, i) => { // Extract only the part after "La Seine à " const cleanStationName = station.replace(/^LA SEINE A /i, ""); const legendRow = legend.append("g") .attr("transform", `translate(0, ${i * 20})`); legendRow.append("rect") .attr("width", 10) .attr("height", 10) .attr("fill", colorScale(station)) .attr("stroke", "black"); legendRow.append("text") .attr("x", 15) .attr("y", 10) .style("font-size", "10px") .text(cleanStationName); }); return svg.node(); } 3a:T13e0,function treemapSpecies_yearly(d3, data, stationNames, selectedYear, width1, height1) { const margin = { top: 30, right: 20, bottom: 10, left: 20 }; const width = width1 - margin.left - margin.right; const height = height1 - margin.top - margin.bottom; // Filtrer les données pour les stations et l'année sélectionnées let filteredData = data.filter(d => stationNames.includes(d.LbStationMesureEauxSurface) && d.DatePrel.startsWith(selectedYear) ); if (filteredData.length === 0) { console.warn("Aucune donnée trouvée pour les stations et l'année sélectionnées."); return d3.create("svg") .attr("viewBox", `0 0 ${width} ${height}`) .style("width", "100%") .style("height", "auto") .node(); } // Construire la hiérarchie des données avec une somme annuelle const nestedData = d3.rollup(filteredData, v => d3.sum(v, d => d.NombreIndividus), d => d.LbStationMesureEauxSurface, // Station d => d.Groupe // Groupe d'espèces ); const root = d3.hierarchy({ children: Array.from(nestedData, ([station, groups]) => { return { name: station, children: Array.from(groups, ([groupName, count]) => ({ name: groupName, value: count })) }; }) }) .sum(d => d.value) .sort((a, b) => b.value - a.value); const treemapLayout = d3.treemap() .size([width, height]) .padding(2); treemapLayout(root); const colorScale = d3.scaleOrdinal(d3.schemeCategory10); const chartContainer = d3.create("div").style("position", "relative"); const svg = chartContainer.append("svg") .attr("viewBox", `0 0 ${width1} ${height1}`) .style("width", "100%") .style("height", "auto"); svg.append("text") .attr("x", width / 2 + margin.left) .attr("y", 20) .attr("text-anchor", "middle") .style("font-size", "12px") .style("font-weight", "bold") .text(`Répartition des espèces pour l'année ${selectedYear}`); const chartGroup = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`); let tooltip = d3.select("#tooltip-treemap"); if (tooltip.empty()) { tooltip = d3.select("body").append("div") .attr("id", "tooltip-treemap") .attr("class", "tooltip") .style("position", "absolute") .style("background", "white") .style("border", "1px solid black") .style("border-radius", "5px") .style("padding", "5px") .style("display", "none") .style("z-index", "10000"); } function updateTooltipPosition(event) { const tooltipWidth = tooltip.node().offsetWidth; const tooltipHeight = tooltip.node().offsetHeight; // Récupérer la largeur et hauteur de l'écran const screenWidth = window.innerWidth; const screenHeight = window.innerHeight; let left = event.clientX + 10; let top = event.clientY - 10; // Empêcher la tooltip de dépasser la droite if (left + tooltipWidth > screenWidth) { left = event.clientX - tooltipWidth - 50; } // Empêcher la tooltip de dépasser le bas if (top + tooltipHeight > screenHeight) { top = event.clientY - tooltipHeight - 50; } // Empêcher la tooltip de sortir par le haut if (top < 0) { top = 10; } // Empêcher la tooltip de sortir par la gauche if (left < 0) { left = 10; } tooltip.style("left", `${left}px`) .style("top", `${top}px`); } const nodes = chartGroup.selectAll(".node") .data(root.leaves()) .enter().append("g") .attr("class", "node") .attr("transform", d => `translate(${d.x0},${d.y0})`); nodes.append("rect") .attr("width", d => d.x1 - d.x0) .attr("height", d => d.y1 - d.y0) .attr("fill", d => colorScale(d.parent.data.name)) .attr("stroke", "black") .on("mouseover", function (event, d) { d3.select(this).attr("stroke-width", 2); tooltip.style("display", "block") .html(`${d.parent.data.name} - ${d.data.name}
Population moyenne: ${d.value.toFixed(0)} individus`); updateTooltipPosition(event); }) .on("mousemove", function (event) { updateTooltipPosition(event); }) .on("mouseout", function () { d3.select(this).attr("stroke-width", 1); tooltip.style("display", "none"); }); nodes.append("text") .attr("x", 5) .attr("y", 15) .style("font-size", "10px") .style("fill", "black") .text(d => d.data.name) .attr("clip-path", d => `rect(0, 0, ${d.x1 - d.x0}, ${d.y1 - d.y0})`); const uniqueStations = Array.from(new Set(filteredData.map(d => d.LbStationMesureEauxSurface))); // Gérer le mode fullscreen et s'assurer que la tooltip reste visible document.addEventListener("fullscreenchange", () => { if (document.fullscreenElement) { document.fullscreenElement.appendChild(tooltip.node()); tooltip.style("position", "fixed"); } else { document.body.appendChild(tooltip.node()); tooltip.style("position", "absolute"); } }); return chartContainer.node(); } 3b:T181f,function lineChart_many(d3, merged_table, stationNames, selected_param, width1, height1, selectedDate) { const margin = { top: 60, right: 60, bottom: 60, left: 60 }; const width = width1 - margin.left - margin.right; const height = height1 - margin.top - margin.bottom; const selected_rslt_map = { "Température de l'Eau": "RsAna", "Potentiel en Hydrogène (pH)": "RsAna_pH", "Oxygène dissous": "RsAna_Ox", "Taux de saturation en oxygène": "RsAna_sat_O", "Nitrites": "RsAna_nitrite", "Nitrates": "RsAna_nitrate", "Carbone Organique": "RsAna_C", "Orthophosphates (PO4)": "RsAna_phosphate" }; const referenceValues = { "Température de l'Eau": 25, "Taux de saturation en oxygène": 80, "Nitrites": 0.5, "Nitrates": 10, "Carbone Organique": 2, "Orthophosphates (PO4)": 0.1 }; const unitMap = { "Température de l'Eau": "°C", "Potentiel en Hydrogène (pH)": "", "Oxygène dissous": "mg(O2)/L", "Taux de saturation en oxygène": "%", "Nitrites": "mg(NO2)/L", "Nitrates": "mg(NO3)/L", "Carbone Organique": "mg(C)/L", "Orthophosphates (PO4)": "mg(PO4)/L" }; const selected_rslt = selected_rslt_map[selected_param]; const selected_unit = unitMap[selected_param] || ""; if (!selected_rslt) { console.error("Invalid parameter selected:", selected_param); return d3.create("svg").attr("viewBox", `0 0 ${width1} ${height1}`).node(); } let stationData = merged_table.filter(d => stationNames.includes(d.LbStationMesureEauxSurface)); const parseDate = d3.timeParse("%Y-%m"); stationData = stationData.map(d => { const parsedDate = parseDate(String(d.DatePrel).trim()); return parsedDate ? { ...d, DatePrel: parsedDate } : null; }).filter(d => d !== null); stationData.sort((a, b) => a.DatePrel - b.DatePrel); if (stationData.length === 0) { console.warn("Aucune donnée trouvée."); return d3.create("svg").attr("viewBox", `0 0 ${width1} ${height1}`).node(); } const xScale = d3.scaleTime() .domain(d3.extent(stationData, d => d.DatePrel)) .range([0, width]); const yScale = d3.scaleLinear() .domain([d3.min(stationData, d => d[selected_rslt]), d3.max(stationData, d => d[selected_rslt])]) .nice() .range([height, 0]); const colorScale = d3.scaleOrdinal(d3.schemeCategory10).domain(stationNames); // Création du conteneur const chartContainer = d3.create("div").style("position", "relative"); const svg = chartContainer.append("svg") .attr("viewBox", `0 0 ${width1} ${height1}`) .style("width", "100%") .style("height", "auto"); const chartGroup = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`); chartGroup.append("g") .attr("transform", `translate(0,${height})`) .call(d3.axisBottom(xScale).ticks(6).tickFormat(d3.timeFormat("%Y-%m"))) .selectAll("text") .style("text-anchor", "end") .attr("transform", "rotate(-45)"); chartGroup.append("g").call(d3.axisLeft(yScale)); if (referenceValues[selected_param] !== undefined) { chartGroup.append("line") .attr("x1", 0) .attr("x2", width) .attr("y1", yScale(referenceValues[selected_param])) .attr("y2", yScale(referenceValues[selected_param])) .attr("stroke", "blue") .attr("stroke-width", 2) .attr("stroke-dasharray", "5,5"); } if (selectedDate) { const parsedSelectedDate = parseDate(selectedDate); if (parsedSelectedDate) { chartGroup.append("line") .attr("x1", xScale(parsedSelectedDate)) .attr("x2", xScale(parsedSelectedDate)) .attr("y1", 0) .attr("y2", height) .attr("stroke", "red") .attr("stroke-width", 3) .attr("stroke-dasharray", "4 4"); } } const line = d3.line() .x(d => xScale(d.DatePrel)) .y(d => yScale(d[selected_rslt])); const stations = d3.group(stationData, d => d.LbStationMesureEauxSurface); // Ajouter axes et titre svg.append("text") .attr("x", (width1) / 2) .attr("y", 20) .attr("text-anchor", "middle") .style("font-size", "12px") .style("font-weight", "bold") .text(`${selected_param} en fonction du temps`); svg.append("text") .attr("transform", "rotate(-90)") .attr("y", margin.left / 3) .attr("x", 0 - (height -10 )) .attr("text-anchor", "middle") .style("font-size", "12px") .text(selected_param); svg.append("text") .attr("x", (width1) / 2) .attr("y", height1 - 10) .attr("text-anchor", "middle") .style("font-size", "12px") .text("Date de prélèvement"); // Tooltip intégrée dans le conteneur const tooltip = chartContainer.append("div") .attr("class", "tooltip") .style("position", "absolute") .style("background", "white") .style("border", "1px solid black") .style("border-radius", "5px") .style("padding", "5px") .style("display", "none") .style("pointer-events", "none"); stations.forEach((data, station) => { chartGroup.append("path") .datum(data) .attr("fill", "none") .attr("stroke", colorScale(station)) .attr("stroke-width", 2) .attr("d", line); chartGroup.selectAll(`.point-${station.replace(/\s+/g, '_')}`) .data(data) .enter().append("circle") .attr("class", `point-${station.replace(/\s+/g, '_')}`) .attr("cx", d => xScale(d.DatePrel)) .attr("cy", d => yScale(d[selected_rslt])) .attr("r", 2) .attr("fill", colorScale(station)) .attr("stroke", "black") .on("mouseover", function (event, d) { d3.select(this).attr("r", 2); tooltip.style("display", "block") .html(`${d.LbStationMesureEauxSurface}
Date: ${d3.timeFormat("%Y-%m")(d.DatePrel)}
${selected_param}: ${d[selected_rslt]} ${selected_unit}`) .style("left", `${event.offsetX + 10}px`) .style("top", `${event.offsetY - 10}px`); }) .on("mouseout", function () { d3.select(this).attr("r", 2); tooltip.style("display", "none"); }); }); return chartContainer.node(); } 3c:T3764,function map_interactive_marche(d3, proj4, france, stations, width, height, selectedDate, zoom1, selectMode = false, uniques) { if (!france || !france.features) { console.error("Données France invalides ou mal chargées"); return; } const mapWidth = width; const mapHeight = height; let data = stations.filter(d => d.LbLongParamètre === "Température de l'Eau").filter(d => d.RsAna <= 50); const RsAnacolors = data .filter(d => d.RsAna !== null && d.RsAna !== undefined) .map(d => parseFloat(d.RsAna)); const colorScale = d3.scaleSequential(d3.interpolateInferno) .domain(d3.extent(RsAnacolors.length ? RsAnacolors : [0, 1])); let filteredStations = data.filter(d => d.DatePrel === selectedDate); // Définition de la projection const lambert93 = "+proj=lcc +lat_1=49 +lat_2=44 +lat_0=46.5 +lon_0=3 +x_0=700000 +y_0=6600000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs"; //const projection = d3.geoMercator().fitSize([width, height], france); const projection = d3.geoMercator() .center([2.5, 48.6]) .scale(zoom1) .translate([width / 2, height / 2]); const path = d3.geoPath().projection(projection); // Création du conteneur SVG const svgContainer = d3.create("div").style("position", "relative"); const svgElement = svgContainer.append("svg") .attr("viewBox", [0, 0, width, height]) .style("width", "100%") .style("height", "auto") .style("background-color", "white"); // Tooltip à l'intérieur du conteneur const tooltip = svgContainer.append("div") .attr("class", "tooltip") .style("position", "absolute") .style("background", "white") .style("border", "1px solid black") .style("border-radius", "5px") .style("padding", "5px") .style("display", "none") .style("pointer-events", "none"); let selectedStations = []; let selectedStationsIds = new Set(); // Garder la sélection quand la date change svgElement.on("selected", selectedStations); // Update selectedStations in svgElement let lockedTooltip = false; const mapGroup = svgElement.append('g').attr("class", "topg"); const title = svgElement.append("text") .attr("x", mapWidth / 2) .attr("y", 30) .attr("text-anchor", "middle") .style("font-size", "14px") .style("font-weight", "bold") .text("Carte des stations de mesure de la qualité de l'eau de la seine"); // Dessin du fond de carte mapGroup.selectAll('path') .data(france.features) .enter().append('path') .attr('d', path) .style('fill', '#ccc') .style('stroke', 'white'); // // Filtrage des stations pour la date sélectionnée // stations = stations.filter(d => d.DatePrel === selectedDate); let stationsWithCoords = data.map(d => { const [lon, lat] = proj4(lambert93, "WGS84", [d.CoordXStationMesureEauxSurface, d.CoordYStationMesureEauxSurface]); const projected = projection([lon, lat]); const stationData = filteredStations.find(s => s.CdStationMesureEauxSurface === d.CdStationMesureEauxSurface); const rsAnaForDate = stationData ? stationData.RsAna : null; return { ...d, x: projected[0], y: projected[1] , RsAnaForDate: rsAnaForDate }; }); const specialPoints = [ { name: "Source-Seine", x: 826900, y: 6711200 }, { name: "Le Havre", x: 490389, y: 6935091 } ]; specialPoints.forEach(point => { const [lon, lat] = proj4(lambert93, "WGS84", [point.x, point.y]); const projected = projection([lon, lat]); point.x = projected[0]; point.y = projected[1]; }); let links = []; for (let i = 0; i < stationsWithCoords.length - 1; i++) { links.push({ from: stationsWithCoords[i], to: stationsWithCoords[i + 1] }); } const legendWidth = 15; const legendHeight = 100; const legendPadding = 10; // Calcul de la position de la légende en fonction de la taille du conteneur const legendX = Math.min(mapWidth - legendWidth - legendPadding - 10, mapWidth * 0.995 - 10); const legendY = Math.min(mapHeight - legendHeight - legendPadding, mapHeight * 0.7); const legend = svgElement.append("g") .attr("transform", `translate(${legendX}, ${legendY})`) .style("font-size", `${mapWidth * 0.008}px`); // Taille dynamique const temperatureValues = stationsWithCoords.map(d => d.RsAna); mapGroup.selectAll("line") .data(links) .enter().append("line") .attr("x1", d => d.from.x) .attr("y1", d => d.from.y) .attr("x2", d => d.to.x) .attr("y2", d => d.to.y) .attr("stroke", d => (d.from.RsAnaForDate !== null ? colorScale(d.from.RsAnaForDate) : "#999")) .attr("stroke-width", 2); // Ajout des points de mesure mapGroup.selectAll("circle") .data(stationsWithCoords) .enter().append("circle") .attr("cx", d => d.x) .attr("cy", d => d.y) .attr("r", 4) .attr("fill", d => uniques.includes(d.LbStationMesureEauxSurface) ? "blue" : (d.RsAnaForDate !== null ? colorScale(d.RsAnaForDate) : "gray")) .attr("stroke", "black") .attr("stroke-width", 0.5) .on("mouseover", function (event, d) { d3.select(this).attr("r", 6); if (!lockedTooltip) { tooltip.style("display", "block") .html(`${d.LbStationMesureEauxSurface}
Température: ${d.RsAnaForDate !== null ? d.RsAnaForDate.toFixed(2) + " " + d.SymUniteMesure : "Pas de données"}
pH: ${d.RsAna_pH !== null ? d.RsAna_pH.toFixed(2) + " " : "Pas de données"}
Oxygène Dissous: ${d.RsAna_Ox !== null ? d.RsAna_Ox.toFixed(2) + " " + d.SymUniteMesure_Ox : "Pas de données"}
Carbone Organique: ${d.RsAna_C !== null ? d.RsAna_C.toFixed(2) + " " + d.SymUniteMesure_C : "Pas de données"}
Saturation Oxygène: ${d.RsAna_sat_O !== null ? d.RsAna_sat_O.toFixed(2) + " " + d.SymUniteMesure_sat_O : "Pas de données"}
Phosphates: ${d.RsAna_phosphate !== null ? d.RsAna_phosphate.toFixed(2) + " " + d.SymUniteMesure_phosphate : "Pas de données"}
Nitrites: ${d.RsAna_nitrite !== null ? d.RsAna_nitrite.toFixed(2) + " " + d.SymUniteMesure_nitrite : "Pas de données"}
Nitrates: ${d.RsAna_nitrate !== null ? d.RsAna_nitrate.toFixed(2) + " " + d.SymUniteMesure_nitrate : "Pas de données"}`) .style("left", (event.pageX + 10) + "px") .style("top", (event.pageY - 10) + "px"); adjustTooltipPosition(tooltip, svgContainer.node().getBoundingClientRect()); } }) .on("mousemove", function (event) { if (!lockedTooltip) { tooltip.style("left", (event.pageX + 10) + "px") .style("top", (event.pageY - 10) + "px"); adjustTooltipPosition(tooltip, svgContainer.node().getBoundingClientRect()); } }) .on("mouseout", function () { if (!lockedTooltip) { d3.select(this).attr("r", 4); tooltip.style("display", "none"); }}) .on("click", function (event, d) { lockedTooltip = true; tooltip.style("display", "block") .html("" + d.LbStationMesureEauxSurface + "
" + "Température: " + (d.RsAnaForDate !== null ? d.RsAnaForDate + " " + d.SymUniteMesure : "Pas de données")) .style("left", (event.pageX + 10) + "px") .style("top", (event.pageY - 10) + "px"); }); d3.select("body").on("click", function (event) { if (!event.target.closest(".tooltip")) { lockedTooltip = false; tooltip.style("display", "none"); } }); d3.select("#playButton").on("click", function () { lockedTooltip = false; tooltip.style("display", "none"); selectedStationsIds = new Set(selectedStations.map(d => d.CdStationMesureEauxSurface)); // stocker les stations sélectionnées }); mapGroup.selectAll("circle.special") .data(specialPoints) .enter().append("circle") .attr("class", "special") .attr("cx", d => d.x) .attr("cy", d => d.y) .attr("r", 6) .attr("fill", "black") .attr("stroke", "black") .attr("stroke-width", 1); //.on("mouseover", function (event, d) { //tooltip.style("display", "block") //.html(`${d.name}`) //.style("left", (event.pageX + 10) + "px") //.style("top", (event.pageY - 10) + "px"); //}) //.on("mouseout", function () { // tooltip.style("display", "none"); // }); // Ajout des étiquettes pour les points spéciaux mapGroup.selectAll("text.special-label") .data(specialPoints) .enter().append("text") .attr("class", "special-label") .attr("x", d => d.x + 10) // Décalage pour ne pas chevaucher le point .attr("y", d => d.y - 10) .attr("fill", "black") .attr("font-size", "12px") .attr("font-weight", "bold") .text(d => d.name); const legendScale = d3.scaleLinear() .domain(colorScale.domain()) .range([100, 0]); const legendAxis = d3.axisRight(legendScale).ticks(5); const gradient = svgElement.append("defs") .append("linearGradient") .attr("id", "legendGradient") .attr("x1", "0%").attr("y1", "0%") .attr("x2", "0%").attr("y2", "100%"); gradient.selectAll("stop") .data(d3.range(0, 1.1, 0.1)) .enter().append("stop") .attr("offset", d => `${d * 100}%`) .attr("stop-color", d => colorScale(legendScale.invert(d * 100))); legend.append("rect") .attr("width", 15) .attr("height", 100) .style("fill", "url(#legendGradient)"); legend.append("g") .attr("transform", "translate(15,0)") .call(legendAxis); // Selection Mode if (selectMode) { let rectSelection = svgElement.append("rect") .attr("fill", "rgba(0,0,255,0.2)") .attr("stroke", "blue") .attr("stroke-dasharray", "4,4") .style("visibility", "visible"); let startX, startY; svgElement.on("mousedown", function (event) { const [startX, startY] = d3.pointer(event, svgElement.node()); rectSelection .attr("x", startX) .attr("y", startY) .attr("width", 0) .attr("height", 0) .style("visibility", "visible"); svgElement.on("mousemove", function (event) { const [endX, endY] = d3.pointer(event, svgElement.node()); rectSelection .attr("x", Math.min(startX, endX)) .attr("y", Math.min(startY, endY)) .attr("width", Math.abs(endX - startX)) .attr("height", Math.abs(endY - startY)); }); svgElement.on("mouseup", function () { svgElement.on("mousemove", null); svgElement.on("mouseup", null); let rectX = parseFloat(rectSelection.attr("x")); let rectY = parseFloat(rectSelection.attr("y")); let rectWidth = parseFloat(rectSelection.attr("width")); let rectHeight = parseFloat(rectSelection.attr("height")); selectedStations = stationsWithCoords.filter(d => d.x >= rectX && d.x <= rectX + rectWidth && d.y >= rectY && d.y <= rectY + rectHeight ); rectSelection.style("visibility", "hidden"); updateSelectedList(); selectedStations = stationsWithCoords.filter(d => selectedStationsIds.has(d.CdStationMesureEauxSurface)); renderSelectedStations(); }); }); function updateSelectedList() { d3.select("#selected-stations").remove(); svgElement.on("selected", selectedStations); // Update selectedStations in svgElement let stationList = svgElement.append("g") .attr("id", "selected-stations") .attr("transform", "translate(" + (width - 120) + ", 40)"); stationList.append("text") .text("Stations sélectionnées :") .attr("font-size", "12px") .attr("font-weight", "bold"); let distinctStations = Array.from(new Set(selectedStations.map(d => d.LbStationMesureEauxSurface))) .map(name => selectedStations.find(d => d.LbStationMesureEauxSurface === name)); stationList.selectAll("text.station") .data(distinctStations) .enter().append("text") .attr("class", "station") .attr("y", (d, i) => 20 + i * 15) .attr("font-size", "12px") .text(d => d.LbStationMesureEauxSurface); // Returning the svg element with accessible selectedStations mutable uniques = [...new Set(svgElement.node().__on[0].value.map(station => station.LbStationMesureEauxSurface))]; } function renderSelectedStations() { mapGroup.selectAll("circle.selected").remove(); mapGroup.selectAll("circle.selected") .data(selectedStations) .enter().append("circle") .attr("class", "selected") .attr("cx", d => d.x) .attr("cy", d => d.y) .attr("r", 6) .attr("fill", "blue") .attr("stroke", "black") .attr("stroke-width", 0.5); } } function adjustTooltipPosition(tooltip, containerBounds) { const tooltipBounds = tooltip.node().getBoundingClientRect(); if (tooltipBounds.right > containerBounds.right) { tooltip.style("left", (parseFloat(tooltip.style("left")) - (tooltipBounds.right - containerBounds.right) - 10) + "px"); } if (tooltipBounds.bottom > containerBounds.bottom) { tooltip.style("top", (parseFloat(tooltip.style("top")) - (tooltipBounds.bottom - containerBounds.bottom) - 10) + "px"); } if (tooltipBounds.left < containerBounds.left) { tooltip.style("left", (containerBounds.left + 10) + "px"); } if (tooltipBounds.top < containerBounds.top) { tooltip.style("top", (containerBounds.top + 10) + "px"); } } return svgContainer.node(); } 3d:T3b7f,function map_interactive_copy2(d3, proj4, france, stations, width, height, selectedDate, zoom, selectMode = false, uniques) { if (!france || !france.features) { console.error("Données France invalides ou mal chargées"); return; } const mapWidth = width; const mapHeight = height; let data = stations.filter(d => d.LbLongParamètre === "Température de l'Eau").filter(d => d.RsAna <= 50); const RsAnacolors = data .filter(d => d.RsAna !== null && d.RsAna !== undefined) .map(d => parseFloat(d.RsAna)); const colorScale = d3.scaleSequential(d3.interpolateInferno) .domain(d3.extent(RsAnacolors.length ? RsAnacolors : [0, 1])); let filteredStations = data.filter(d => d.DatePrel === selectedDate); // Définition de la projection const lambert93 = "+proj=lcc +lat_1=49 +lat_2=44 +lat_0=46.5 +lon_0=3 +x_0=700000 +y_0=6600000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs"; //const projection = d3.geoMercator().fitSize([width, height], france); const projection = d3.geoMercator() .center([2.5, 48.6]) .scale(zoom) .translate([width / 2, height / 2]); const path = d3.geoPath().projection(projection); // Création du conteneur SVG const svgContainer = d3.create("div").style("position", "relative"); const svgElement = svgContainer.append("svg") .attr("viewBox", [0, 0, width, height]) .style("width", "100%") .style("height", "auto") .style("background-color", "white"); // Tooltip à l'intérieur du conteneur const tooltip = svgContainer.append("div") .attr("class", "tooltip") .style("position", "absolute") .style("background", "white") .style("border", "1px solid black") .style("border-radius", "5px") .style("padding", "5px") .style("display", "none") .style("pointer-events", "none"); let selectedStations = []; let selectedStationsIds = new Set(); // Garder la sélection quand la date change svgElement.on("selected", selectedStations); // Update selectedStations in svgElement let lockedTooltip = false; const mapGroup = svgElement.append('g').attr("class", "topg"); const title = svgElement.append("text") .attr("x", mapWidth / 2) .attr("y", 30) .attr("text-anchor", "middle") .style("font-size", "14px") .style("font-weight", "bold") .text("Carte des stations de mesure de la qualité de l'eau de la seine"); // Dessin du fond de carte mapGroup.selectAll('path') .data(france.features) .enter().append('path') .attr('d', path) .style('fill', '#ccc') .style('stroke', 'white'); // // Filtrage des stations pour la date sélectionnée // stations = stations.filter(d => d.DatePrel === selectedDate); let stationsWithCoords = data.map(d => { const [lon, lat] = proj4(lambert93, "WGS84", [d.CoordXStationMesureEauxSurface, d.CoordYStationMesureEauxSurface]); const projected = projection([lon, lat]); const stationData = filteredStations.find(s => s.CdStationMesureEauxSurface === d.CdStationMesureEauxSurface); const rsAnaForDate = stationData ? stationData.RsAna : null; return { ...d, x: projected[0], y: projected[1] , RsAnaForDate: rsAnaForDate }; }); const specialPoints = [ { name: "Source-Seine", x: 826900, y: 6711200 }, { name: "Le Havre", x: 490389, y: 6935091 } ]; specialPoints.forEach(point => { const [lon, lat] = proj4(lambert93, "WGS84", [point.x, point.y]); const projected = projection([lon, lat]); point.x = projected[0]; point.y = projected[1]; }); let links = []; for (let i = 0; i < stationsWithCoords.length - 1; i++) { links.push({ from: stationsWithCoords[i], to: stationsWithCoords[i + 1] }); } const legendWidth = 15; const legendHeight = 100; const legendPadding = 10; // Calcul de la position de la légende en fonction de la taille du conteneur const legendX = Math.min(mapWidth - legendWidth - legendPadding - 10, mapWidth * 0.995 - 10); const legendY = Math.min(mapHeight - legendHeight - legendPadding, mapHeight * 0.7); const legend = svgElement.append("g") .attr("transform", `translate(${legendX}, ${legendY})`) .style("font-size", `${mapWidth * 0.008}px`); // Taille dynamique const temperatureValues = stationsWithCoords.map(d => d.RsAna); mapGroup.selectAll("line") .data(links) .enter().append("line") .attr("x1", d => d.from.x) .attr("y1", d => d.from.y) .attr("x2", d => d.to.x) .attr("y2", d => d.to.y) .attr("stroke", d => (d.from.RsAnaForDate !== null ? colorScale(d.from.RsAnaForDate) : "#999")) .attr("stroke-width", 2); // Ajout des points de mesure mapGroup.selectAll("circle") .data(stationsWithCoords) .enter().append("circle") .attr("cx", d => d.x) .attr("cy", d => d.y) .attr("r", 4) .attr("fill", d => uniques.includes(d.LbStationMesureEauxSurface) ? "blue" : (d.RsAnaForDate !== null ? colorScale(d.RsAnaForDate) : "gray")) .attr("stroke", "black") .attr("stroke-width", 0.5) .on("mouseover", function (event, d) { d3.select(this).attr("r", 6); if (!lockedTooltip) { tooltip.style("display", "block") .html(`${d.LbStationMesureEauxSurface}
Température: ${d.RsAnaForDate !== null ? d.RsAnaForDate + " " + d.SymUniteMesure : "Pas de données"}
pH: ${d.RsAna_pH !== null ? d.RsAna_pH + " " : "Pas de données"}
Oxygène Dissous: ${d.RsAna_Ox !== null ? d.RsAna_Ox + " " + d.SymUniteMesure_Ox : "Pas de données"}
Carbone Organique: ${d.RsAna_C !== null ? d.RsAna_C + " " + d.SymUniteMesure_C : "Pas de données"}
Saturation Oxygène: ${d.RsAna_sat_O !== null ? d.RsAna_sat_O + " " + d.SymUniteMesure_sat_O : "Pas de données"}
Phosphates: ${d.RsAna_phosphate !== null ? d.RsAna_phosphate + " " + d.SymUniteMesure_phosphate : "Pas de données"}
Nitrites: ${d.RsAna_nitrite !== null ? d.RsAna_nitrite + " " + d.SymUniteMesure_nitrite : "Pas de données"}
Nitrates: ${d.RsAna_nitrate !== null ? d.RsAna_nitrate + " " + d.SymUniteMesure_nitrate : "Pas de données"}`) .style("left", (event.pageX + 10) + "px") .style("top", (event.pageY - 10) + "px"); adjustTooltipPosition(tooltip, svgContainer.node().getBoundingClientRect()); } }) .on("mousemove", function (event) { if (!lockedTooltip) { tooltip.style("left", (event.pageX + 10) + "px") .style("top", (event.pageY - 10) + "px"); adjustTooltipPosition(tooltip, svgContainer.node().getBoundingClientRect()); } }) .on("mouseout", function () { if (!lockedTooltip) { d3.select(this).attr("r", 4); tooltip.style("display", "none"); }}) .on("click", function (event, d) { lockedTooltip = true; tooltip.style("display", "block") .html("" + d.LbStationMesureEauxSurface + "
" + "Température: " + (d.RsAnaForDate !== null ? d.RsAnaForDate + " " + d.SymUniteMesure : "Pas de données")) .style("left", (event.pageX + 10) + "px") .style("top", (event.pageY - 10) + "px"); }); d3.select("body").on("click", function (event) { if (!event.target.closest(".tooltip")) { lockedTooltip = false; tooltip.style("display", "none"); } }); d3.select("#playButton").on("click", function () { lockedTooltip = false; tooltip.style("display", "none"); selectedStationsIds = new Set(selectedStations.map(d => d.CdStationMesureEauxSurface)); // stocker les stations sélectionnées }); mapGroup.selectAll("circle.special") .data(specialPoints) .enter().append("circle") .attr("class", "special") .attr("cx", d => d.x) .attr("cy", d => d.y) .attr("r", 6) .attr("fill", "black") .attr("stroke", "black") .attr("stroke-width", 1); //.on("mouseover", function (event, d) { //tooltip.style("display", "block") //.html(`${d.name}`) //.style("left", (event.pageX + 10) + "px") //.style("top", (event.pageY - 10) + "px"); //}) //.on("mouseout", function () { // tooltip.style("display", "none"); // }); // Ajout des étiquettes pour les points spéciaux mapGroup.selectAll("text.special-label") .data(specialPoints) .enter().append("text") .attr("class", "special-label") .attr("x", d => d.x + 10) // Décalage pour ne pas chevaucher le point .attr("y", d => d.y - 10) .attr("fill", "black") .attr("font-size", "12px") .attr("font-weight", "bold") .text(d => d.name); const legendScale = d3.scaleLinear() .domain(colorScale.domain()) .range([100, 0]); const legendAxis = d3.axisRight(legendScale).ticks(5); const gradient = svgElement.append("defs") .append("linearGradient") .attr("id", "legendGradient") .attr("x1", "0%").attr("y1", "0%") .attr("x2", "0%").attr("y2", "100%"); gradient.selectAll("stop") .data(d3.range(0, 1.1, 0.1)) .enter().append("stop") .attr("offset", d => `${d * 100}%`) .attr("stop-color", d => colorScale(legendScale.invert(d * 100))); legend.append("rect") .attr("width", 15) .attr("height", 100) .style("fill", "url(#legendGradient)"); legend.append("g") .attr("transform", "translate(15,0)") .call(legendAxis); // Selection Mode stationsWithCoords.forEach(station => { mapGroup.append("circle") .attr("class", "station") .attr("cx", station.x) .attr("cy", station.y) .attr("r", 5) .attr("fill", d => uniques.includes(d.LbStationMesureEauxSurface) ? "blue" : (d.RsAnaForDate !== null ? colorScale(d.RsAnaForDate) : "gray")) .attr("stroke", "black") .attr("stroke-width", 0.5) .on("click", function(event, d) { let isSelected = selectedStations.some(s => s.CdStationMesureEauxSurface === d.CdStationMesureEauxSurface); if (isSelected) { // Supprimer si déjà sélectionné selectedStations = selectedStations.filter(s => s.CdStationMesureEauxSurface !== d.CdStationMesureEauxSurface); d3.select(this).attr("fill", "red"); } else { // Ajouter la station sélectionnée selectedStations.push(d); d3.select(this).attr("fill", "blue"); } updateSelectedList(); renderSelectedStations(); }); }); // Création des cercles représentant les stations mapGroup.selectAll("circle.station") .data(stationsWithCoords) .enter() .append("circle") .attr("class", "station") .attr("cx", d => d.x) .attr("cy", d => d.y) .attr("r", 5) .attr("fill", "red") // Par défaut, non sélectionné .attr("stroke", "black") .attr("stroke-width", 0.5) .on("click", function(event, d) { let isSelected = selectedStations.some(s => s.CdStationMesureEauxSurface === d.CdStationMesureEauxSurface); if (isSelected) { // Désélectionner si déjà sélectionné selectedStations = selectedStations.filter(s => s.CdStationMesureEauxSurface !== d.CdStationMesureEauxSurface); d3.select(this).attr("fill", "red"); // Remet en rouge } else { // Ajouter la station sélectionnée selectedStations.push(d); d3.select(this).attr("fill", "blue"); // Passe en bleu } updateSelectedList(); }); function updateSelectedList() { d3.select("#selected-stations").remove(); let stationList = svgElement.append("g") .attr("id", "selected-stations") .attr("transform", "translate(" + (width - 120) + ", 40)"); stationList.append("text") .text("Stations sélectionnées :") .attr("font-size", "12px") .attr("font-weight", "bold"); stationList.selectAll("text.station") .data(selectedStations) .enter() .append("text") .attr("class", "station") .attr("y", (d, i) => 20 + i * 15) .attr("font-size", "12px") .text(d => d.LbStationMesureEauxSurface); } // Fonction de mise à jour de la sélection function updateSelection(stationName) { let index = uniques.indexOf(stationName); if (index === -1) { // Ajouter si non présent uniques.push(stationName); } else { // Supprimer si déjà sélectionné uniques.splice(index, 1); } // Mettre à jour la carte renderSelectedStations(); } // Fonction pour mettre à jour l'affichage des stations sélectionnées function renderSelectedStations() { mapGroup.selectAll("circle") .attr("fill", d => uniques.includes(d.LbStationMesureEauxSurface) ? "blue" : (d.RsAnaForDate !== null ? colorScale(d.RsAnaForDate) : "gray")); } // Ajout des événements de clic sur les cercles pour sélectionner/dé-sélectionner mapGroup.selectAll("circle") .on("click", function(event, d) { updateSelection(d.LbStationMesureEauxSurface); }); function adjustTooltipPosition(tooltip, containerBounds) { const tooltipBounds = tooltip.node().getBoundingClientRect(); if (tooltipBounds.right > containerBounds.right) { tooltip.style("left", (parseFloat(tooltip.style("left")) - (tooltipBounds.right - containerBounds.right) - 10) + "px"); } if (tooltipBounds.bottom > containerBounds.bottom) { tooltip.style("top", (parseFloat(tooltip.style("top")) - (tooltipBounds.bottom - containerBounds.bottom) - 10) + "px"); } if (tooltipBounds.left < containerBounds.left) { tooltip.style("left", (containerBounds.left + 10) + "px"); } if (tooltipBounds.top < containerBounds.top) { tooltip.style("top", (containerBounds.top + 10) + "px"); } } return svgContainer.node(); } 3e:T3926,function map_interactive_copy(d3, proj4, france, stations, width, height, selectedDate, zoom, selectMode = false, uniques) { if (!france || !france.features) { console.error("Données France invalides ou mal chargées"); return; } const mapWidth = width; const mapHeight = height; let data = stations.filter(d => d.LbLongParamètre === "Température de l'Eau").filter(d => d.RsAna <= 50); const RsAnacolors = data .filter(d => d.RsAna !== null && d.RsAna !== undefined) .map(d => parseFloat(d.RsAna)); const colorScale = d3.scaleSequential(d3.interpolateInferno) .domain(d3.extent(RsAnacolors.length ? RsAnacolors : [0, 1])); let filteredStations = data.filter(d => d.DatePrel === selectedDate); // Définition de la projection const lambert93 = "+proj=lcc +lat_1=49 +lat_2=44 +lat_0=46.5 +lon_0=3 +x_0=700000 +y_0=6600000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs"; //const projection = d3.geoMercator().fitSize([width, height], france); const projection = d3.geoMercator() .center([2.5, 48.6]) .scale(zoom) .translate([width / 2, height / 2]); const path = d3.geoPath().projection(projection); // Création du conteneur SVG const svgContainer = d3.create("div").style("position", "relative"); const svgElement = svgContainer.append("svg") .attr("viewBox", [0, 0, width, height]) .style("width", "100%") .style("height", "auto") .style("background-color", "white"); // Tooltip à l'intérieur du conteneur const tooltip = svgContainer.append("div") .attr("class", "tooltip") .style("position", "absolute") .style("background", "white") .style("border", "1px solid black") .style("border-radius", "5px") .style("padding", "5px") .style("display", "none") .style("pointer-events", "none"); let selectedStations = []; let selectedStationsIds = new Set(); // Garder la sélection quand la date change svgElement.on("selected", selectedStations); // Update selectedStations in svgElement let lockedTooltip = false; const mapGroup = svgElement.append('g').attr("class", "topg"); const title = svgElement.append("text") .attr("x", mapWidth / 2) .attr("y", 30) .attr("text-anchor", "middle") .style("font-size", "18px") .style("font-weight", "bold") .text("Carte des stations de mesure de la qualité de l'eau de la seine"); // Dessin du fond de carte mapGroup.selectAll('path') .data(france.features) .enter().append('path') .attr('d', path) .style('fill', '#ccc') .style('stroke', 'white'); // // Filtrage des stations pour la date sélectionnée // stations = stations.filter(d => d.DatePrel === selectedDate); let stationsWithCoords = data.map(d => { const [lon, lat] = proj4(lambert93, "WGS84", [d.CoordXStationMesureEauxSurface, d.CoordYStationMesureEauxSurface]); const projected = projection([lon, lat]); const stationData = filteredStations.find(s => s.CdStationMesureEauxSurface === d.CdStationMesureEauxSurface); const rsAnaForDate = stationData ? stationData.RsAna : null; return { ...d, x: projected[0], y: projected[1] , RsAnaForDate: rsAnaForDate }; }); const specialPoints = [ { name: "Source: Commune de Source-Seine", x: 826900, y: 6711200 }, { name: "Estuaire: Le Havre", x: 490389, y: 6935091 } ]; specialPoints.forEach(point => { const [lon, lat] = proj4(lambert93, "WGS84", [point.x, point.y]); const projected = projection([lon, lat]); point.x = projected[0]; point.y = projected[1]; }); let links = []; for (let i = 0; i < stationsWithCoords.length - 1; i++) { links.push({ from: stationsWithCoords[i], to: stationsWithCoords[i + 1] }); } const legendWidth = 15; const legendHeight = 100; const legendPadding = 10; // Calcul de la position de la légende en fonction de la taille du conteneur const legendX = Math.min(mapWidth - legendWidth - legendPadding - 20, mapWidth * 0.995 - 20); const legendY = Math.min(mapHeight - legendHeight - legendPadding, mapHeight * 0.7); const legend = svgElement.append("g") .attr("transform", `translate(${legendX}, ${legendY})`) .style("font-size", `${mapWidth * 0.008}px`); // Taille dynamique const temperatureValues = stationsWithCoords.map(d => d.RsAna); mapGroup.selectAll("line") .data(links) .enter().append("line") .attr("x1", d => d.from.x) .attr("y1", d => d.from.y) .attr("x2", d => d.to.x) .attr("y2", d => d.to.y) .attr("stroke", d => (d.from.RsAnaForDate !== null ? colorScale(d.from.RsAnaForDate) : "#999")) .attr("stroke-width", 2); // Ajout des points de mesure mapGroup.selectAll("circle") .data(stationsWithCoords) .enter().append("circle") .attr("cx", d => d.x) .attr("cy", d => d.y) .attr("r", 4) .attr("fill", d => uniques.includes(d.LbStationMesureEauxSurface) ? "blue" : (d.RsAnaForDate !== null ? colorScale(d.RsAnaForDate) : "gray")) .attr("stroke", "black") .attr("stroke-width", 0.5) .on("mouseover", function (event, d) { d3.select(this).attr("r", 6); if (!lockedTooltip) { tooltip.style("display", "block") .html(`${d.LbStationMesureEauxSurface}
Température: ${d.RsAnaForDate !== null ? d.RsAnaForDate + " " + d.SymUniteMesure : "Pas de données"}
pH: ${d.RsAna_pH !== null ? d.RsAna_pH + " " : "Pas de données"}
Oxygène Dissous: ${d.RsAna_Ox !== null ? d.RsAna_Ox + " " + d.SymUniteMesure_Ox : "Pas de données"}
Carbone Organique: ${d.RsAna_C !== null ? d.RsAna_C + " " + d.SymUniteMesure_C : "Pas de données"}
Saturation Oxygène: ${d.RsAna_sat_O !== null ? d.RsAna_sat_O + " " + d.SymUniteMesure_sat_O : "Pas de données"}
Phosphates: ${d.RsAna_phosphate !== null ? d.RsAna_phosphate + " " + d.SymUniteMesure_phosphate : "Pas de données"}
Nitrites: ${d.RsAna_nitrite !== null ? d.RsAna_nitrite + " " + d.SymUniteMesure_nitrite : "Pas de données"}
Nitrates: ${d.RsAna_nitrate !== null ? d.RsAna_nitrate + " " + d.SymUniteMesure_nitrate : "Pas de données"}`) .style("left", (event.pageX + 10) + "px") .style("top", (event.pageY - 10) + "px"); adjustTooltipPosition(tooltip, svgContainer.node().getBoundingClientRect()); } }) .on("mousemove", function (event) { if (!lockedTooltip) { tooltip.style("left", (event.pageX + 10) + "px") .style("top", (event.pageY - 10) + "px"); adjustTooltipPosition(tooltip, svgContainer.node().getBoundingClientRect()); } }) .on("mouseout", function () { if (!lockedTooltip) { d3.select(this).attr("r", 4); tooltip.style("display", "none"); }}) .on("click", function (event, d) { lockedTooltip = true; tooltip.style("display", "block") .html("" + d.LbStationMesureEauxSurface + "
" + "Température: " + (d.RsAnaForDate !== null ? d.RsAnaForDate + " " + d.SymUniteMesure : "Pas de données")) .style("left", (event.pageX + 10) + "px") .style("top", (event.pageY - 10) + "px"); }); d3.select("body").on("click", function (event) { if (!event.target.closest(".tooltip")) { lockedTooltip = false; tooltip.style("display", "none"); } }); d3.select("#playButton").on("click", function () { lockedTooltip = false; tooltip.style("display", "none"); selectedStationsIds = new Set(selectedStations.map(d => d.CdStationMesureEauxSurface)); // stocker les stations sélectionnées }); mapGroup.selectAll("circle.special") .data(specialPoints) .enter().append("circle") .attr("class", "special") .attr("cx", d => d.x) .attr("cy", d => d.y) .attr("r", 6) .attr("fill", "black") .attr("stroke", "black") .attr("stroke-width", 1) .on("mouseover", function (event, d) { tooltip.style("display", "block") .html(`${d.name}`) .style("left", (event.pageX + 10) + "px") .style("top", (event.pageY - 10) + "px"); }) .on("mouseout", function () { tooltip.style("display", "none"); }); const legendScale = d3.scaleLinear() .domain(colorScale.domain()) .range([100, 0]); const legendAxis = d3.axisRight(legendScale).ticks(5); const gradient = svgElement.append("defs") .append("linearGradient") .attr("id", "legendGradient") .attr("x1", "0%").attr("y1", "0%") .attr("x2", "0%").attr("y2", "100%"); gradient.selectAll("stop") .data(d3.range(0, 1.1, 0.1)) .enter().append("stop") .attr("offset", d => `${d * 100}%`) .attr("stop-color", d => colorScale(legendScale.invert(d * 100))); legend.append("rect") .attr("width", 15) .attr("height", 100) .style("fill", "url(#legendGradient)"); legend.append("g") .attr("transform", "translate(15,0)") .call(legendAxis); // Selection Mode if (selectMode) { let rectSelection = svgElement.append("rect") .attr("fill", "rgba(0,0,255,0.2)") .attr("stroke", "blue") .attr("stroke-dasharray", "4,4") .style("visibility", "visible"); let startX, startY; svgElement.on("mousedown", function (event) { const [startX, startY] = d3.pointer(event, svgElement.node()); rectSelection .attr("x", startX) .attr("y", startY) .attr("width", 0) .attr("height", 0) .style("visibility", "visible"); svgElement.on("mousemove", function (event) { const [endX, endY] = d3.pointer(event, svgElement.node()); rectSelection .attr("x", Math.min(startX, endX)) .attr("y", Math.min(startY, endY)) .attr("width", Math.abs(endX - startX)) .attr("height", Math.abs(endY - startY)); }); svgElement.on("mouseup", function () { svgElement.on("mousemove", null); svgElement.on("mouseup", null); let rectX = parseFloat(rectSelection.attr("x")); let rectY = parseFloat(rectSelection.attr("y")); let rectWidth = parseFloat(rectSelection.attr("width")); let rectHeight = parseFloat(rectSelection.attr("height")); selectedStations = stationsWithCoords.filter(d => d.x >= rectX && d.x <= rectX + rectWidth && d.y >= rectY && d.y <= rectY + rectHeight ); rectSelection.style("visibility", "hidden"); updateSelectedList(); selectedStations = stationsWithCoords.filter(d => selectedStationsIds.has(d.CdStationMesureEauxSurface)); renderSelectedStations(); }); }); function updateSelectedList() { d3.select("#selected-stations").remove(); svgElement.on("selected", selectedStations); // Update selectedStations in svgElement let stationList = svgElement.append("g") .attr("id", "selected-stations") .attr("transform", "translate(" + (width - 120) + ", 40)"); stationList.append("text") .text("Stations sélectionnées :") .attr("font-size", "12px") .attr("font-weight", "bold"); let distinctStations = Array.from(new Set(selectedStations.map(d => d.LbStationMesureEauxSurface))) .map(name => selectedStations.find(d => d.LbStationMesureEauxSurface === name)); stationList.selectAll("text.station") .data(distinctStations) .enter().append("text") .attr("class", "station") .attr("y", (d, i) => 20 + i * 15) .attr("font-size", "12px") .text(d => d.LbStationMesureEauxSurface); // Returning the svg element with accessible selectedStations mutable uniques = [...new Set(svgElement.node().__on[0].value.map(station => station.LbStationMesureEauxSurface))]; } function renderSelectedStations() { mapGroup.selectAll("circle.selected").remove(); mapGroup.selectAll("circle.selected") .data(selectedStations) .enter().append("circle") .attr("class", "selected") .attr("cx", d => d.x) .attr("cy", d => d.y) .attr("r", 6) .attr("fill", "blue") .attr("stroke", "black") .attr("stroke-width", 0.5); } } function adjustTooltipPosition(tooltip, containerBounds) { const tooltipBounds = tooltip.node().getBoundingClientRect(); if (tooltipBounds.right > containerBounds.right) { tooltip.style("left", (parseFloat(tooltip.style("left")) - (tooltipBounds.right - containerBounds.right) - 10) + "px"); } if (tooltipBounds.bottom > containerBounds.bottom) { tooltip.style("top", (parseFloat(tooltip.style("top")) - (tooltipBounds.bottom - containerBounds.bottom) - 10) + "px"); } if (tooltipBounds.left < containerBounds.left) { tooltip.style("left", (containerBounds.left + 10) + "px"); } if (tooltipBounds.top < containerBounds.top) { tooltip.style("top", (containerBounds.top + 10) + "px"); } } const svg = d3.select("svg"); // Créer un groupe pour le zoom et un autre pour les points const gZoom = svg.append("g").attr("class", "zoom-layer"); const gPoints = svg.append("g").attr("class", "points-layer"); // Comportement du zoom const zoomBehavior = d3.zoom() .scaleExtent([1, 10]) // Limite du zoom .on("zoom", (event) => { gZoom.attr("transform", event.transform); // Applique la transformation au fond gPoints.attr("transform", event.transform); // Déplace aussi les points }); // Appliquer le zoom **uniquement** sur le fond svg.call(zoomBehavior) .on("mousedown", (event) => event.preventDefault()); // Évite la sélection non voulue gPoints.selectAll("circle") .on("click", function (event, d) { d3.select(this) .classed("selected", !d3.select(this).classed("selected")); // Alterne la sélection }); return svgContainer.node(); } 3f:[{"id":"4fa636444aeb0dfdb33fdaaa86b4e64ac8c1791e590a041b29b48226b87a7a6a2efeeea64e0fb4cadc8cb28e5a373bc57a16f8982ed7bb4bcdc2fa49132472d4","href":"https://static.observableusercontent.com/files/4fa636444aeb0dfdb33fdaaa86b4e64ac8c1791e590a041b29b48226b87a7a6a2efeeea64e0fb4cadc8cb28e5a373bc57a16f8982ed7bb4bcdc2fa49132472d4","name":"Analyse_exploratoire_rendu.twb","type":"application/xml","lastModified":1740324825939.438,"size":823122},{"id":"b60dc737b6a467a0cc5f027fdc71fe612112a6957ae020b73873bab1b8440ff69eeba6e8e7daffc51293ab1dc737cc6ad2d3ea1fa5f24b29b74f40b0f15d10ad","href":"https://static.observableusercontent.com/files/b60dc737b6a467a0cc5f027fdc71fe612112a6957ae020b73873bab1b8440ff69eeba6e8e7daffc51293ab1dc737cc6ad2d3ea1fa5f24b29b74f40b0f15d10ad","name":"Capture d-écran 2025-02-22 203902.png","type":"image/png","lastModified":1740324825939.438,"size":140137},{"id":"7fba6c574c553e3a2d9eb3e7508b0523d46d2d1898d5d58b18c54a26ccea579b6222e47dac4f95f6b5dd0c4bbe4cc30ccf644542634d31b8a6b3484779a6f017","href":"https://static.observableusercontent.com/files/7fba6c574c553e3a2d9eb3e7508b0523d46d2d1898d5d58b18c54a26ccea579b6222e47dac4f95f6b5dd0c4bbe4cc30ccf644542634d31b8a6b3484779a6f017","name":"Capture d-écran 2025-02-22 203920.png","type":"image/png","lastModified":1740324825939.438,"size":169535},{"id":"963fdc0682b1e5100b3e815141d7178e94d6fcdcef0f5a6f9a779ed456d3f5fcc5366d89b028886e3f9a94e2e39b89cd5116fd2c8e1434a7ea561309d3bdbede","href":"https://static.observableusercontent.com/files/963fdc0682b1e5100b3e815141d7178e94d6fcdcef0f5a6f9a779ed456d3f5fcc5366d89b028886e3f9a94e2e39b89cd5116fd2c8e1434a7ea561309d3bdbede","name":"Capture d-écran 2025-02-22 203950.png","type":"image/png","lastModified":1740324825939.438,"size":164940},{"id":"65ed615596c8249d5696c0158c7235dbe6f6c8d27ea51046da45f3cd434b6fd6f276dbdb00703cf2acf8b9ed3c1bd2d75fedb81d004dd46c9fd9ae87aa1e8e42","href":"https://static.observableusercontent.com/files/65ed615596c8249d5696c0158c7235dbe6f6c8d27ea51046da45f3cd434b6fd6f276dbdb00703cf2acf8b9ed3c1bd2d75fedb81d004dd46c9fd9ae87aa1e8e42","name":"prototypage2.png","type":"image/png","lastModified":1740324825939.438,"size":1127511}] 32:{"id":"2ed9bade9d02cd9d","slug":"copie-projet-qualityseine","title":"Copie de Projet QualitySeine","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2025-02-23T15:33:45.939Z","update_time":"$D2025-03-07T09:43:12.357Z","view_time":null,"first_public_time":"$D2025-02-23T17:06:50.158Z","has_unpublished_edits":null,"fork":{"id":"c71c65caebe28b64","slug":"projet-quality-seine","title":"Projet QualitySeine","owner":{"id":"6c3fbb7e8e9eb737","login":"neirouz","name":"Neirouz"}},"stars":0,"starred":false,"owner":{"type":"team","id":"6c3fbb7e8e9eb737","login":"neirouz","name":"Neirouz","avatar_url":"https://avatars-next.observableusercontent.com/8cfae7fd81e514f31fedf68291245f72a4fed42188ea511c3286fd32a1b1a352","tier":"starter_2024"},"version":1686,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"db40004d6aaa4ed4","login":"qualityseine","name":"QualitySeine","avatar_url":"https://avatars-next.observableusercontent.com/d416d0bef0ffb13eae05856f2ac810de503ad8775cc502bf6c1716e9bae6167c","tier":null}],"members":[{"type":"team","id":"6c3fbb7e8e9eb737","login":"neirouz","name":"Neirouz","avatar_url":"https://avatars-next.observableusercontent.com/8cfae7fd81e514f31fedf68291245f72a4fed42188ea511c3286fd32a1b1a352","tier":"starter_2024","role":"editor"},{"type":"individual","id":"db40004d6aaa4ed4","login":"qualityseine","name":"QualitySeine","avatar_url":"https://avatars-next.observableusercontent.com/d416d0bef0ffb13eae05856f2ac810de503ad8775cc502bf6c1716e9bae6167c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Copie de Projet QualitySeine","cells":[{"id":1585,"value":"$34","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1593,"value":"\n \n \n

Quelques instructions

\nMerci de cliquer sur Fullscreen avant de commencer les interactions et accéder au dashboard.\nAfin de sélectionner une ou plusieurs stations, click-and-drag pour dessiner le rectangle englobant les stations.\nCliquez sur Play afin de jouer l'échelle mensuelle des temps sur la carte.\n

\n\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":820,"value":"{\n const button = html``;\n button.onclick = () => {\n const dashboard = button.parentElement.nextElementSibling;\n \n // Déplacer les tooltips dans le dashboard avant de passer en fullscreen\n document.querySelectorAll('.tooltip').forEach(tooltip => dashboard.appendChild(tooltip));\n\n dashboard.requestFullscreen();\n };\n return button;\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":677,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":835,"value":" mutable uniques=['LA SEINE A POSES 2']","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1294,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1483,"value":"$37","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1343,"value":"### Prototypage","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1345,"value":"prototypage = FileAttachment(\"prototypage2.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1559,"value":"### Analyse Exploratoire des données\n\nrajouter photo","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1609,"value":"analyse_exploratoire_rendu = FileAttachment(\"Analyse_exploratoire_rendu.twb\").xml()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1612,"value":"poissons_temps = FileAttachment(\"Capture d-écran 2025-02-22 203902.png\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1613,"value":"qlity_station = FileAttachment(\"Capture d-écran 2025-02-22 203950.png\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1614,"value":"espece_station = FileAttachment(\"Capture d-écran 2025-02-22 203920.png\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1604,"value":"analyses = FileAttachment(\"analyses.ipynb\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1607,"value":"analyses_3 = FileAttachment(\"analyses_3.ipynb\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1600,"value":"### Construction du dashboard","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1044,"value":"function enableFullscreen(button, target) {\n button.onclick = () => {\n if (target.requestFullscreen) {\n target.requestFullscreen();\n } else if (target.mozRequestFullScreen) { // Firefox\n target.mozRequestFullScreen();\n } else if (target.webkitRequestFullscreen) { // Chrome, Safari, Opera\n target.webkitRequestFullscreen();\n } else if (target.msRequestFullscreen) { // IE/Edge\n target.msRequestFullscreen();\n }\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":693,"value":"class Cell {\n constructor(element) {\n this.element = element;\n element.style.position = \"relative\";\n }\n get width() {\n return resizer(this.element, \"clientWidth\");\n }\n get height() {\n return resizer(this.element, \"clientHeight\");\n }\n embed(content) {\n content.style.position = \"absolute\";\n content.style.width = \"100%\";\n content.style.height = \"auto\";\n if (this.element.firstChild) this.element.replaceChild(content, this.element.firstChild);\n else this.element.appendChild(content);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":739,"value":"function resizer(element, dimension = \"clientWidth\") {\n return Generators.observe(notify => {\n let width = notify(element[dimension]);\n const resized = () => {\n let w = element[dimension];\n if (w !== width) notify(width = w);\n };\n window.addEventListener(\"resize\", resized);\n return () => window.removeEventListener(\"resize\", resized);\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":741,"value":"cellA = new Cell(grid.querySelector(\"[name=a]\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":846,"value":"cellB = new Cell(grid.querySelector(\"[name=b]\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":884,"value":"cellC = new Cell(grid.querySelector(\"[name=c]\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":992,"value":"cellD = new Cell(grid.querySelector(\"[name=d]\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":935,"value":"cellE = new Cell(grid.querySelector(\"[name=e]\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":756,"value":"cellF = new Cell(grid.querySelector(\"[name=f]\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":814,"value":"cellG = new Cell(grid.querySelector(\"[name=g]\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":861,"value":"cellH = new Cell(grid.querySelector(\"[name=h]\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":967,"value":"cellI = new Cell(grid.querySelector(\"[name=i]\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1213,"value":"cellJ = new Cell(grid.querySelector(\"[name=j]\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":746,"value":"widthA= cellA.width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1200,"value":"widthB= cellB.width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":888,"value":"widthC= cellC.width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":985,"value":"widthE= cellE.width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":757,"value":"widthF= cellF.width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":977,"value":"widthH= cellH.width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1217,"value":"widthJ= cellJ.width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":750,"value":"heightA= cellA.height","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1202,"value":"heightB= cellB.height","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":886,"value":"heightC= cellC.height","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":987,"value":"heightE= cellE.height","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":759,"value":"heightF= cellF.height","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":979,"value":"heightH= cellH.height","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1214,"value":"heightJ= cellJ.height","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":774,"value":"import {proj4 as proj4} from \"@neirouz/essai-3-projet\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":777,"value":"import {departements as departements} from \"@neirouz/essai-3-projet\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":762,"value":"import {viewof date_debut as chartF} with {widthF as width, heightF as height} from \"@neirouz/essai-3-projet\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":863,"value":"import {viewof qty_chimique as ChartH} with {widthH as width, heightH as height} from \"@margaux2/essai-2-projet\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1013,"value":"import {qties_chimiques as qties_chimiques} from \"@margaux2/essai-2-projet\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":796,"value":"viewof chartG = Inputs.range([2000, 12000], {label: \"Zoom\", step: 100, value:4000})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":919,"value":"import {merged_table as merged_table } from \"@margaux2/essai-2-projet\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":931,"value":"import {merged_species_database as merged_species_database } from \"@margaux2/essai-2-projet\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":770,"value":"cellA.embed(map_interactive_merged(d3, proj4, departements, merged_table, widthA, heightA, chartF, chartG, true, uniques ))\n//cellA.embed(map_interactive_copy2(d3, proj4, departements, merged_table, widthA, heightA, chartF, chartG, true, uniques ))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":845,"value":"cellB.embed(barChartInteractive(d3, proj4, departements, merged_table, widthB, heightB, chartF, chartG, uniques))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":908,"value":"cellC.embed(lineChart_many(d3 ,merged_table ,uniques, ChartH , widthC ,heightC , chartF ))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1020,"value":"cellD.embed(lineChart_many(d3 ,merged_table ,uniques, ChartI , widthC ,heightC , chartF ))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":930,"value":"cellE.embed(treemapSpecies_yearly(d3, merged_species_database, uniques,chartF.slice(0, 4), widthE, heightE))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":781,"value":"cellF.embed(viewof chartF)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":865,"value":"cellH.embed(viewof ChartH)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1015,"value":"cellI.embed(viewof ChartI)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":811,"value":"cellG.embed(viewof chartG)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1219,"value":"cellJ.embed(legendComponent(d3, uniques, widthJ, heightJ))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1602,"value":"### Fonctions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":838,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1211,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1413,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1406,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1018,"value":"viewof ChartI = Inputs.select(qties_chimiques, {label: \"Sélectionnez une quantité à étudier\", value: \"Potentiel en Hydrogène (pH)\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1539,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1306,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1349,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3f","stdlib":"1","titling":"auto"}} 33:"$32:body"