In New Zealand being kid of human.
We might make mistakes but we will make other things too. -
Michael Joseph Savage
p = new Path2D('M10 10 h 80 v 80 h -80 Z');
p5((sketch) => {
sketch.setup = function () {
const cnv = sketch.createCanvas(width, 300);
cnv.id('canvas');
const canvas = document.getElementById('canvas'); // not elegant code but it's just an example
const canv = canvas.getContext("2d");
sketch.stroke(30, 80, 255);
sketch.strokeWeight(2);
let data = d3.range(9).map((i) => Math.random() * 10);
let fx = (_) => sketch.map(_, 0, 9, 0, width);
let fy = (_) => sketch.map(_, 0, 10, 100, 300);
let line = d3
.line()
.x((d, i) => fx(i))
.y((d) => fy(d))
//.curve(d3.curveCatmullRom.alpha(0.5));
//.curve(d3.curveBundle.beta(0.5));
.curve(d3.curveBasis); //cubic b-spline
//get path of SVG
let path = new Path2D(line(data));
//draw curve--line
canvas.getContext("2d").stroke(path);
canv.stroke(p); // svg path
sketch.noLoop();
};
sketch.draw = function () {
// sketch.background("#001b42");
};
})
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.
