29:null 2a:["$","title",null,{"children":"Polish New D3.js Cartes population FR - option 2 cartes (node 3890) | ToutSavoirPopulation | Observable"}] 2f:T279e,map1 = { const margin = { top: rWidth>600 ? 30 : 5, right: rWidth>600 ? 20 : 5, bottom: rWidth>600 ? 20 : 5, left: rWidth>600 ? 30 : 5 }; const width = size2; // détecte le changement de continent AVANT de muter lastSelCont const isContinentChange = selCont !== lastSelCont; if (isContinentChange) { mutable lastSelCont = selCont; mutable mapZoomState = { k: 1, x: 0, y: 0 }; } const useFullWidth = selCont === "Monde"; // --- affichage pour le filtre par continent --- const displayFeatures = selCont === "Monde" ? world.features : world.features.filter(d => { const isoSet = continentISO3Map[selCont]; return isoSet && isoSet.has(d.properties.iso3); }); function manualLonLatBounds(features, minLon = -180, maxLon = 180) { let minLa = 90, maxLa = -90, minLo = 180, maxLo = -180; features .filter(f => f.geometry != null) .forEach(f => { const coordsList = f.geometry.type === "MultiPolygon" ? f.geometry.coordinates.flat(1) : f.geometry.coordinates; coordsList.forEach(ring => { ring.forEach(([lon, lat]) => { const clampedLon = Math.min(Math.max(lon, minLon), maxLon); if (clampedLon < minLo) minLo = clampedLon; if (clampedLon > maxLo) maxLo = clampedLon; if (lat < minLa) minLa = lat; if (lat > maxLa) maxLa = lat; }); }); }); return [minLo, minLa, maxLo, maxLa]; } function bboxToPolygon([minLo, minLa, maxLo, maxLa]) { return { type: "Polygon", coordinates: [[ [minLo, minLa], [minLo, maxLa], [maxLo, maxLa], [maxLo, minLa], [minLo, minLa] ]] }; } const boundsExclusions = { "Amérique septentrionale": { minLon: -140, maxLon: -50 }, "Océanie": { minLon: 110, maxLon: 180 } }; const displayCollection = { type: "FeatureCollection", features: displayFeatures }; const exclusion = boundsExclusions[selCont]; const boundsCollection = selCont === "Monde" ? { type: "Sphere" } : bboxToPolygon( manualLonLatBounds( displayFeatures.filter(d => d.properties.iso3 !== "RUS"), exclusion ? exclusion.minLon : -180, exclusion ? exclusion.maxLon : 180 ) ); const continentLonOffset = { "Océanie": 160, "Amérique septentrionale": 0 }[selCont] || 0; const proj_ = projection; proj_.rotate([longitude + continentLonOffset, 0]); const sphere = {type: "Sphere"}; proj_.fitExtent([[margin.left, margin.top], [width - margin.right, 100000]], boundsCollection); const path0 = d3.geoPath(proj_); const [[x0, y0], [x1, y1]] = path0.bounds(boundsCollection); const height = Math.ceil(y1 - y0) + margin.top + margin.bottom; proj_.fitExtent([[margin.left, margin.top], [width - margin.right, height - margin.bottom]], boundsCollection); const path = d3.geoPath(proj_); const isChoropleth = typeMap === "Taux de croissance annuel"; const container = html`

`; // --- effet "zoom" doux au changement de continent (animation CSS déclarée dans le `34:T5ca,getIndicatorRows = function(dfData, statKey, countryRow) { const continent = countryRow["région1"].trim(); const rawSubregion = countryRow["région2"] ? countryRow["région2"].trim() : null; // pas de sous-région si région2 est "--" OU identique au continent (cas Amérique septentrionale) const hasSubregion = rawSubregion && rawSubregion !== "--" && rawSubregion.toLowerCase() !== continent.toLowerCase(); const subregion = hasSubregion ? rawSubregion : null; const worldRow = dfData.find(r => r["région1"].trim() === "Monde" && r["Pays"].trim() === "Monde"); const continentRow = dfData.find(r => r["région1"].trim() === "Monde" && r["Pays"].trim().toLowerCase() === continent.toLowerCase() ); const subregionRow = subregion ? dfData.find(r => r["région1"].trim().toLowerCase() === continent.toLowerCase() && r["région2"] && r["région2"].trim() === "--" && r["Pays"].trim().toLowerCase() === subregion.toLowerCase() ) : null; return [ worldRow ? { label: "Monde", value: parseFr(worldRow[statKey]), level: "world" } : null, continentRow ? { label: continent, value: parseFr(continentRow[statKey]), level: "continent" } : null, subregionRow ? { label: subregion, value: parseFr(subregionRow[statKey]), level: "subregion" } : null, { label: countryRow["Pays"], value: parseFr(countryRow[statKey]), level: "country" } ].filter(d => d && d.value != null); }35:T696,tooltipDotPlot = function(items, choroObj) { if (!items.length) return ""; const sorted = items.slice().sort((a, b) => a.value - b.value); const scaleMin = choroObj.breaks[0]; const scaleMax = choroObj.breaks[choroObj.breaks.length - 1]; const width = 220; const labelW = 80; const valueW = 50; const trackX0 = labelW + valueW + 5; const trackWidth = width - trackX0 - 6; const rowHeight = 17; const height = sorted.length * rowHeight + 0; const x = (v) => trackX0 + ((v - scaleMin) / (scaleMax - scaleMin)) * trackWidth; const rowsSvg = sorted.map((d, i) => { const y = 8 + i * rowHeight; const cx = x(d.value); const isCountry = d.level === "country"; const dotColor = choroObj.colorize(d.value); const dotRadius = isCountry ? 4 : 4; const dotStroke = isCountry ? "#222330" : "none"; const dotStrokeWidth = isCountry ? 1 : 0; const labelWeight = isCountry ? "600" : "400"; return ` ${d.label.length > 15 ? d.label.slice(0, 15) + "…" : d.label} ${d.value > 0 ? "+" : ""}${d.value.toFixed(1).replace(".", ",")} `; }).join(""); return ``; }36:T425,tooltipListLight = function(items, choroObj) { if (!items.length) return ""; const sorted = items.slice().sort((a, b) => a.value - b.value); const rows = sorted.map(d => { const isCountry = d.level === "country"; const dotColor = choroObj.colorize(d.value); const dotSize = isCountry ? 5 : 5; const dotBorder = isCountry ? "1px solid #222330" : "none"; const weight = isCountry ? "600" : "400"; return `

${d.label} ${d.value > 0 ? "+" : ""}${d.value.toFixed(1).replace(".", ",")}

`; }).join(""); return `

${rows}

`; }37:Tde8,cssGeneral = html` `38:T3778,function legendClasses(source, { length = 300, // longueur de la rampe (axe principal, selon orientation) thickness = 16, // épaisseur des rectangles de couleur tickSize = 5, decimals = 0, // nombre de décimales (0 à 3), ignoré si "format" fourni decimalSeparator = ".", // "." ou ",", ignoré si "format" fourni format = null, // si fourni, prend le dessus sur decimals/decimalSeparator minLabelSpacing = 6, // marge de respiration mini entre labels (en plus de leur largeur mesurée) title = null, orientation = "horizontal", // "horizontal" | "vertical" labelReserve = 34, // espace réservé aux labels en mode vertical noData = null, // { label, color, show, stroke, strokeWidth }. Si null, auto-détecté depuis "source" (geoviz) cssWidth = null, // --- sélection groupée ("tout sélectionner / tout désélectionner") --- selectAll = false, // affiche le bouton tout sélectionner/désélectionner lang = "fr", // "fr" | "en" | "jp" labels = {}, // surcharge ponctuelle du dictionnaire de traduction (ex: { selectAll: "..." }) // --- options esthétiques --- fontSize = null, // taille des labels : nombre (px) OU chaîne CSS ("clamp(9px, 1vw, 12px)"...). null = défaut CSS (10px) titleFontSize = null, // taille du titre : nombre (px) OU chaîne CSS. null = calc(fontSize * 1.2) selectAllFontSize = null, // taille du bouton tout sélectionner/désélectionner : nombre (px) OU chaîne CSS. null = fontSize fontFamily = null, // police des labels/titre. null = défaut CSS (sans-serif) strokeColor = "#fff", // couleur du contour entre les classes de la rampe strokeWidth = 0.5, // épaisseur du contour entre les classes de la rampe deselectedColor = null, // couleur unie pour les classes désélectionnées. null = comportement par défaut (opacité réduite) deselectedOpacity = 0.25 // opacité appliquée aux classes désélectionnées si deselectedColor n'est pas fourni } = {}) { const isVertical = orientation === "vertical"; const width = length; // alias interne, garde le corps de fonction lisible const height = thickness; // --- dictionnaire de traduction, même principe que legend() --- const dict = { fr: { selectAll: "Tout sélectionner", deselectAll: "Tout désélectionner" }, en: { selectAll: "Select all", deselectAll: "Select none" }, jp: { selectAll: "すべて選択", deselectAll: "すべて選択を解除" } }; const t = { ...(dict[lang] ?? dict.fr), ...labels }; const iconAllOn = ``; const iconAllOff = ``; // format construit à partir de decimals/decimalSeparator, sauf si "format" est fourni const fmt = format || ((v) => { const s = d3.format(`.${decimals}f`)(v); return decimalSeparator === "," ? s.replace(".", ",") : s; }); // --- résolution de la source : scale d3 classique OU objet { breaks, colors } (type geoviz choro()) --- const isD3Scale = typeof source?.range === "function" && typeof source?.invertExtent === "function"; const isBreaksColors = Array.isArray(source?.breaks) && Array.isArray(source?.colors); let colors, classes, colorize, autoNoData = null; if (isD3Scale) { colors = source.range(); classes = colors.map((color, i) => { const [x0, x1] = source.invertExtent(color); return { index: i, x0, x1, color }; }); colorize = (value) => colors.indexOf(source(value)); } else if (isBreaksColors) { const breaks = source.breaks; colors = source.colors; classes = colors.map((color, i) => ({ index: i, x0: breaks[i], x1: breaks[i + 1], color })); colorize = typeof source.colorize === "function" ? (value) => classes.findIndex(c => c.color === source.colorize(value)) : (value) => { if (value == null || Number.isNaN(value)) return -1; for (let i = 0; i < classes.length; i++) { const { x0, x1 } = classes[i]; const inRange = i === classes.length - 1 ? (value >= x0 && value <= x1) : (value >= x0 && value < x1); if (inRange) return i; } return -1; }; if (source.missing) { autoNoData = { label: "Pas de données", color: source.missing_fill || "#ccc", show: true }; } } else { throw new Error( "legendClasses: source non reconnue. Attendu : une échelle d3 (.range()/.invertExtent()) ou un objet { breaks, colors }." ); } const n = colors.length; const segSize = width / n; const active = new Set(classes.map(c => c.index)); // --- config "pas de données" : fusion entre l'auto-détection (geoviz) et les surcharges explicites --- const resolvedNoData = (autoNoData || noData) ? { ...autoNoData, ...noData } : null; const showNoData = !!(resolvedNoData && resolvedNoData.show !== false); const noDataColor = (resolvedNoData && resolvedNoData.color) || "#ccc"; const noDataLabel = (resolvedNoData && resolvedNoData.label) || "Pas de données"; const noDataStroke = (resolvedNoData && resolvedNoData.stroke) || "#999"; const noDataStrokeWidth = (resolvedNoData && resolvedNoData.strokeWidth) ?? strokeWidth; const noDataWidth = isVertical ? height : segSize; const noDataHeight = height; const noDataGap = 10; // --- dimensions totales du SVG (viewBox) --- let svgWidth, svgHeight; if (!isVertical) { svgWidth = width; svgHeight = height + tickSize + 16 + (showNoData ? noDataGap + noDataHeight : 0); } else { svgWidth = Math.max(height + tickSize + labelReserve, showNoData ? noDataWidth + 90 : 0); svgHeight = width + (showNoData ? noDataGap + noDataHeight : 0); } // --- DOM --- const root = html`

`; root.style.width = "100%"; if (fontSize !== null) { root.style.setProperty("--legend-font-size", typeof fontSize === "number" ? `${fontSize}px` : fontSize); } if (titleFontSize !== null) { root.style.setProperty("--legend-title-font-size", typeof titleFontSize === "number" ? `${titleFontSize}px` : titleFontSize); } if (selectAllFontSize !== null) { root.style.setProperty("--legend-selectall-font-size", typeof selectAllFontSize === "number" ? `${selectAllFontSize}px` : selectAllFontSize); } if (fontFamily !== null) { root.style.setProperty("--legend-font-family", fontFamily); } if (cssWidth) { root.style.maxWidth = "none"; root.style.width = cssWidth; } else if (!isVertical) { root.style.maxWidth = `${width}px`; } else { root.style.maxWidth = `${svgWidth}px`; } // --- header : titre + bouton "tout sélectionner/désélectionner", même agencement que legend() --- let selectAllBtn = null; if (title || selectAll) { const header = html`

`; if (title) { header.appendChild(html`

${title}

`); } if (selectAll) { selectAllBtn = html`