2b:null 2c:["$","title",null,{"children":"Générer des points dans une forme | ToulouseDataviz | Observable"}] 31:T86f,{ const svgShape_ = await FileAttachment("covid_svg@2.svg").text(); // Parse the SVG string into a DOM element const parser = new DOMParser(); const svgDoc = parser.parseFromString(svgShape_, "image/svg+xml"); const pathElement = d3.select(svgDoc).select("path"); const svgShapePath = pathElement.attr("d"); const svgShape = html` `; // Create the SVG container to display circles (optional to make separate space for circles) const svgContainer = d3.select(DOM.svg(900, 600)); //.attr("style", "border: 1px solid salmon"); // Append the provided SVG to the container (if needed) svgContainer.node().appendChild(svgShape); // Random positions are generated for the required quantity of circles const positions = Array.from(Array(qty_1), () => [ Math.random() * 1200, Math.random() * 1000 ]); // Create a canvas for point-in-path testing const canvas = document.createElement("canvas"); const context = canvas.getContext("2d"); // Draw the path on the canvas (filling the path this time) context.beginPath(); const path2d = new Path2D(svgShapePath); context.translate(50, 0); // Translate to match the SVG transform context.fill(path2d); // Fill the path // Filter positions to only include those inside the filled area of the path const filteredPositions = positions.filter((d) => context.isPointInPath(path2d, d[0], d[1]) ); // Append circles only at positions that are inside the path svgContainer .selectAll("circle") .data(filteredPositions) .enter() .append("circle") .attr("fill", "red") .attr("r", 2) .attr("cx", (d) => d[0]) .attr("cy", (d) => d[1]); // Display the number of circles inside the shape svgContainer .append("text") .attr("x", 10) // Position the text inside the SVG .attr("y", 20) .attr("fill", "black") .attr("font-size", "14px") .text(`Circles inside shape: ${filteredPositions.length}`); // Return the SVG container with circles inside the shape return svgContainer.node(); }32:T94a,{ const svgShape_ = await FileAttachment("covid&main.svg").text(); // Parse the SVG string into a DOM element const parser = new DOMParser(); const svgDoc = parser.parseFromString(svgShape_, "image/svg+xml"); const pathElement = d3.select(svgDoc).select("path"); const svgShapePath = pathElement.attr("d"); /* const svgShape = html` `;*/ const svgShape = html` `; // Create the SVG container to display circles (optional to make separate space for circles) const svgContainer = d3.select(DOM.svg(800, 800)); //.attr("style", "border: 1px solid salmon"); // Append the provided SVG to the container (if needed) svgContainer.node().appendChild(svgShape); // Random positions are generated for the required quantity of circles const positions = Array.from(Array(qty_2), () => [ Math.random() * 1200, Math.random() * 1000 ]); // Create a canvas for point-in-path testing const canvas = document.createElement("canvas"); const context = canvas.getContext("2d"); // Draw the path on the canvas (filling the path this time) context.beginPath(); const path2d = new Path2D(svgShapePath); context.translate(50, 100); // Translate to match the SVG transform context.fill(path2d); // Fill the path // Filter positions to only include those inside the filled area of the path const filteredPositions = positions.filter((d) => context.isPointInPath(path2d, d[0], d[1]) ); // Append circles only at positions that are inside the path svgContainer .selectAll("circle") .data(filteredPositions) .enter() .append("circle") .attr("fill", "green") .attr("r", 2) .attr("cx", (d) => d[0]) .attr("cy", (d) => d[1]); // Display the number of circles inside the shape svgContainer .append("text") .attr("x", 10) // Position the text inside the SVG .attr("y", 20) .attr("fill", "black") .attr("font-size", "14px") .text(`Circles inside shape: ${filteredPositions.length}`); // Return the SVG container with circles inside the shape return svgContainer.node(); }33:[{"id":"960f6c8d4f6e78ef89c7586946d998ad7815a59895fe221377614b1c06423d48d8e19cbf9562d570b9e340241695fbc2a95ecab54ba883855fdabb26318f6392","href":"https://static.observableusercontent.com/files/960f6c8d4f6e78ef89c7586946d998ad7815a59895fe221377614b1c06423d48d8e19cbf9562d570b9e340241695fbc2a95ecab54ba883855fdabb26318f6392","name":"covid_svg@2.svg","type":"image/svg+xml","lastModified":1739192575366.514,"size":17632},{"id":"85dfd19e0dc90508aa7e9f1fb32d2261425c1c0cae5b3f9f2e7abc7dc19736ce98e89b78a02ae6fffd0d62d3a20902f8ebe3966c68e668d8469d6bda3854144d","href":"https://static.observableusercontent.com/files/85dfd19e0dc90508aa7e9f1fb32d2261425c1c0cae5b3f9f2e7abc7dc19736ce98e89b78a02ae6fffd0d62d3a20902f8ebe3966c68e668d8469d6bda3854144d","name":"covid&main.svg","type":"image/svg+xml","lastModified":1739194411268.745,"size":18591}] 2f:{"id":"b8814af29e99d3f9","slug":"generate_points_in_shape","title":" Générer des points dans une forme ","thumbnail":"3ae42ee53ccac42e5f43af4ca1603a7a626663589c8c5f76abdba8c4c9ed5572","access_level":"unlisted","create_time":"$D2025-02-04T16:42:37.242Z","update_time":"$D2025-06-21T14:19:41.470Z","view_time":null,"first_public_time":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"356546a635010146","login":"tdvz","name":"ToulouseDataviz","avatar_url":"https://avatars-next.observableusercontent.com/8cc8684f3b4b43d6bc2009295d66ea4d6c8dd1f1277afd34eb0f010ade242a05","tier":"starter_2024"},"version":490,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"39f8227195038a1f","login":"aotten","name":"Alain Ottenheimer","avatar_url":"https://avatars-next.observableusercontent.com/c908270df8ca89015b1f236bb9cc9fb2d79a649dbedef18f6cf2290d288650c3","tier":null}],"members":[{"type":"individual","id":"39f8227195038a1f","login":"aotten","name":"Alain Ottenheimer","avatar_url":"https://avatars-next.observableusercontent.com/c908270df8ca89015b1f236bb9cc9fb2d79a649dbedef18f6cf2290d288650c3","tier":null,"role":"editor"},{"type":"team","id":"356546a635010146","login":"tdvz","name":"ToulouseDataviz","avatar_url":"https://avatars-next.observableusercontent.com/8cc8684f3b4b43d6bc2009295d66ea4d6c8dd1f1277afd34eb0f010ade242a05","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":" Générer des points dans une forme ","cells":[{"id":463,"value":"md`# Générer des points dans une forme \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":474,"value":"md`#### Visualisation d'un nombre de points défini dans une forme. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"viewof qty_1 = Inputs.range([1, 60000], {\n label: \"Créez des points dans la figure\",\n step: 1,\n value: 15000\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":398,"value":"viewof qty_2 = Inputs.range([1, 300000], {\n label: \"Créez des points dans la figure\",\n step: 1,\n value: 20000\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":377,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":478,"value":"Réference : https://observablehq.com/@sistrall/interacting-with-svg-drawings","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"