28:null 29:["$","title",null,{"children":"Untitled | Bastien Perrin-Zen | Observable"}] 2e:Tcde,{ const totalCells = gridSize * gridSize // ------------------- // POINTS // ------------------- const points = [] for (let i = 0; i < numPoints; i++) { points.push({ x: Math.random() * gridSize, y: Math.random() * gridSize }) } // ------------------- // CASES SÉLECTIONNÉES // ------------------- const selectedCells = new Set() while (selectedCells.size < k) { const x = Math.floor(Math.random() * gridSize) const y = Math.floor(Math.random() * gridSize) selectedCells.add(`${x},${y}`) } // ------------------- // TEST // ------------------- function isSelected(p) { const x = Math.floor(p.x) const y = Math.floor(p.y) return selectedCells.has(`${x},${y}`) } // ------------------- // COMPTER // ------------------- const captured = points.filter(isSelected).length // ------------------- // ESTIMATION // ------------------- const estimatedTotal = (captured / k) * totalCells // erreur const error = Math.abs(estimatedTotal - numPoints) // ------------------- // SVG // ------------------- const svgNS = "http://www.w3.org/2000/svg" const svg = document.createElementNS(svgNS, "svg") svg.setAttribute("viewBox", `0 0 ${gridSize} ${gridSize}`) svg.setAttribute("width", 500) svg.setAttribute("height", 500) svg.style.border = "1px solid black" // grille for (let i = 0; i <= gridSize; i++) { const h = document.createElementNS(svgNS, "line") h.setAttribute("x1", 0) h.setAttribute("y1", i) h.setAttribute("x2", gridSize) h.setAttribute("y2", i) h.setAttribute("stroke", "#888") h.setAttribute("stroke-width", 0.02) svg.appendChild(h) const v = document.createElementNS(svgNS, "line") v.setAttribute("x1", i) v.setAttribute("y1", 0) v.setAttribute("x2", i) v.setAttribute("y2", gridSize) v.setAttribute("stroke", "#888") v.setAttribute("stroke-width", 0.02) svg.appendChild(v) } // cases for (const cell of selectedCells) { const [x, y] = cell.split(",").map(Number) const rect = document.createElementNS(svgNS, "rect") rect.setAttribute("x", x) rect.setAttribute("y", y) rect.setAttribute("width", 1) rect.setAttribute("height", 1) rect.setAttribute("fill", "lightblue") rect.setAttribute("opacity", 0.5) svg.appendChild(rect) } // points for (const p of points) { const c = document.createElementNS(svgNS, "circle") c.setAttribute("cx", p.x) c.setAttribute("cy", p.y) c.setAttribute("r", 0.1) c.setAttribute("fill", isSelected(p) ? "red" : "black") svg.appendChild(c) } // ------------------- // UI // ------------------- const container = document.createElement("div") container.style.fontFamily = "sans-serif" const text = document.createElement("div") text.style.margin = "10px 0" const errorPercent = Math.abs(estimatedTotal - numPoints) / numPoints * 100 text.innerHTML = ` Points capturés : ${captured} / ${numPoints}
Estimation population : ${Math.round(estimatedTotal)}
Vraie population : ${numPoints}
Erreur : ${errorPercent.toFixed(2)} % ` container.appendChild(text) container.appendChild(svg) return container }2f:Te3a,{ const totalCells = gridSize * gridSize // ------------------- // CENTRES DE DENSITÉ // ------------------- function density(x, y) { return Math.abs(Math.sin(x * 0.5) * Math.cos(y * 0.5) + Math.sin(x * 0.2 + y * 0.3)) } // ------------------- // POINTS NON UNIFORMES // ------------------- const points = [] while (points.length < numPoints) { const x = Math.random() * gridSize const y = Math.random() * gridSize // densité locale const d = density(x, y) // rejet probabiliste if (Math.random() < d / 2) { points.push({ x, y }) } } // ------------------- // CASES SÉLECTIONNÉES // ------------------- const selectedCells = new Set() while (selectedCells.size < k) { const x = Math.floor(Math.random() * gridSize) const y = Math.floor(Math.random() * gridSize) selectedCells.add(`${x},${y}`) } // ------------------- // TEST // ------------------- function isSelected(p) { const x = Math.floor(p.x) const y = Math.floor(p.y) return selectedCells.has(`${x},${y}`) } // ------------------- // COMPTER // ------------------- const captured = points.filter(isSelected).length // ------------------- // ESTIMATION // ------------------- const estimatedTotal = (captured / k) * totalCells // erreur const error = Math.abs(estimatedTotal - numPoints) // ------------------- // SVG // ------------------- const svgNS = "http://www.w3.org/2000/svg" const svg = document.createElementNS(svgNS, "svg") svg.setAttribute("viewBox", `0 0 ${gridSize} ${gridSize}`) svg.setAttribute("width", 500) svg.setAttribute("height", 500) svg.style.border = "1px solid black" // grille for (let i = 0; i <= gridSize; i++) { const h = document.createElementNS(svgNS, "line") h.setAttribute("x1", 0) h.setAttribute("y1", i) h.setAttribute("x2", gridSize) h.setAttribute("y2", i) h.setAttribute("stroke", "#888") h.setAttribute("stroke-width", 0.02) svg.appendChild(h) const v = document.createElementNS(svgNS, "line") v.setAttribute("x1", i) v.setAttribute("y1", 0) v.setAttribute("x2", i) v.setAttribute("y2", gridSize) v.setAttribute("stroke", "#888") v.setAttribute("stroke-width", 0.02) svg.appendChild(v) } // cases for (const cell of selectedCells) { const [x, y] = cell.split(",").map(Number) const rect = document.createElementNS(svgNS, "rect") rect.setAttribute("x", x) rect.setAttribute("y", y) rect.setAttribute("width", 1) rect.setAttribute("height", 1) rect.setAttribute("fill", "lightblue") rect.setAttribute("opacity", 0.5) svg.appendChild(rect) } // points for (const p of points) { const c = document.createElementNS(svgNS, "circle") c.setAttribute("cx", p.x) c.setAttribute("cy", p.y) c.setAttribute("r", 0.1) c.setAttribute("fill", isSelected(p) ? "red" : "black") svg.appendChild(c) } // ------------------- // UI // ------------------- const container = document.createElement("div") container.style.fontFamily = "sans-serif" const text = document.createElement("div") text.style.margin = "10px 0" const errorPercent = Math.abs(estimatedTotal - numPoints) / numPoints * 100 text.innerHTML = ` Points capturés : ${captured} / ${numPoints}
Estimation population : ${Math.round(estimatedTotal)}
Vraie population : ${numPoints}
Erreur : ${errorPercent.toFixed(2)} % ` container.appendChild(text) container.appendChild(svg) return container }30:T118b,{ const svgNS = "http://www.w3.org/2000/svg" const svg = document.createElementNS(svgNS, "svg") svg.setAttribute("viewBox", `0 0 ${gridSize} ${gridSize}`) svg.setAttribute("width", 500) svg.setAttribute("height", 500) svg.style.border = "1px solid black" svg.style.cursor = "crosshair" let dragging =false let addMode = true function processCell(x, y) { const key = `${x},${y}` const next = new Set(mutable selectedCells) if (next.has(key)) { if (!addMode) next.delete(key) } else { if (addMode) { if (next.size >= k) { const first = next.values().next().value next.delete(first) } next.add(key) } } mutable selectedCells = next updateDisplay() } function getMouseCell(e) { const rect = svg.getBoundingClientRect() const x = Math.floor((e.clientX - rect.left) / rect.width * gridSize) const y = Math.floor((e.clientY - rect.top) / rect.height * gridSize) return [x, y] } svg.addEventListener("mousedown", e => { dragging = true const [x, y] = getMouseCell(e) addMode = !mutable selectedCells.has(`${x},${y}`) processCell(x, y) }) svg.addEventListener("mousemove", e => { if (!dragging) return const [x, y] = getMouseCell(e) processCell(x, y) }) svg.addEventListener("mouseup", () => { dragging = false }) svg.addEventListener("mouseleave", () => { dragging = false }) // Grille + cases + points const gridLines = [] const caseRects = [] const pointCircles = [] for (let i = 0; i <= gridSize; i++) { const h = document.createElementNS(svgNS, "line") h.setAttribute("x1", 0); h.setAttribute("y1", i) h.setAttribute("x2", gridSize); h.setAttribute("y2", i) h.setAttribute("stroke", "#555"); h.setAttribute("stroke-width", 0.05) svg.appendChild(h) gridLines.push(h) const v = document.createElementNS(svgNS, "line") v.setAttribute("x1", i); v.setAttribute("y1", 0) v.setAttribute("x2", i); v.setAttribute("y2", gridSize) v.setAttribute("stroke", "#555"); v.setAttribute("stroke-width", 0.05) svg.appendChild(v) gridLines.push(v) } for (const p of mutable points) { const c = document.createElementNS(svgNS, "circle") c.setAttribute("cx", p.x); c.setAttribute("cy", p.y) c.setAttribute("r", 0.1) c.setAttribute("fill", "black") svg.appendChild(c) pointCircles.push(c) } function updateDisplay() { // Cases caseRects.forEach(r => svg.removeChild(r)) caseRects.length = 0 for (const cell of mutable selectedCells) { const [x, y] = cell.split(",").map(Number) const rect = document.createElementNS(svgNS, "rect") rect.setAttribute("x", x); rect.setAttribute("y", y) rect.setAttribute("width", 1); rect.setAttribute("height", 1) rect.setAttribute("fill", "lightblue"); rect.setAttribute("opacity", 0.5) svg.appendChild(rect) caseRects.push(rect) } // Points color for (let i = 0; i < mutable points.length; i++) { const p = mutable points[i] pointCircles[i].setAttribute( "fill", mutable selectedCells.has(`${Math.floor(p.x)},${Math.floor(p.y)}`) ? "red" : "black" ) } // Stats const captured = mutable points.filter(p => mutable selectedCells.has(`${Math.floor(p.x)},${Math.floor(p.y)}`)).length const estimatedTotal = (captured / Math.max(1, mutable selectedCells.size)) * (gridSize*gridSize) const errorPercent = Math.abs(estimatedTotal - numPoints) / numPoints * 100 estimatedDiv.innerHTML = ` Cases sélectionnées : ${mutable selectedCells.size} / ${k}
Points capturés : ${captured} / ${numPoints}
Estimation : ${Math.round((captured / Math.max(1, mutable selectedCells.size)) * (gridSize*gridSize))}
Vraie population : ${numPoints}
Erreur : ${errorPercent.toFixed(2)} % ` } const container = document.createElement("div") container.style.fontFamily = "sans-serif" const estimatedDiv = document.createElement("div") estimatedDiv.style.margin = "10px 0" const resetBtn = document.createElement("button") resetBtn.textContent = "Reset" resetBtn.onclick = () => { mutable selectedCells = new Set() updateDisplay() } container.appendChild(estimatedDiv) container.appendChild(resetBtn) container.appendChild(svg) updateDisplay() // affichage initial return container }31:[] 2c:{"id":"9a6f2b7138f7ebeb","slug":null,"title":"","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2026-03-25T16:54:37.852Z","update_time":"$D2026-03-26T08:44:14.089Z","view_time":null,"first_public_time":"$D2026-03-25T16:54:37.852Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"6a3c2635f9f21803","login":"bastien-perrin-zen","name":"Bastien Perrin-Zen ","avatar_url":"https://avatars-next.observableusercontent.com/77bcf9a82719beac43e43c4530fc4fc1af543bb31b8ae35aa85641d3efce0747","tier":"starter_2024"},"version":146,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b9cb9fb9b7ef1555","login":"bastien-perrin-zen","name":"Bastien Perrin-Zen ","avatar_url":"https://avatars-next.observableusercontent.com/ce37548e9d97fcb9bac1f2d2c4f00c7810403d972d6512d644e195e41ef5fe69","tier":null}],"members":[{"type":"team","id":"6a3c2635f9f21803","login":"bastien-perrin-zen","name":"Bastien Perrin-Zen ","avatar_url":"https://avatars-next.observableusercontent.com/77bcf9a82719beac43e43c4530fc4fc1af543bb31b8ae35aa85641d3efce0747","tier":"starter_2024","role":"editor"},{"type":"individual","id":"b9cb9fb9b7ef1555","login":"bastien-perrin-zen","name":"Bastien Perrin-Zen ","avatar_url":"https://avatars-next.observableusercontent.com/ce37548e9d97fcb9bac1f2d2c4f00c7810403d972d6512d644e195e41ef5fe69","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"","cells":[{"id":10,"value":"viewof gridSize = Inputs.range([5, 100], {value: 20, step: 1, label: \"Taille de la grille\"}) \n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":19,"value":"viewof numPoints = Inputs.range([10, 5000], {value: 500, step: 10, label: \"Nombre de points\"}) ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":21,"value":"viewof k = Inputs.range([1, gridSize * gridSize], {value: 60, step: 1, label: \"Nombre de cases sélectionnées\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":46,"value":"VERSION AVEC DES POINTS UNIFORMES","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":38,"value":"$2e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":79,"value":"////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":51,"value":"VERSION AVEC DES POINTS NON UNIFORMES","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":49,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":77,"value":"////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":73,"value":"VERSION CLIQUABLE // POINTS UNIFORMES","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":85,"value":"mutable selectedCells = new Set()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":101,"value":"mutable points = (function() {\n const pts = []\n for (let i = 0; i < numPoints; i++) {\n const x = Math.random() * gridSize\n const y = Math.random() * gridSize\n pts.push({x, y})\n }\n return pts\n})()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":131,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2d:"$2c:body"