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 SamplingTimerRatiosFit ‘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: Geometry
angleOfInclination = (x1, y1, x2, y2) => Math.atan2(y2 - y1, x2 - x1)
divideLine = (x1, y1, x2, y2, ratio) => [
x1 + ratio * (x2 - x1),
y1 + ratio * (y2 - y1)
]
partitionLine = (x1, y1, x2, y2, parts) =>
Array.from({ length: parts + 1 })
.map((_, i) => divideLine(x1, y1, x2, y2, i / parts))
.reduce((acc, v, i, src) => {
if (i === 0) return acc;
return [...acc, [src[i - 1], v]];
}, [])
rotatePoint = (x, y, angle, xc = 0, yc = 0) => {
const xO = x - xc;
const yO = y - yc;
const xOR = xO * Math.cos(angle) - yO * Math.sin(angle);
const yOR = xO * Math.sin(angle) + yO * Math.cos(angle);
return [xOR + xc, yOR + yc];
}
distance = (x1, y1, x2, y2) =>
Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2))
function movePointAtAngle(x, y, angle, distance) {
return [x + Math.sin(angle) * distance, y - Math.cos(angle) * distance];
}
midpointOfALine = (x1, y1, x2, y2) => [(x1 + x2) / 2, (y1 + y2) / 2]
slope = (x1, y1, x2, y2) => (y2 - y1) / (x2 - x1)
distanceFromPointToLine = (point, line) => {
const [x0, y0] = point;
const [[x1, y1], [x2, y2]] = line;
return (
Math.abs((y1 - y2) * x0 + (x2 - x1) * y0 + x1 * y2 - x2 * y1) /
Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2))
);
}
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.
