28:null 29:["$","title",null,{"children":"choropleth <=> dorling (work in progress) / node 25081 | Marc Thevenin | Observable"}] 2e:T6af,viewof mapMode = { const form = html``; // Style actif const labels = form.querySelectorAll("label"); const inputs = form.querySelectorAll("input"); const bgColors = ["#818181","#818181","#818181"]; function updateStyles() { labels.forEach((lbl, i) => { const active = inputs[i].checked; lbl.style.background = active ? bgColors[i] : "white"; lbl.style.color = active ? "white" : bgColors[i]; }); } updateStyles(); form.addEventListener("change", () => updateStyles()); // Valeur exposée form.value = "animated"; form.addEventListener("change", e => { form.value = e.target.value; form.dispatchEvent(new CustomEvent("input")); }); return form; }2f:T819,// Paramètres partagés — responsive mapParams = { const W = width>1000 ? 900 : width-16; const H = Math.round(W * 480 / 900); const projFn = projChoix === "Natural Earth" ? d3.geoNaturalEarth1() : d3.geoOrthographic(); const projection = projFn.fitSize([W, H], {type: "Sphere"}); const path = d3.geoPath(projection); // ── Échelle couleur QUINTILES ── const features0 = topojson.feature(un, un.objects.maptopo).features; const lookup0 = new Map(dataClean.map(d => [d.iso3, d])); const tmiValues = features0 .map(f => lookup0.get(f.properties.iso3)?.indic) .filter(v => v != null && isFinite(v)) .sort(d3.ascending); const qBreaks = [0, 0.2, 0.4, 0.6, 0.8, 1.0].map(p => d3.quantileSorted(tmiValues, p) ); const qColors = col; const colorScale = d3.scaleThreshold() .domain(qBreaks.slice(1, 5)) .range(qColors); const features = worldEnriched.features.filter(f => f.geometry); // Données bulles — on utilise d3.geoCentroid puis projection() // au lieu de path.centroid() qui retourne NaN avec geoOrthographic // pour les pays dont une partie est derrière le globe const bubbleFeatures = features.filter(f => f.properties.pop && f.properties.indic); const maxPop = d3.max(bubbleFeatures, f => f.properties.pop); const rScale = d3.scaleSqrt().domain([0, maxPop]).range([0, 28]); const bubbleData = bubbleFeatures.map(f => { // Centroïde géographique [lon, lat] puis projection en [x, y] const geo = d3.geoCentroid(f); const projected = projection(geo); if (!projected) return null; const [x, y] = projected; return { x, y, x0: x, y0: y, geo, // ← on garde le centroïde géo pour le globe pop: f.properties.pop, indic: f.properties.indic, pays: f.properties.pays, iso3: f.properties.iso3, r: rScale(f.properties.pop) }; }).filter(d => d !== null && isFinite(d.x) && isFinite(d.y)); return { width: W, height: H, projection, path, colorScale, qBreaks, qColors, features, bubbleData, rScale }; }30:T3740,// ── VISUALISATION ANIMÉE PRINCIPALE ────────────────────────────────────────── animatedMap = { const { width, height, projection, path, colorScale, qBreaks, qColors, features, bubbleData, rScale } = mapParams; const isGlobe = projChoix === "Globe"; // ── Tooltip ── d3.select("body").selectAll(".anim-tooltip").remove(); const tooltip = d3.select("body").append("div") .attr("class", "anim-tooltip") .style("position", "absolute") .style("background", "rgba(20,20,20,0.82)") .style("color", "#fff") .style("padding", "7px 12px") .style("border-radius", "5px") .style("font-family", "poppins") .style("font-size", "12px") .style("pointer-events", "none") .style("opacity", 0) .style("line-height", "1.6"); // ── SVG ── const svg = d3.create("svg") .attr("width", width).attr("height", height+65) .style("font-family", "poppins, sans-serif") .style("background", "white") .style("border-radius", "6px") .style("display", "block"); const defs = svg.append("defs"); defs.append("clipPath").attr("id", "clip-wipe-in") .append("rect").attr("id", "wipe-rect-in") .attr("x", 0).attr("y", 0).attr("width", 0).attr("height", height); defs.append("clipPath").attr("id", "clip-wipe-out") .append("rect").attr("id", "wipe-rect-out") .attr("x", 0).attr("y", 0).attr("width", width).attr("height", height); // ── Groupe zoomable ── const mapGroup = svg.append("g").attr("class", "map-group"); // Fond océan const spherePath = mapGroup.append("path") .datum({type: "Sphere"}) .attr("d", path) .attr("fill", "white") .attr("stroke", "#ccc") .attr("stroke-width", 0.5); // Graticule const graticulePath = mapGroup.append("path") .datum(d3.geoGraticule()()) .attr("d", path) .attr("fill", "white") .attr("stroke", "#b0c8dd") .attr("stroke-width", 0.3); // ── Couche choroplèthe ── const choroplethLayer = mapGroup.append("g").attr("class", "choropleth-layer"); const choroPaths = choroplethLayer.selectAll("path") .data(features) .join("path") .attr("d", path) .attr("fill", d => d.properties.indic ? colorScale(d.properties.indic) : "#e0e0e0") .attr("stroke", "white") .attr("stroke-width", 0.4) .on("mouseover", (event, d) => { const p = d.properties; if (!p.pays) return; tooltip.style("opacity", 1) .html(`${p.pays}
${select}: ${p.indic}
Population : ${(p.pop/1000).toFixed(1)} M`); }) .on("mousemove", event => tooltip.style("left", (event.pageX+14)+"px").style("top", (event.pageY-32)+"px")) .on("mouseout", () => tooltip.style("opacity", 0)); // ── Couche Dorling ── const bubbleLayer = mapGroup.append("g").attr("class", "bubble-layer"); const bubbleBgPaths = bubbleLayer.append("g").selectAll("path") .data(features) .join("path") .attr("d", path) .attr("fill", "#d1d1d1") .attr("stroke", "#222330") .attr("stroke-width", 0.3); // Simulation Dorling sans chevauchement // On utilise x0/y0 (positions initiales via geoCentroid+projection) comme ancres const nodes = bubbleData.map(d => ({...d})); const simulation = d3.forceSimulation(nodes) .force("collide", d3.forceCollide(d => d.r + 0.8).strength(0.85).iterations(10)) .force("x", d3.forceX(d => d.x0).strength(0.12)) .force("y", d3.forceY(d => d.y0).strength(0.12)) .stop(); for (let i = 0; i < 200; i++) simulation.tick(); const sorted = nodes.slice().sort((a, b) => b.pop - a.pop); const bubbleCircles = bubbleLayer.append("g").selectAll("circle") .data(sorted) .join("circle") .attr("cx", d => d.x).attr("cy", d => d.y) .attr("r", d => width>600 ? d.r : d.r/2 ) .attr("fill", d => colorScale(d.indic)) .attr("fill-opacity", 0.92) .attr("stroke", "black").attr("stroke-width", width>600 ? 0.3: 0.1) .on("mouseover", (event, d) => { tooltip.style("opacity", 1) .html(`${d.pays}
${select}: ${d.indic}
Population : ${(d.pop/1000).toFixed(1)} M`); }) .on("mousemove", event => tooltip.style("left", (event.pageX+14)+"px").style("top", (event.pageY-32)+"px")) .on("mouseout", () => tooltip.style("opacity", 0)); // ── Légende quintiles ── const legendQ = svg.append("g").attr("class", "legend-quintiles") .attr("transform", `translate(${10},${height -10})`); legendQ.append("rect").attr("x", -6).attr("y", -14).attr("width", 196).attr("height", 82) .attr("fill", "white").attr("fill-opacity", 0.2).attr("rx", 4) .attr("stroke", "#ccc").attr("stroke-width", 0.1); legendQ.append("text").attr("font-size", 9).attr("fill", "#333").attr("y", -2).html(`${select}`); const qLabels = [ `< ${qBreaks[1].toFixed(1)}`, `${qBreaks[1].toFixed(1)} – ${qBreaks[2].toFixed(1)}`, `${qBreaks[2].toFixed(1)} – ${qBreaks[3].toFixed(1)}`, `${qBreaks[3].toFixed(1)} – ${qBreaks[4].toFixed(1)}`, `≥ ${qBreaks[4].toFixed(1)}` ]; qColors.forEach((c, i) => { const row = legendQ.append("g").attr("transform", `translate(0, ${i * 13 + 6})`); row.append("rect").attr("width", 10).attr("height", 10).attr("fill", c).attr("stroke", "#aaa").attr("stroke-width", 0.5); row.append("text").attr("x", 14).attr("y", 9).attr("font-size", 9).attr("fill", "#333").text(qLabels[i]); }); // ── Légende taille bulles ── const szLegend = svg.append("g").attr("class", "size-legend") .attr("transform", `translate(${width-115},${height - 10})`); szLegend.append("text").attr("font-size", 9).attr("fill", "#414141").attr("y", -2).text("Population (en milliers)"); [[50000,"50k"],[200000,"200k"],[1000000,"1M"]].reduce((cx, [s, label]) => { const r = rScale(s); szLegend.append("circle").attr("cx", cx+r).attr("cy", r+2).attr("r", r) .attr("fill", "none").attr("stroke", "#414141").attr("stroke-width", 1); szLegend.append("text").attr("x", cx+r).attr("y", r*2+11) .attr("text-anchor","middle").attr("font-size", 9).attr("fill","#414141").text(label); return cx + r*2 + 10; }, 0); // ── Titres ── const titleEl = svg.append("text").attr("x", 14).attr("y", 22) .attr("font-size", 15).attr("font-weight", "bold").attr("fill", "#1a1a2e"); const subtitleEl = svg.append("text").attr("x", 14).attr("y", 38) .attr("font-size", 9).attr("fill", "#555"); // ── Visibilité & position des bulles sur le globe ── // Utilise d3.geoDistance pour tester si le centroïde est sur la face visible function isVisible(geo) { const rotate = projection.rotate(); const center = [-rotate[0], -rotate[1]]; return d3.geoDistance(geo, center) < Math.PI / 2; } function redrawGlobe() { spherePath.attr("d", path); graticulePath.attr("d", path); choroPaths.attr("d", path); bubbleBgPaths.attr("d", path); bubbleCircles.each(function(d) { // d.geo est le centroïde géographique [lon, lat] stocké dans bubbleData if (!d.geo || !isVisible(d.geo)) { d3.select(this).attr("visibility", "hidden"); return; } const proj = projection(d.geo); if (!proj) { d3.select(this).attr("visibility", "hidden"); return; } d3.select(this) .attr("visibility", "visible") .attr("cx", proj[0]) .attr("cy", proj[1]); }); } // ── ZOOM & DRAG selon la projection ── let activeZoom; let currentZoomTransform = d3.zoomIdentity; if (isGlobe) { svg.style("cursor", "grab"); // Zoom molette uniquement activeZoom = d3.zoom() .scaleExtent([0.5, 8]) .filter(event => event.type === "wheel") .on("zoom", event => { currentZoomTransform = event.transform; mapGroup.attr("transform", event.transform); redrawGlobe(); }); svg.call(activeZoom); // Drag pour rotation — coordonnées corrigées par le zoom let rotState = {}; const globeDrag = d3.drag() .on("start", function(event) { svg.style("cursor", "grabbing"); const [mx, my] = d3.pointer(event, svg.node()); const [ux, uy] = currentZoomTransform.invert([mx, my]); const inv = projection.invert([ux, uy]); rotState.v0 = inv ? versor.cartesian(inv) : [1, 0, 0]; rotState.r0 = projection.rotate(); rotState.q0 = versor(rotState.r0); }) .on("drag", function(event) { if (!rotState.v0) return; const [mx, my] = d3.pointer(event, svg.node()); const [ux, uy] = currentZoomTransform.invert([mx, my]); const savedRotate = projection.rotate(); projection.rotate(rotState.r0); const inv = projection.invert([ux, uy]); projection.rotate(savedRotate); if (!inv) return; const v1 = versor.cartesian(inv); const q1 = versor.multiply(rotState.q0, versor.delta(rotState.v0, v1)); projection.rotate(versor.rotation(q1)); redrawGlobe(); }) .on("end", function() { svg.style("cursor", "grab"); }); svg.call(globeDrag); } else { // Projection plate : zoom + pan classique activeZoom = d3.zoom() .scaleExtent([0.5, 8]) .on("zoom", event => { mapGroup.attr("transform", event.transform); }); svg.call(activeZoom); } // ── WIPE TRANSITION ── const WIPE_DURATION = 5100; const HOLD_DURATION = 2600; let currentLayer = "choropleth"; let direction = 1; let animTimer = null; function resetClips(showing) { if (showing === "choropleth") { choroplethLayer.attr("clip-path", null).style("opacity", 1); bubbleLayer.attr("clip-path", null).style("opacity", 0); szLegend.style("opacity", 0); } else { bubbleLayer.attr("clip-path", null).style("opacity", 1); choroplethLayer.attr("clip-path", null).style("opacity", 0); szLegend.style("opacity", 1); } } function wipe(from, to, dir, onDone) { const inLayer = to === "choropleth" ? choroplethLayer : bubbleLayer; const outLayer = from === "choropleth" ? choroplethLayer : bubbleLayer; const inRect = svg.select("#wipe-rect-in"); const outRect = svg.select("#wipe-rect-out"); if (dir === 1) { inRect.attr("x", 0).attr("width", 0); outRect.attr("x", 0).attr("width", width); } else { inRect.attr("x", width).attr("width", 0); outRect.attr("x", 0).attr("width", width); } inLayer.attr("clip-path", "url(#clip-wipe-in)").style("opacity", 1); outLayer.attr("clip-path", "url(#clip-wipe-out)").style("opacity", 1); if (to === "bubble") szLegend.style("opacity", 1); const t0 = performance.now(); function step(now) { const p = Math.min((now - t0) / WIPE_DURATION, 1); const e = p < 0.5 ? 4*p*p*p : 1 - Math.pow(-2*p+2,3)/2; const w = e * width; if (dir === 1) { inRect.attr("x", 0).attr("width", w); outRect.attr("x", w).attr("width", width - w); } else { inRect.attr("x", width - w).attr("width", w); outRect.attr("x", 0).attr("width", width - w); } if (p < 1) { requestAnimationFrame(step); } else { inLayer.attr("clip-path", null).style("opacity", 1); outLayer.attr("clip-path", null).style("opacity", 0); if (to === "choropleth") szLegend.style("opacity", 0); onDone(); } } requestAnimationFrame(step); } function startAnimation() { currentLayer = "choropleth"; direction = 1; resetClips("choropleth"); titleEl.text(""); subtitleEl.text(""); function cycle() { const next = currentLayer === "choropleth" ? "bubble" : "choropleth"; wipe(currentLayer, next, direction, () => { currentLayer = next; direction = -direction; animTimer = setTimeout(cycle, HOLD_DURATION); }); } animTimer = setTimeout(cycle, HOLD_DURATION); } function stopAnimation() { if (animTimer) { clearTimeout(animTimer); animTimer = null; } } function update(mode) { stopAnimation(); if (mode === "choropleth") { resetClips("choropleth"); } else if (mode === "bubble") { resetClips("bubble"); } else { startAnimation(); } } update(mapMode); invalidation.then(() => { stopAnimation(); tooltip.remove(); }); // ── Boutons zoom ── const btnStyle = ` display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:4px; border:1px solid #ccc; background:white; cursor:pointer; font-size:16px; font-weight:bold; box-shadow:0 1px 3px rgba(0,0,0,0.15); color:#333; user-select:none; line-height:1; padding:0; `; const zoomControls = html`

`; zoomControls.querySelector("#btn-zoom-in").addEventListener("click", () => { svg.transition().duration(300).call(activeZoom.scaleBy, 1.5); }); zoomControls.querySelector("#btn-zoom-out").addEventListener("click", () => { svg.transition().duration(300).call(activeZoom.scaleBy, 1/1.5); }); zoomControls.querySelector("#btn-zoom-reset").addEventListener("click", () => { svg.transition().duration(400).call(activeZoom.transform, d3.zoomIdentity); currentZoomTransform = d3.zoomIdentity; if (isGlobe) { projection.rotate([0, 0, 0]); redrawGlobe(); } }); const container = html`

`; container.appendChild(svg.node()); container.appendChild(zoomControls); container.__update__ = update; return container; }31:Tc9e, 32:[{"id":"8baea8cce6a6042ec1b6c5b6645461b507e536e56c30091c50f3152cd23c498a3280a08a9b7a64551b6e999f4641a238cbccfa3a6f892cdcfd394a6e4b9c2c58","href":"https://static.observableusercontent.com/files/8baea8cce6a6042ec1b6c5b6645461b507e536e56c30091c50f3152cd23c498a3280a08a9b7a64551b6e999f4641a238cbccfa3a6f892cdcfd394a6e4b9c2c58","name":"df(2).csv","type":"text/csv","lastModified":1782897920534.856,"size":31751},{"id":"6cf6298624c0169017e102b439588aa9aa2e7ea39217204ace9e778010aa4276f86e8835cd9dd31a811a6ee0cbe39b7d2b8907d2ea88c090c39ace89bc85094b","href":"https://static.observableusercontent.com/files/6cf6298624c0169017e102b439588aa9aa2e7ea39217204ace9e778010aa4276f86e8835cd9dd31a811a6ee0cbe39b7d2b8907d2ea88c090c39ace89bc85094b","name":"XXX.json","type":"application/json","lastModified":1782898225844.333,"size":1117733},{"id":"7002950304e85c499c5bed6ddb28c640d9ad152ccaf5ef2f7fbe0b680bb4b7562b52b18f64c4eb05de77795bc0b96952a23de03b6e8f6d8e04f441a497c6d21b","href":"https://static.observableusercontent.com/files/7002950304e85c499c5bed6ddb28c640d9ad152ccaf5ef2f7fbe0b680bb4b7562b52b18f64c4eb05de77795bc0b96952a23de03b6e8f6d8e04f441a497c6d21b","name":"worldAdministrativeBoundaries14(2).json","type":"application/json","lastModified":1782980940479.597,"size":281082}] 2c:{"id":"31fb8bfd49299bdd","slug":null,"title":"choropleth <=> dorling (work in progress) / node 25081","thumbnail":"c178d325af83b18dc8d916da87318ab013891880d335a5a9d2af4730942ba5ae","access_level":"public","create_time":"$D2026-07-01T09:25:08.786Z","update_time":"$D2026-07-06T07:40:56.731Z","view_time":null,"first_public_time":"$D2026-07-01T17:09:16.200Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"2982f8baffd2d3ed","login":"mthevenin","name":"Marc Thevenin","avatar_url":"https://avatars-next.observableusercontent.com/6ae55bec6f9ba0bbe9597b60f19a08df8d2f5b06630eb6929919d0306a71b058","tier":"free_2026"},"version":510,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b5b022ef44e3d3a2","login":"mthevenin","name":"Marc Thevenin","avatar_url":"https://avatars-next.observableusercontent.com/ff86d75fca849a58a73d37988818fed6fa039e41541174c8654ac020ffc491f5","tier":null}],"members":[{"type":"individual","id":"b5b022ef44e3d3a2","login":"mthevenin","name":"Marc Thevenin","avatar_url":"https://avatars-next.observableusercontent.com/ff86d75fca849a58a73d37988818fed6fa039e41541174c8654ac020ffc491f5","tier":null,"role":"editor"},{"type":"team","id":"2982f8baffd2d3ed","login":"mthevenin","name":"Marc Thevenin","avatar_url":"https://avatars-next.observableusercontent.com/6ae55bec6f9ba0bbe9597b60f19a08df8d2f5b06630eb6929919d0306a71b058","tier":"free_2026","role":"viewer"}],"comments":[{"id":"8d5e52aac93dc018","reply_to_id":null,"content":"vitesse transition lorsque zoomé => trop rapide","create_time":"$D2026-07-30T05:26:54.055Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"b5b022ef44e3d3a2","login":"mthevenin","name":"Marc Thevenin","avatar_url":"https://avatars-next.observableusercontent.com/ff86d75fca849a58a73d37988818fed6fa039e41541174c8654ac020ffc491f5","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"choropleth <=> dorling (work in progress) / node 25081","cells":[{"id":0,"value":"# choropleth <=> dorling (work in progress) / node 25081","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":384,"value":"viz = require(\"geoviz@0.8.1\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"viewof select = Inputs.select([\"Taux de Natalité\", \"Taux de mortalité\", \"Espérance de vie\", \"Taux de mortalité infantile\", \"Nombre d'enfant(s) par femme\", \"Part des 65 ans et plus\"], {label: \"\", value: \"Taux de mortalité infantile\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":345,"value":"note = {const definition = [{indic: \"Taux de Natalité\", def: \"Nombre de naissances par an pour 1 000 habitants\"},\n {indic: \"Taux de mortalité\", def: \"Nombre de décès par an pour 1 000 habitants\"},\n {indic: \"Espérance de vie\", def: \"Durée de vie moyenne en années\"},\n {indic: \"Taux de mortalité infantile\", def: \"Nombre de décès d'enfants de moins d'un an pour 1 000 naissances\"},\n {indic: \"Nombre d'enfant(s) par femme\", def: \"Indice conjoncturel de fécondité\"},\n {indic: \"Part des 65 ans et plus\", def: \"Pourcentage de personnes âgées de 65 ans et plus\"}\n ]\n const filterDef = definition.filter(d=> select === d.indic)\n const Def = filterDef[0].def\n return {Def}\n }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":348,"value":"note.Def","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"output = htl.html`

\nwidth: ${width}px\n${viewof mapMode}\n${viewof projChoix}\n${viewof select}\n${animatedMap}\n

\n* ${note.Def}\n

\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"pal100 = [\n \"#ff564e\", //rouge\n \"#ff7aad\", //rose\n \"#522673\", //mauve\n \"#0042eb\", //bleu\n \"#5cd49e\", //vert\n \"#ffb322\", //jaune\n \"#222330\", //black\n \"#d1d1d1\" //gris\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"col = {\n let n; \n if (select=== \"Taux de Natalité\") {return n= [\"#ffe5e4\",\"#ffbbb8\",\"#ff8983\",\"#ff564e\", \"#e90b00\"]}\n if (select=== \"Taux de mortalité\") {return n= [\"#dec9ed\",\"#bd94dc\",\"#9c5eca\",\"#7838a9\" ,\"#522673\"]}\n if (select=== \"Espérance de vie\") {return n= [\"#c8d7ff\",\"#91b0ff\",\"#3e75ff\",\"#0042eb\",\"#002ea4\"]}\n if (select=== \"Taux de mortalité infantile\") {return n= [\"#fff4de\",\"#ffe1a7\",\"#ffca64\",\"#ffb322\",\"#e79800\"]} \n if (select=== \"Nombre d'enfant(s) par femme\") {return n= [\"#ffeef4\",\"#ffcade\",\"#ffa2c6\",\"#ff7aad\",\"#ff2f7e\"]} \n {return n=[\"#e7f9f0\",\"#beeed8\",\"#8de1bb\",\"#5cd49e\",\"#2ca871\"]}\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"df = FileAttachment(\"df(2).csv\").csv({typed:true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"data = df.map(d=>({\niso3: d.iso3,\npop: d.population_totale,\ncroissance: d.taux_croissance,\nindic: select=== \"Taux de mortalité infantile\" ? d.taux_mortalité_infantile :\n select=== \"Nombre d'enfant(s) par femme\" ? d.nombre_enfant_femme :\n select=== \"Taux de Natalité\" ? d.taux_natalité :\n select===\"Taux de mortalité\" ? d.taux_mortalité :\n select===\"Espérance de vie\" ? d.espérance_vie :\n d.part_65ans \n ,\npays: d.Pays \n })).filter(d=>d.iso3!=null)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"versor = require(\"versor@0.2.0\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"un= FileAttachment(\"worldAdministrativeBoundaries14(2).json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"// Ajout des centroides dans properties\nun2 = {\nconst geo = topojson.feature(un, un.objects.maptopo);\nconst Z = geo.features.forEach((feature, i) => {\n un.objects.maptopo.geometries[i].properties.centroid =\n d3.geoCentroid(feature);\n });\n\n return geo;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":382,"value":"world = viz.tool.featurecollection(\nun2.features.filter((d) => d.properties.name != \"Azores Islands\")\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"// Convertir les strings \"22,4\" -> 22.4 et joindre avec le fond de carte\ndata2 = data.map(d => ({\n ...d,\n indic: d.indic.replace(\",\", \".\"),\n //croissance: +d.croissance.replace(\",\", \".\")\n}))\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":239,"value":"dataClean = data2.map(d => ({\n ...d,\n indic: Math.round(Number(d.indic) * 100) / 100\n //croissance: +d.croissance.replace(\",\", \".\")\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"worldEnriched = {\n const lookup = new Map(dataClean.map(d => [d.iso3, d]));\n return {\n ...world,\n features: world.features.map(f => ({\n ...f,\n properties: {\n ...f.properties,\n ...(lookup.get(f.properties.iso3) || {})\n }\n }))\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"$2e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"viewof projChoix = Inputs.radio([\"Natural Earth\", \"Globe\"], {label: \"Choix de la projection\", value: \"Natural Earth\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"proj = projChoix === \"Natural Earth\" ? d3.geoNaturalEarth1() : d3.geoOrthographic()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"size2 = {\nlet n; \n if (width>800 & proj===\"Natural Earth\") {return n=700}\n if (width>800 & proj===\"Globe\") {return n=600}\n else {return n = width-60}\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":269,"value":"mapParams","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"// Connecte le radio au conteneur : déclenche la transition à chaque changement de mode\n{\n if (animatedMap && animatedMap.__update__) {\n animatedMap.__update__(mapMode);\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"$31","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"cssInput","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 2d:"$2c:body"