Data visualisation at @civio, a non-profit journalism organisation specialising in public data and access to information.
Published
Edited
Jun 7, 2021
1 fork
3 stars
Introducing d3-geo-scale-barRidiculously Rapid Software-as-a-Service (SaaS) development with Observable, Firebase and StripeColor by numberWalkers Animated PictogramMapping Air Quality Data with D3 - VORONOIOperations research in ObservablesThe Long Tail of Dog NamesNavio037 Shapes on a QuadTreeWebGL GlobeTime distance by road to Paris (France)Circle Studies 07Penrose QuiltWordle, 15 Million Tweets LaterTemplate for exploring a German data set... e allora esportiamo!Mapping the Berkshires | Environmental Conservation Areas06 | autonomous ink agentsPresidentes vivos.Randomuser.meWhat is your four-digit PIN?Alaska quakesFlight Information Regions
Getting Started with p5.js
Also listed in…
## Learning - p5.js
p5(sketch => {
// Happens just ONCE
sketch.setup = function() {
// 2d (p5.Renderer is not set)
sketch.createCanvas(width, 400);
// 3d mode (Setting a p5.Renderer: WEBGL/P2D)
//sketch.createCanvas(width, 400, sketch.WEBGL);
};
// Happens IN A LOOP 60fps
sketch.draw = function() {
sketch.background(220);
sketch.circle(60, 100, 40);
//sketch.rectMode(sketch.CENTER); // Reference system on the center
sketch.rect(100, 200, 40);
};
})
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
p5(sketch => {
// Happens just ONCE
sketch.setup = function() {
sketch.createCanvas(width, 400);
};
// Happens IN A LOOP 60fps
sketch.draw = function() {
if (sketch.mouseIsPressed) {
sketch.fill(0); // One argument -> greyscale
} else {
sketch.fill(255); // One argument -> greyscale
}
sketch.ellipse(sketch.mouseX, sketch.mouseY, 80, 80);
};
})
p5(sketch => {
// Happens just ONCE
sketch.setup = function() {
sketch.createCanvas(width, 400);
};
// Happens IN A LOOP
sketch.draw = function() {
if (sketch.mouseIsPressed) {
sketch.fill(0);
} else {
sketch.fill(255);
}
sketch.circle(sketch.mouseX, sketch.mouseY, 80);
sketch.rect(sketch.mouseX + 50, sketch.mouseY, 40);
//sketch.line(sketch.mouseX + 50, sketch.mouseY, 40, 100);
};
})
p5(sketch => {
sketch.setup = function() {
sketch.createCanvas(width, 400);
sketch.background(220);
// Set colors
//sketch.fill(`rgba(0, 250, 20, ${opacity})`);
sketch.fill(myColor);
sketch.stroke(127, 63, 120);
// Basic shapes
sketch.noStroke();
sketch.rect(40, 120, 120, 40);
sketch.circle(240, 240, 80);
//sketch.stroke(50);
sketch.triangle(300, 100, 320, 100, 310, 80);
// Flower
sketch.translate(580, 200);
/*
for (let i = 0; i < 10; i++) {
sketch.ellipse(0, 30, 20, 80);
sketch.rotate(sketch.PI / 5);
}
*/
const petals = d3.range(10);
petals.map(function() {
sketch.ellipse(0, 30, 20, 80);
sketch.rotate(sketch.PI / 5);
});
};
//sketch.draw = function() {};
})
p5(sketch => {
sketch.setup = function() {
sketch.createCanvas(width, 400);
sketch.background(220);
};
sketch.draw = function() {
// Set colors
sketch.fill(`rgba(0, 250, 20, 0.1)`);
sketch.stroke(127, 63, 120); // 3 arguments -> RGB
// Basic shapes
sketch.noStroke();
sketch.rect(40, 120, 120, 40);
sketch.circle(240, 240, 80);
//sketch.stroke(50);
sketch.triangle(300, 100, 320, 100, 310, 80);
// Flower
sketch.translate(580, 200);
/*
for (let i = 0; i < 10; i++) {
sketch.ellipse(0, 30, 20, 80);
sketch.rotate(sketch.PI / 5);
}
*/
const petals = d3.range(10);
petals.map(function() {
sketch.ellipse(0, 30, 20, 80);
sketch.rotate(sketch.PI / 5);
});
};
})
p5(sketch => {
let r, g, b;
sketch.setup = function() {
sketch.createCanvas(width, 400);
// Pick colors randomly
r = sketch.random(255);
g = sketch.random(255);
b = sketch.random(255);
};
const centerX = 360;
const centerY = 200;
sketch.draw = function() {
sketch.background(220);
// Circle
sketch.strokeWeight(20);
sketch.stroke(r, g, b);
sketch.fill(r, g, b, 50); // 4 arguments -> RGBA
sketch.circle(centerX, centerY, 200);
};
// Interactions
sketch.mousePressed = function() {
// Check if mouse is inside the circle
let d = sketch.dist(sketch.mouseX, sketch.mouseY, centerX, centerY);
//console.log(d);
if (d < 100) {
// Pick new random color values
r = sketch.random(255);
g = sketch.random(255);
b = sketch.random(255);
}
};
})
p5(sketch => {
const centerX = 360;
const centerY = 200;
sketch.setup = function() {
sketch.createCanvas(width, 400);
// hue, saturation, and brightness
sketch.colorMode(sketch.HSB, 255);
sketch.background(220);
// Circle
sketch.strokeWeight(20);
sketch.stroke(slider, 255, 255);
sketch.fill(slider, 255, 255, 127);
sketch.circle(centerX, centerY, 200);
};
sketch.draw = function() {};
})
p5(sketch => {
const centerX = 360;
const centerY = 200;
let slider;
sketch.setup = function() {
sketch.createCanvas(width, 400);
// hue, saturation, and brightness
sketch.colorMode(sketch.HSB, 255);
//sketch.print("hello");
//console.log("hello");
// slider has a range between 0 and 255 with a starting value of 127
slider = sketch.createSlider(0, 255, 127);
};
sketch.draw = function() {
sketch.background(220);
// Circle
sketch.strokeWeight(20);
sketch.stroke(slider.value(), 255, 255);
sketch.fill(slider.value(), 255, 255, 127);
sketch.circle(centerX, centerY, 200);
};
})
function* p5(sketch) {
const element = DOM.element('div');
// p5.js really likes its target element to already be in the DOM, not just
// floating around detached. So, before we call P5, we yield it, which puts
// in the DOM.
yield element;
// This is ‘instance mode’ in p5 jargon: instead of relying on lots of
// globals, we create a sketch that has its own copy of everything under p5.
const instance = new P5(sketch, element, true);
// This is the tricky part: when you run P5(sketch, element), it starts a
// loop that updates the drawing a bunch of times a second. If we were just
// to call P5 repeatedly with different arguments, the loops would all keep
// running, one on top of the other. So what we do is we use this cell
// as a generator, and then when that generator is interrupted, like
// when you update the code in the sketch() method, then we call instance.remove()
// to clean it up.
try {
while (true) {
yield element;
}
} finally {
instance.remove();
}
}
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.