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

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.
Learn more