Published
Edited
Aug 3, 2020
12 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
dottie_cobweb = {
let w = Math.min(900, width);
let h = 0.5 * w;
let plot = plotter({
xDomain: [-4, 4],
yDomain: [2, -2],
width: w,
height: h
});
plot.func(Math.cos, { stroke: '#1f77b4', width: 3 });
plot.func(x => x, { stroke: 'black', width: 3 });

let x = x0;
let xs = [];
let segments = [{ x: x, y: x }];
for (let i = 0; i < n; i++) {
let y = Math.cos(x);
segments.push({ x: x, y: y });
x = y;
segments.push({ x: x, y: x });
}
plot.polyline(segments, { width: 0.5 });

plot.point(x0, x0, { fill: 'green' });
plot.point(x, x, { fill: 'red' });

d3.select(dottie_value)
.select('#dottie_approx')
.text(`${d3.format(0.4)(x)}`);

let svg = d3.select(plot.node);
return svg.node();
}
Insert cell
style = html`<style>
input {
width: 400px !important;
}
</style>`
Insert cell
import { plotter } from '@kjerandp/plotter'
Insert cell
import { slider } from "@jashkenas/inputs"
Insert cell
d3 = require('d3@5')
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