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
P5.js
Genuary2024, Vera MolnárDroste effect, Genuary2024Genuary2022, ArchitectureGenuary2022, Destroy a square.Genuary2022, Fidenza challengeGenuary2022, spaceGenuary2022, Dithering (Floyd-Steinberg)Genuary2022, Draw 10,000 of somethingAlmost a SierpinskiKoch CurveUCB's logo built with 8,000 dotsCanvas, P5.js and circle packing (collision and cluster force) on a mapGenerative design Notebook 1: colours and squaresGenerative design Notebook 4: obtaining colour palettes from imagesGenerative design Notebook 6.1: shapesGenerative design Notebook 6.2: shapesGenerative design Notebook 7: alignment in a gridGeneralization of the Sierpinski triangle - FractalsGenerative design Notebook 5: colour palettes from rulesGeneralization of the Sierpinski triangle - Fractals v2BBC Coronavirus tribute: 1 Global FlowerBBC Coronavirus tribute: all countries (weekly)BBC Coronavirus tribute: all countries (daily)BBC Coronavirus Tribute: 1 Country, 1 FlowerBBC Coronavirus tribute: all countries (weekly & mobile)BBC Coronavirus Tribute - Grid of flowers#genuary 2021 ~ Monochrome gradients without lines#genuary 2021 ~ Increase the randomness along the Y-axis#genuary 2021 ~ One process grows, another process prunes#genuary 2021 ~ Draw a line...#genuary 2021 ~ Subdivision#genuary 2021 ~ Triangle subdivision#genuary 2021 ~ Do some golf!#genuary 2021 ~ Small areas of symmetry#genuary 2021 ~ Something Human#genuary 2021 ~ 3 loops#genuary 2021 ~ Rule 30#genuary 2021 ~ Rule 30
Canvas, P5 and circle packing in a map
Also listed in…
D3.js
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