Public
Edited
Sep 3, 2023
1 star
Insert cell
Insert cell
Insert cell
total = 108667043
Insert cell
catholic = 85645362
Insert cell
muslim = 6981710
Insert cell
others = total - catholic - muslim
Insert cell
percents = ({catholic: catholic/total * 100, muslim: muslim/total * 100, others: others / total * 100})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
weepeople = chart2(1000, '#b876a9')
Insert cell
chart2(14, 'gold')
Insert cell
chart2(6, 'orange')
Insert cell
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();
}
Insert cell
// stylesheet = html`
// <style>
// ${css}
// </style>
// `
Insert cell
import {css} from "@armollica/blobs-of-wee-people"
Insert cell
Insert cell
rCatholic = chart(79)
Insert cell
rMuslim = chart(60)
Insert cell
rOthers = chart(150)
Insert cell
DOM.download(await serialize(rCatholic), null, 'Download Catholic Percentage as SVG')
Insert cell
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()
}
Insert cell
Insert cell
Insert cell
viewof characters = {
const div = html`<div style="font: 24px/33px ${font.family};">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</div>`;
div.value = Array.from(div.textContent);
return div;
}
Insert cell
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]))))
Insert cell
samples = [...poissonDiscSampler(0, 0, width, height, radius)]
.sort(([ax, ay], [bx, by]) => Math.hypot(ax - width / 2, ay - height / 2) - Math.hypot(bx - width / 2, by - height / 2))
.slice(0, n)
Insert cell
radius = 24
Insert cell
height = 600
Insert cell
font = {
const font = new FontFace("WeePeople", `url(${await FileAttachment("weepeople.woff2").url()})`);
await font.load();
document.fonts.add(font);
return font;
}
Insert cell
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;
}
}
Insert cell
Insert cell
import {rasterize,serialize} from "@mbostock/saving-svg"
Insert cell
import {slider} from "@jashkenas/inputs"
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more