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 Buttonμ 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-utilp5.js Kit for ObservableSVG.js Wrapper
Helper functions: 3D Geometry
projectPointOnPlane(
[2.5, 1.5, 1],
[
[0, 0, 4],
[1, 1, 4],
[2, 1, 4]
]
)
// Formula from https://math.stackexchange.com/a/100766
function projectPointOnPlane(pt, plane) {
const [x, y, z] = pt;
const [a, b, c] = planeNormal([], ...plane);
const [d, e, f] = plane[0];
const t =
(a * d - a * x + b * e - b * y + c * f - c * z) / (a * a + b * b + c * c);
return [x + t * a, y + t * b, z + t * c];
}
distance([0, 0, 0], [0, 0, 2])
distance = GLVec3.distance
// Based on @mattdesl's get-plane-normal NPM package
// https://github.com/mattdesl/get-plane-normal/blob/master/index.js
function planeNormal(out, point1, point2, point3) {
let tmp = [0, 0, 0];
GLVec3.sub(out, point1, point2);
GLVec3.sub(tmp, point2, point3);
GLVec3.cross(out, out, tmp);
return GLVec3.normalize(out, out);
}
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.
