Published
Edited
Sep 1, 2021
1 fork
1 star
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
// You can change the exponent
exp = 2
Insert cell
// If you change this things will break
fn = x => x ** exp
Insert cell
// https://www.mathsisfun.com/calculus/power-rule.html
df = x => exp * Math.pow(x, exp - 1)
Insert cell
y1 = fn(x1)
Insert cell
y2 = fn(x2)
Insert cell
tanM = df(x1)
Insert cell
tanB = y1 - tanM * x1
Insert cell
tanPts = xdomain.map(x => [x, tanM * x + tanB]);
Insert cell
secM = (y2 - y1) / (x2 - x1)
Insert cell
secB = y1 - secM * x1
Insert cell
secPts = xdomain.map(x => [x, secM * x + secB]);
Insert cell
c = d3.schemeSet2
Insert cell
line = d3.line()
.x(d => x(d[0]))
.y(d => y(d[1]))
Insert cell
data = {
const out = [];
for (let i = 0; i < w; i++){
const dx = x.invert(i);
const dy = fn(dx);
out.push([dx, dy])
}
return out;
}
Insert cell
x = d3.scaleLinear(xdomain, [0, w])
Insert cell
y = d3.scaleLinear(ydomain, [h, 0])
Insert cell
xdomain = [-10, 10]
Insert cell
ydomain = [-100, 100]
Insert cell
margin = ({left: 8, right: 6, top: 7, bottom: 7})
Insert cell
size = 400
Insert cell
w = size - margin.left - margin.right
Insert cell
h = size - margin.top - margin.bottom
Insert cell
import { funplot } from "@mbostock/funplot"
Insert cell

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.
Learn more