Consultant Designer & Developer
Tailwind CSSUtils: ArraysRams PaletteMindfully curated color palettes by mymindCORS Proxy using CorsProxy.ioDownload HTML as ImagePrint HTML ElementSubstratumClearable StoreChange CaseWhitespace charactersPretty TablesUtils: ObjectNotebook URLSeed ButtonHelper functions: 3D Geometryμ LodashGenerate a color palettePoisson SamplingTimerRatiosHelper functions: GeometryFit ‘N’ number of squares in a rectanglePDF ViewFeather IconsUse Tachyons CSS in ObservableGenerate a Contrasting Random Colorcanvas-sketch-utilSVG.js Wrapper
p5.js Kit for Observable
sketchWithP5((sketch) => {
// Setup
sketch.setup = function () {
sketch.createCanvas(600, 400);
sketch.background(255);
sketch.rectMode(sketch.CENTER);
sketch.noLoop(); // Remove this line if you need to animate
};
// Draw
sketch.draw = function () {
sketch.background(223, 0, 0);
sketch.translate(sketch.width / 2, sketch.height / 2);
sketch.strokeWeight(10);
sketch.stroke(255, 255, 0);
sketch.rect(0, 0, 200, 200);
};
})
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.
