dataviz + interactive analytics
p5(sketch => {
sketch.setup = () => {
sketch.createCanvas(width, 400);
};
let angle = 0;
sketch.draw = () => {
// Set up the initial canbas
sketch.background(0);
sketch.translate(sketch.width / 2, sketch.height / 2);
sketch.rectMode(sketch.CENTER);
sketch.fill(255);
// assign h, could also use d3 scale (scaleLinear) to do this rescaling
let h = sketch.map(sketch.sin(angle), -1, 1, 0, 100); // 100 maxheight
// Key drawing function
sketch.rect(0, 0, 10, h);
// Increment angle
angle += 0.1;
}
})
p5(sketch => {
sketch.setup = () => {
sketch.createCanvas(width, 400);
};
let angle = 0;
// Visual Display Params
let barWidth = 40;
let barPadding = 2;
let barHeight = 120;
// Scaling once!
const angleScale = d3.scaleLinear()
.domain([-1, 1]) // sin
.range([0, barHeight]);
sketch.draw = () => {
// Set up the initial cannas
sketch.background(0);
sketch.translate(sketch.width / 2, sketch.height / 2);
sketch.rectMode(sketch.CENTER);
sketch.fill(255);
let offset = 0;
for (let x = 0; x < sketch.width; x += barWidth) {
let a = angle + offset;
let h = angleScale(sketch.sin(a));
sketch.rect(x - sketch.width / 2 + barWidth / 2, 0, barWidth - 2, h); // have slight gap
offset += angleOffset;
}
angle += 0.1;
}
})
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.
