Curious human. Interested in the mechanics of how things work.
total = 108667043
catholic = 85645362
muslim = 6981710
others = total - catholic - muslim
percents = ({catholic: catholic/total * 100, muslim: muslim/total * 100, others: others / total * 100})
weepeople = chart2(1000, '#b876a9')
chart2(14, 'gold')
chart2(6, 'orange')
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();
}
// stylesheet = html`
// <style>
// ${css}
// </style>
// `
import {css} from "@armollica/blobs-of-wee-people"
rCatholic = chart(79)
rMuslim = chart(60)
rOthers = chart(150)
DOM.download(await serialize(rCatholic), null, 'Download Catholic Percentage as SVG')
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()
}
viewof characters = {
const div = html`<div style="font: 24px/33px ${font.family};">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</div>`;
div.value = Array.from(div.textContent);
return div;
}
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]))))
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)
radius = 24
height = 600
font = {
const font = new FontFace("WeePeople", `url(${await FileAttachment("weepeople.woff2").url()})`);
await font.load();
document.fonts.add(font);
return font;
}
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;
}
}
import {rasterize,serialize} from "@mbostock/saving-svg"
import {slider} from "@jashkenas/inputs"
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.