The avatar for @irenedelatorre
Irene de la Torre
Data visualization designer. Now Digital Designer at the Financial Times. Before at UCB Biopharma, BBC News & the Senseable City Lab. I like making dots move on the screen
Published
Edited
Mar 7, 2021
Fork of Canvas, P5.js and circle packing (collision and cluster force) on a map
7 stars
1
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
projection = projections.geoNaturalEarth()
.scale(width / 2 / Math.PI)
.translate([width / 2, height / 2])
.center([0, 0])
Insert cell
Insert cell
geoPath = d3.geoPath()
.projection(projection);
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
function createCentralPack(thisArray) {
const angle = Math.PI * (3 - Math.sqrt(5));
const x0 = width / 2;
const y0 = height / 2;
for (let i = 1; i <= thisArray.length; ++i) {
const r = (radius + padding) * 1.2 * Math.sqrt(i);
const a = i * angle;
const x = x0 + r * Math.cos(a);
const y = y0 + r * Math.sin(a);
thisArray[i - 1].center = {x: x, y: y, r: radius}
}
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
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