Data visualisation at @civio, a non-profit journalism organisation specialising in public data and access to information.
Published
Edited
Jan 2, 2022
2 stars
// Learning from the book http://www.generative-gestaltung.de/2/
// https://p5js.org/reference/
chart = p5((sketch) => {
("use strict");
// Initial setup
sketch.setup = function () {
sketch.frameRate(8); // Change frame rates per second
sketch.noCursor();
sketch.createCanvas(width, height);
sketch.colorMode(sketch.HSB, 100, 100, 100);
};
// Drawing on each frame
sketch.draw = function () {
sketch.clear();
invertColors ? sketch.background(0) : sketch.background(250);
for (let gridY = 0; gridY < tileCount; gridY++) {
for (let gridX = 0; gridX < tileCount; gridX++) {
// Calculate each element position on the grid
const posX = tileWidth * gridX + tileWidth / 2;
const posY = tileHeight * gridY + tileWidth / 2;
sketch.push();
sketch.translate(posX, posY); // translate(x, y, [z])
// Calculate angle between mouse position and actual position of the shape
let angle = sketch.atan2(height / 2 - posY, width / 2 - posX);
sketch.rotate(angle);
// Color settings
let hue = sketch.random(100);
let saturation = sketch.random(100);
let bright = 100;
sketch.fill(hue, saturation, bright, 0.5);
sketch.stroke(hue, saturation, bright, 0.5);
sketch.strokeWeight(strokeWidth);
// Drawign the shapes
if (isSquare) sketch.noStroke();
if (isLine) sketch.noFill();
if (isSquare) sketch.rect(0, 0, shapeSize, shapeSize);
if (isLine) sketch.line(0, 0, shapeSize, shapeSize);
sketch.pop();
}
}
// Add a legend
const myText = "#Genuary2022: day01 - Draw 10k of something";
const textW = sketch.textWidth(myText);
const textX = 10;
const textY = height - 20;
const textSize = 16;
sketch.textSize(textSize);
sketch.strokeWeight(1);
sketch.noStroke();
sketch.fill("black");
sketch.rect(textX - 2, textY - textSize + 2, textW + 4, textSize + 2);
sketch.fill(255);
sketch.text(myText, textX, textY);
};
})
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.
