Design Technologist
Published
Edited
Jan 6, 2022
1 star
plot([ease], [0, 16], [0, 1])
ease = x => sigmoid(Math.sin(x) * acceleration)
function sigmoid(t) {
return 1 / (1 + Math.exp(-t));
}
plot = function (functions, xDomain = [0,1], yDomain = [0,1]) {
if (!Array.isArray(functions)) {
functions = [functions];
}
const resolution = 1000;
let u = 300;
const xDiff = xDomain[1] - xDomain[0];
const yDiff = yDomain[1] - yDomain[0];
const r = yDiff / xDiff;
let d = [];
functions.forEach((f, idx) => {
for (let i = 0; i < resolution; i++) {
const t = i / resolution;
const x = xDomain[0] + xDiff * t;
d.push({x, y: f(x), z: idx})
}
});
return LineChart(d, {
x: d => d.x,
y: d => d.y,
z: d => d.z,
xType: d3.scaleLinear,
yLabel: "y",
zFormat: d => d.y,
xDomain,
yDomain,
width,
height: u,
title: d => Math.round(d.y*100)/100,
color: "steelblue"
});
}
import {LineChart} from "@d3/multi-line-chart"
import { html } from "@observable/htl"
import { icon } from "@mateh/icon"
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.
