artist & programmer
imageURL = await FileAttachment("nyan_cat.png").url();
p5(sketch => {
let img;
sketch.preload = function() {
img = sketch.loadImage(imageURL); // note use of imageURL variable here! no quotes.
};
sketch.setup = function() {
sketch.createCanvas(width, 300);
};
sketch.draw = function() {
sketch.background("#001b42");
sketch.image(img, 0, 0);
}
})
dataURL = await FileAttachment("denver-april-weather.csv").url();
p5(sketch => {
let data;
// chart edges
let chartCenterX = 200;
let chartCenterY = 180;
let chartRadiusMin = 50;
let chartRadiusMax = 130;
let chartDomainMin = 20;
let chartDomainMax = 100;
let barWidth = 4;
sketch.preload = function() {
// note use of dataURL variable here! no quotes.
data = sketch.loadTable(dataURL, "csv", "header");
};
sketch.setup = function() {
sketch.createCanvas(400, 400);
sketch.angleMode(sketch.DEGREES);
sketch.noLoop();
};
sketch.draw = function() {
sketch.background(255);
sketch.textSize(10);
let rowCount = data.getRowCount();
sketch.noStroke();
for (let r = 0; r < rowCount; r++) {
let a = r / rowCount * 360 - 90; // -90 to 270, start at 12 o'clock
sketch.push();
sketch.translate(chartCenterX, chartCenterY);
sketch.rotate(a);
let minTemp = data.getNum(r, "tempmax");
let maxTemp = data.getNum(r, "tempmin");
let radiusMin = sketch.map(minTemp,
chartDomainMin, chartDomainMax,
chartRadiusMin, chartRadiusMax);
let radiusMax = sketch.map(maxTemp,
chartDomainMin, chartDomainMax,
chartRadiusMin, chartRadiusMax);
sketch.stroke(0);
sketch.noFill();
sketch.line(radiusMin, 0, radiusMax, 0);
sketch.noStroke();
sketch.fill('#ED8011');
sketch.ellipse(radiusMax, 0, 10);
sketch.fill('#75C8E6');
sketch.ellipse(radiusMin, 0, 10);
sketch.pop();
}
// title
sketch.noStroke();
sketch.fill(0);
sketch.textStyle(sketch.BOLD);
sketch.textAlign(sketch.CENTER, sketch.CENTER);
sketch.textSize(12);
sketch.text("Low and High Temperatures, April 2022", 200, 350);
sketch.textStyle(sketch.NORMAL);
sketch.text("Denver", chartCenterX, chartCenterY);
}
})
import {p5} from "@tmcw/p5"
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.
