2a:null 2b:["$","title",null,{"children":"Projet QualitySeine | Neirouz | Observable"}] 31:T5c9,

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)

32:T98b,grid = html`

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

`33: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.

34: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(); } 35: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(); } 36: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(); } 37:T1a49,function lineChart_many(d3, merged_table, stationNames, selected_param, width1, height1, selectedDate, acceptable) { 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 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 acceptableValues = { "Température de l'Eau": { max: 25 }, "Potentiel en Hydrogène (pH)": { min: 6, max: 9 }, "Oxygène dissous": { min: 5 }, "Taux de saturation en oxygène": { min: 80, max: 120 }, "Nitrites": { max: 0.5 }, "Nitrates": { max: 10 }, "Carbone Organique": { min: 2, max: 10 }, "Orthophosphates (PO4)": { max: 0.1} }; const selected_rslt = selected_rslt_map[selected_param]; const selected_unit = unitMap[selected_param] || ""; const selected_limits = acceptableValues[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 (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"); } } if (acceptable && selected_limits && (selected_limits.min !== undefined || selected_limits.max !== undefined)) { const minY = Math.min( height,selected_limits.min !== undefined ? yScale(selected_limits.min) : height ); const maxY = Math.max( 0, selected_limits.max !== undefined ? yScale(selected_limits.max) : 0); if (minY > maxY) { chartGroup.append("rect") .attr("x", 0) .attr("y", maxY) .attr("width", width) .attr("height", minY - maxY) .attr("fill", "rgba(0, 255, 0, 0.2)") .attr("stroke", "green") .attr("stroke-width", 2) .attr("class", "limit-zone"); } } 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].toFixed(2)} ${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(); } 38:T3764,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().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(); } 39:[{"id":"cc6128b7df658e60241b77b81d60440f445d92128e0181b2fcb345379854c09a063bfea73fe2f2ff4e76ec1dfdb9f3f1e9e6721888a5c9c5e4e59dbb4255860a","href":"https://static.observableusercontent.com/files/cc6128b7df658e60241b77b81d60440f445d92128e0181b2fcb345379854c09a063bfea73fe2f2ff4e76ec1dfdb9f3f1e9e6721888a5c9c5e4e59dbb4255860a","name":"prototypage.jpg","type":"image/jpeg","lastModified":1739962645869.524,"size":2726114},{"id":"98f3a11f030046bf575bf94da814a1c920458f4b94e8c394ed2851b34c476148b0e83d29df460d28ea2186e115242b5c1901e66d8cb02ae170fccf844402fef5","href":"https://static.observableusercontent.com/files/98f3a11f030046bf575bf94da814a1c920458f4b94e8c394ed2851b34c476148b0e83d29df460d28ea2186e115242b5c1901e66d8cb02ae170fccf844402fef5","name":"prototypage1@1.png","type":"image/png","lastModified":1740124600005.845,"size":1131060},{"id":"65ed615596c8249d5696c0158c7235dbe6f6c8d27ea51046da45f3cd434b6fd6f276dbdb00703cf2acf8b9ed3c1bd2d75fedb81d004dd46c9fd9ae87aa1e8e42","href":"https://static.observableusercontent.com/files/65ed615596c8249d5696c0158c7235dbe6f6c8d27ea51046da45f3cd434b6fd6f276dbdb00703cf2acf8b9ed3c1bd2d75fedb81d004dd46c9fd9ae87aa1e8e42","name":"prototypage2.png","type":"image/png","lastModified":1740124658062.312,"size":1127511},{"id":"4fa636444aeb0dfdb33fdaaa86b4e64ac8c1791e590a041b29b48226b87a7a6a2efeeea64e0fb4cadc8cb28e5a373bc57a16f8982ed7bb4bcdc2fa49132472d4","href":"https://static.observableusercontent.com/files/4fa636444aeb0dfdb33fdaaa86b4e64ac8c1791e590a041b29b48226b87a7a6a2efeeea64e0fb4cadc8cb28e5a373bc57a16f8982ed7bb4bcdc2fa49132472d4","name":"Analyse_exploratoire_rendu.twb","type":"application/xml","lastModified":1740252953766.865,"size":823122},{"id":"b60dc737b6a467a0cc5f027fdc71fe612112a6957ae020b73873bab1b8440ff69eeba6e8e7daffc51293ab1dc737cc6ad2d3ea1fa5f24b29b74f40b0f15d10ad","href":"https://static.observableusercontent.com/files/b60dc737b6a467a0cc5f027fdc71fe612112a6957ae020b73873bab1b8440ff69eeba6e8e7daffc51293ab1dc737cc6ad2d3ea1fa5f24b29b74f40b0f15d10ad","name":"Capture d-écran 2025-02-22 203902.png","type":"image/png","lastModified":1740253220257.418,"size":140137},{"id":"7fba6c574c553e3a2d9eb3e7508b0523d46d2d1898d5d58b18c54a26ccea579b6222e47dac4f95f6b5dd0c4bbe4cc30ccf644542634d31b8a6b3484779a6f017","href":"https://static.observableusercontent.com/files/7fba6c574c553e3a2d9eb3e7508b0523d46d2d1898d5d58b18c54a26ccea579b6222e47dac4f95f6b5dd0c4bbe4cc30ccf644542634d31b8a6b3484779a6f017","name":"Capture d-écran 2025-02-22 203920.png","type":"image/png","lastModified":1740253220319.844,"size":169535},{"id":"963fdc0682b1e5100b3e815141d7178e94d6fcdcef0f5a6f9a779ed456d3f5fcc5366d89b028886e3f9a94e2e39b89cd5116fd2c8e1434a7ea561309d3bdbede","href":"https://static.observableusercontent.com/files/963fdc0682b1e5100b3e815141d7178e94d6fcdcef0f5a6f9a779ed456d3f5fcc5366d89b028886e3f9a94e2e39b89cd5116fd2c8e1434a7ea561309d3bdbede","name":"Capture d-écran 2025-02-22 203950.png","type":"image/png","lastModified":1740253220289.152,"size":164940},{"id":"ba706eba09750e94ef7a67b14c1fe2ca083831383cb85ec9d50170cfe279f04d940a0d7a46717dc159332db509e9c20dd74ab1677a6959ef2d5189cc54322cb7","href":"https://static.observableusercontent.com/files/ba706eba09750e94ef7a67b14c1fe2ca083831383cb85ec9d50170cfe279f04d940a0d7a46717dc159332db509e9c20dd74ab1677a6959ef2d5189cc54322cb7","name":"analyses.ipynb","type":"application/octet-stream","lastModified":1740324964619.817,"size":95598},{"id":"a5840ffa90e819090256ba1d6bbcfaec3f15aef33810b1edf32ac8df66db63ea060682255ad095439efa7e1ea119016967d0fde8580e0340658f4d5cc47eed5f","href":"https://static.observableusercontent.com/files/a5840ffa90e819090256ba1d6bbcfaec3f15aef33810b1edf32ac8df66db63ea060682255ad095439efa7e1ea119016967d0fde8580e0340658f4d5cc47eed5f","name":"analyses_3.ipynb","type":"application/octet-stream","lastModified":1740333593221.838,"size":38303}] 2e:{"id":"c71c65caebe28b64","slug":"projet-quality-seine","title":"Projet QualitySeine","thumbnail":"22c96239e5c14d40f4a26d2fb3835096ea34cf7f95ad0a12e19012a4b1d9eafa","access_level":"public","create_time":"$D2025-02-16T09:53:35.174Z","update_time":"$D2025-03-12T07:58:54.319Z","view_time":null,"first_public_time":"$D2025-02-17T06:51:22.315Z","fork":{"id":"3b49a845ee1394d0","slug":"essai-3-projet","title":"Essai 3 Projet","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":1888,"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,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"Projet QualitySeine","cells":[{"id":1585,"value":"$31","pinned":false,"hidden":false,"mode":"html"},{"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"},{"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"},{"id":677,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1483,"value":"$33","pinned":false,"hidden":false,"mode":"html"},{"id":1732,"value":"\n \n \n

Prototypage

\n\n","pinned":false,"hidden":false,"mode":"html"},{"id":1345,"value":"prototypage = FileAttachment(\"prototypage2.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1559,"value":"\n \n \n

Analyse exploratoire des données

\n\n","pinned":false,"hidden":false,"mode":"html"},{"id":1609,"value":"analyse_exploratoire_rendu = FileAttachment(\"Analyse_exploratoire_rendu.twb\").xml()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1612,"value":"poissons_temps = FileAttachment(\"Capture d-écran 2025-02-22 203902.png\").image()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1613,"value":"qlity_station = FileAttachment(\"Capture d-écran 2025-02-22 203950.png\").image()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1614,"value":"espece_station = FileAttachment(\"Capture d-écran 2025-02-22 203920.png\").image()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1622,"value":"### Pré-traitement des données","pinned":false,"hidden":false,"mode":"md"},{"id":1604,"value":"analyses = FileAttachment(\"analyses.ipynb\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1607,"value":"analyses_3 = FileAttachment(\"analyses_3.ipynb\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1600,"value":"### Construction du dashboard","pinned":false,"hidden":false,"mode":"md"},{"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"},{"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"},{"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"},{"id":741,"value":"cellA = new Cell(grid.querySelector(\"[name=a]\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":846,"value":"cellB = new Cell(grid.querySelector(\"[name=b]\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":884,"value":"cellC = new Cell(grid.querySelector(\"[name=c]\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":992,"value":"cellD = new Cell(grid.querySelector(\"[name=d]\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":935,"value":"cellE = new Cell(grid.querySelector(\"[name=e]\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":756,"value":"cellF = new Cell(grid.querySelector(\"[name=f]\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":814,"value":"cellG = new Cell(grid.querySelector(\"[name=g]\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":861,"value":"cellH = new Cell(grid.querySelector(\"[name=h]\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":967,"value":"cellI = new Cell(grid.querySelector(\"[name=i]\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1213,"value":"cellJ = new Cell(grid.querySelector(\"[name=j]\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1659,"value":"cellCH = new Cell(grid.querySelector(\"[name=ch]\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":746,"value":"widthA= cellA.width","pinned":false,"hidden":false,"mode":"ojs"},{"id":1200,"value":"widthB= cellB.width","pinned":false,"hidden":false,"mode":"ojs"},{"id":888,"value":"widthC= cellC.width","pinned":false,"hidden":false,"mode":"ojs"},{"id":985,"value":"widthE= cellE.width","pinned":false,"hidden":false,"mode":"ojs"},{"id":757,"value":"widthF= cellF.width","pinned":false,"hidden":false,"mode":"ojs"},{"id":977,"value":"widthH= cellH.width","pinned":false,"hidden":false,"mode":"ojs"},{"id":1217,"value":"widthJ= cellJ.width","pinned":false,"hidden":false,"mode":"ojs"},{"id":1661,"value":"widthCH= cellCH.width","pinned":false,"hidden":false,"mode":"ojs"},{"id":750,"value":"heightA= cellA.height","pinned":false,"hidden":false,"mode":"ojs"},{"id":1202,"value":"heightB= cellB.height","pinned":false,"hidden":false,"mode":"ojs"},{"id":886,"value":"heightC= cellC.height","pinned":false,"hidden":false,"mode":"ojs"},{"id":987,"value":"heightE= cellE.height","pinned":false,"hidden":false,"mode":"ojs"},{"id":759,"value":"heightF= cellF.height","pinned":false,"hidden":false,"mode":"ojs"},{"id":979,"value":"heightH= cellH.height","pinned":false,"hidden":false,"mode":"ojs"},{"id":1214,"value":"heightJ= cellJ.height","pinned":false,"hidden":false,"mode":"ojs"},{"id":1657,"value":"heightCH= cellCH.height","pinned":false,"hidden":false,"mode":"ojs"},{"id":774,"value":"import {proj4 as proj4} from \"@neirouz/essai-3-projet\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":777,"value":"import {departements as departements} from \"@neirouz/essai-3-projet\"","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":1013,"value":"import {qties_chimiques as qties_chimiques} from \"@margaux2/essai-2-projet\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":796,"value":"viewof chartG = Inputs.range([2000, 12000], {label: \"Zoom\", step: 100, value:3200})","pinned":false,"hidden":false,"mode":"ojs"},{"id":919,"value":"import {merged_table as merged_table } from \"@margaux2/essai-2-projet\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":931,"value":"import {merged_species_database as merged_species_database } from \"@margaux2/essai-2-projet\"","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":845,"value":"cellB.embed(barChartInteractive(d3, proj4, departements, merged_table, widthB, heightB, chartF, chartG, uniques))","pinned":true,"hidden":false,"mode":"ojs"},{"id":908,"value":"cellC.embed(lineChart_many(d3 ,merged_table ,uniques, ChartH , widthC ,heightC , chartF, acceptable ))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1020,"value":"cellD.embed(lineChart_many(d3 ,merged_table ,uniques, ChartI , widthC ,heightC , chartF , acceptable))","pinned":true,"hidden":false,"mode":"ojs"},{"id":930,"value":"cellE.embed(treemapSpecies_yearly(d3, merged_species_database, uniques,chartF.slice(0, 4), widthE, heightE))","pinned":true,"hidden":false,"mode":"ojs"},{"id":781,"value":"cellF.embed(viewof chartF)","pinned":true,"hidden":false,"mode":"ojs"},{"id":865,"value":"cellH.embed(viewof ChartH)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1015,"value":"cellI.embed(viewof ChartI)","pinned":true,"hidden":false,"mode":"ojs"},{"id":811,"value":"cellG.embed(viewof chartG)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1219,"value":"cellJ.embed(legendComponent(d3, uniques, widthJ, heightJ))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1663,"value":"cellCH.embed(viewof toggle1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1847,"value":"import {Checkbox} from \"@observablehq/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1666,"value":"viewof toggle1 = Checkbox([\"Val. acceptables\"])","pinned":true,"hidden":false,"mode":"ojs"},{"id":1852,"value":"acceptable = !!toggle1.length","pinned":true,"hidden":false,"mode":"ojs"},{"id":835,"value":" mutable uniques=['LA SEINE A POSES 2']","pinned":true,"hidden":false,"mode":"ojs"},{"id":1602,"value":"### Fonctions","pinned":false,"hidden":false,"mode":"md"},{"id":838,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1211,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1413,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":1406,"value":"$37","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":1294,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W39","stdlib":"1","titling":"auto"}} 2f:"$2e:body"