2f:T557,function chart2(n, color) { const nodes = d3.range(n).map((id) => ({ id })); const forceCharge = d3.forceManyBody().strength(charge); const forceX = d3.forceX().strength(xStrength); const forceY = d3.forceY().strength(yStrength); const simulation = d3 .forceSimulation() .nodes(nodes) .force("charge", forceCharge) .force("x", forceX) .force("y", forceY) .stop(); for (let i = 0; i < 100; i++) simulation.tick(); const yExtent = d3.extent(nodes, (d) => d.y); const height = yExtent[1] - yExtent[0] + 100; const svg = d3.select(DOM.svg(width, height)); svg.append("style").html(css); const blob = svg .append("g") .attr("transform", `translate(${width / 2}, ${height / 2})`) .attr("font-size", `${fontSize}px`); function random() { const d = Math.random() * jitter - jitter / 2; return d; } blob .selectAll("text") .data(nodes) .enter() .append("text") .sort((a, b) => a.y - b.y) .text(randomLetter) .attr("x", (d) => d.x + random()) .attr("y", (d) => d.y + random()) .attr("class", "weepeople") .attr("fill", (d, i) => { if (i < 6 * 10) { console.log(i); return "#1C1006"; } else if (i > 6 * 10 && i < 21 * 10) { return "#7E5EDB"; } else { return "#E3B94C"; } }); return svg.node(); }30:T669,function chart (n){ const nodes = d3.range(n).map(id => ({ id })); const forceCharge = d3.forceManyBody().strength(charge); const forceX = d3.forceX().strength(xStrength); const forceY = d3.forceY().strength(yStrength); const simulation = d3.forceSimulation() .nodes(nodes) .force('charge', forceCharge) .force('x', forceX) .force('y', forceY) .stop(); for (let i = 0; i < 100; i++) simulation.tick(); const yExtent = d3.extent(nodes, d => d.y); const height = (yExtent[1] - yExtent[0]) + 200; const svg = d3.select(DOM.svg(width, height)); const blob = svg.append('g') .attr('transform', `translate(${width / 2.5}, ${height / 2})`) .attr('font-size', `${fontSize}px`); function random() { const d = (Math.random() * jitter) - (jitter / 2); console.log(d); return d; } const node = blob .selectAll("g") .data(nodes) .join("g") .attr("data-name", d => d.id) .attr("class", d => `img-group ${randomLetter()}`) .attr("fill", "green"); const img = node .append('image') .attr( "xlink:href", (d) => "data:image/svg+xml;base64," + btoa(images['c']) ) .attr('clip-path', d => `url(a-clip)`) .attr('width', fontSize) .attr('height', fontSize) .attr('x', d => d.x + random()) .attr('y', d => d.y + random()) // blob.selectAll('text').data(nodes) // .enter().append('text') // .sort((a, b) => a.y - b.y) // .text(randomLetter) // .attr('x', d => d.x + random()) // .attr('y', d => d.y + random()) // .attr('class', 'weepeople'); return svg.node() }31:T47a,images = Object.fromEntries(await Promise.all(Object.entries({ a: "https://raw.githubusercontent.com/bianchi-dy/force-network-test/main/images-2/CUHK_silhouettes_v2_1.svg", b: "https://raw.githubusercontent.com/bianchi-dy/force-network-test/main/images-2/CUHK_silhouettes_v2_2.svg", c: "https://raw.githubusercontent.com/bianchi-dy/force-network-test/main/images-2/CUHK_silhouettes_v2_3.svg", d: "https://raw.githubusercontent.com/bianchi-dy/force-network-test/main/images-2/CUHK_silhouettes_v2_4.svg", e: "https://raw.githubusercontent.com/bianchi-dy/force-network-test/main/images-2/CUHK_silhouettes_v2_5.svg", f: "https://raw.githubusercontent.com/bianchi-dy/force-network-test/main/images-2/CUHK_silhouettes_v2_6.svg", g: "https://raw.githubusercontent.com/bianchi-dy/force-network-test/main/images-2/CUHK_silhouettes_v2_7.svg", h: "https://raw.githubusercontent.com/bianchi-dy/force-network-test/main/images-2/CUHK_silhouettes_v2_8.svg", i: "https://raw.githubusercontent.com/bianchi-dy/force-network-test/main/images-2/CUHK_silhouettes_v2_9.svg" }).map(([key, url]) => fetch(url).then(d => d.text()).then(d => [key, d]))))32:T6a9,function* poissonDiscSampler(x0, y0, x1, y1, r, k = 30) { if (!(x1 >= x0) || !(y1 >= y0) || !(r > 0)) throw new Error; const width = x1 - x0; const height = y1 - y0; const r2 = r * r; const r2_3 = 3 * r2; const cellSize = r * Math.SQRT1_2; const gridWidth = Math.ceil(width / cellSize); const gridHeight = Math.ceil(height / cellSize); const grid = new Array(gridWidth * gridHeight); const queue = []; function far(x, y) { const i = x / cellSize | 0; const j = y / cellSize | 0; const i0 = Math.max(i - 2, 0); const j0 = Math.max(j - 2, 0); const i1 = Math.min(i + 3, gridWidth); const j1 = Math.min(j + 3, gridHeight); for (let j = j0; j < j1; ++j) { const o = j * gridWidth; for (let i = i0; i < i1; ++i) { const s = grid[o + i]; if (s) { const dx = s[0] - x; const dy = s[1] - y; if (dx * dx + dy * dy < r2) return false; } } } return true; } function sample(x, y) { queue.push(grid[gridWidth * (y / cellSize | 0) + (x / cellSize | 0)] = [x, y]); return [x + x0, y + y0]; } yield sample(width / 2, height / 2); pick: while (queue.length) { const i = Math.random() * queue.length | 0; const parent = queue[i]; for (let j = 0; j < k; ++j) { const a = 2 * Math.PI * Math.random(); const r = Math.sqrt(Math.random() * r2_3 + r2); const x = parent[0] + r * Math.cos(a); const y = parent[1] + r * Math.sin(a); if (0 <= x && x < width && 0 <= y && y < height && far(x, y)) { yield sample(x, y); continue pick; } } const r = queue.pop(); if (i < queue.length) queue[i] = r; } }33:[{"id":"d31f24dd79982e94a0d154719be71b07e5bd5af4d11e76478eba4c011a1b889dbfc564dff4d0a58cc3a84ebd795656acb188113c99ca0344d7b785e6ec040385","href":"https://static.observableusercontent.com/files/d31f24dd79982e94a0d154719be71b07e5bd5af4d11e76478eba4c011a1b889dbfc564dff4d0a58cc3a84ebd795656acb188113c99ca0344d7b785e6ec040385","name":"image.png","type":"image/png","lastModified":1689668548865.359,"size":50724},{"id":"e6fb4f8d0dad065b131ec22718ac7de666261cdbf3aca17819e57a3b7f509c4b1aa04a5e8c916e7f6327b890a9a8bcb84221f200dd74201e34b86e95016ede37","href":"https://static.observableusercontent.com/files/e6fb4f8d0dad065b131ec22718ac7de666261cdbf3aca17819e57a3b7f509c4b1aa04a5e8c916e7f6327b890a9a8bcb84221f200dd74201e34b86e95016ede37","name":"weepeople.woff2","type":"font/woff2","lastModified":1689668530977.156,"size":26944}] 2d:{"title":"Little People Religious Affiliations PH","cells":[{"id":0,"value":"md`# Little People Religious Affiliations PH\n\n- Source: https://psa.gov.ph/content/religious-affiliation-philippines-2020-census-population-and-housing`","pinned":false,"hidden":false,"mode":"ojs"},{"id":300,"value":"![image.png](${await FileAttachment(\"image.png\").url()})","pinned":false,"hidden":false,"mode":"md"},{"id":302,"value":"total = 108667043","pinned":true,"hidden":false,"mode":"ojs"},{"id":304,"value":"catholic = 85645362","pinned":true,"hidden":false,"mode":"ojs"},{"id":306,"value":"muslim = 6981710","pinned":true,"hidden":false,"mode":"ojs"},{"id":308,"value":"others = total - catholic - muslim","pinned":true,"hidden":false,"mode":"ojs"},{"id":310,"value":"percents = ({catholic: catholic/total * 100, muslim: muslim/total * 100, others: others / total * 100})","pinned":true,"hidden":false,"mode":"ojs"},{"id":434,"value":"# Controls","pinned":false,"hidden":false,"mode":"md"},{"id":99,"value":"viewof n = slider({\n min: 1, \n max: 1000, \n step: 1, \n value: 100,\n title: \"Number of people\",\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":333,"value":"viewof fontSize = slider({\n min: 1, \n max: 100, \n step: 1, \n value: 40,\n title: \"Font size\",\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":325,"value":"viewof charge = slider({\n min: -100, \n max: -1, \n step: 1, \n value: -40,\n title: \"Charge\",\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":327,"value":"viewof jitter = slider({\n min: 0,\n max: 100, \n step: 1, \n value: 10,\n title: \"Jitter\",\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":329,"value":"viewof xStrength = slider({\n min: 0.0001,\n max: 0.2, \n step: 0.005, \n value: 0.2,\n title: \"X Strength\",\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":331,"value":"viewof yStrength = slider({\n min: 0.0001,\n max: 0.2, \n step: 0.005, \n value: 0.2,\n title: \"Y Strength\",\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":411,"value":"viewof color = Inputs.text({label: \"Color\", placeholder: \"Enter people color\", value: \"a8a8a8\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":388,"value":"# Wee Little People\n## Inputs\n\n- Number: number of indiv icons\n- Color: `#`","pinned":false,"hidden":false,"mode":"md"},{"id":421,"value":"weepeople = chart2(1000, '#b876a9')","pinned":true,"hidden":false,"mode":"ojs"},{"id":425,"value":"chart2(14, 'gold')","pinned":true,"hidden":false,"mode":"ojs"},{"id":427,"value":"chart2(6, 'orange')","pinned":true,"hidden":false,"mode":"ojs"},{"id":390,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":405,"value":"// stylesheet = html`\n// \n// `","pinned":true,"hidden":false,"mode":"ojs"},{"id":395,"value":"import {css} from \"@armollica/blobs-of-wee-people\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":386,"value":"# Icon people","pinned":false,"hidden":false,"mode":"md"},{"id":358,"value":"rCatholic = chart(79)","pinned":true,"hidden":false,"mode":"ojs"},{"id":361,"value":"rMuslim = chart(60)","pinned":true,"hidden":false,"mode":"ojs"},{"id":364,"value":"rOthers = chart(150)","pinned":true,"hidden":false,"mode":"ojs"},{"id":369,"value":"DOM.download(await serialize(rCatholic), null, 'Download Catholic Percentage as SVG')","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":321,"value":"function randomLetter() {\n const i = Math.floor(Math.random() * letters.length);\n return letters[i];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":323,"value":"letters = 'a b c d e f g h i j k l m n o p q r s t u v w x y z A B C D E F G H I J K L M N O P Q R S T U V W X Y Z'.split(' ')","pinned":false,"hidden":false,"mode":"ojs"},{"id":184,"value":"viewof characters = {\n const div = html`

abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ

`;\n div.value = Array.from(div.textContent);\n return div;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":341,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":126,"value":"samples = [...poissonDiscSampler(0, 0, width, height, radius)]\n .sort(([ax, ay], [bx, by]) => Math.hypot(ax - width / 2, ay - height / 2) - Math.hypot(bx - width / 2, by - height / 2))\n .slice(0, n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"radius = 24","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs"},{"id":162,"value":"font = {\n const font = new FontFace(\"WeePeople\", `url(${await FileAttachment(\"weepeople.woff2\").url()})`);\n await font.load();\n document.fonts.add(font);\n return font;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":15,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":315,"value":"# Imports","pinned":false,"hidden":false,"mode":"md"},{"id":371,"value":"import {rasterize,serialize} from \"@mbostock/saving-svg\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":317,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}