Published
Edited
Dec 8, 2019
Importers
2 stars
{
const w = width / 2;
const h = width / 2;
const padding = 30;
const pointNum = 500;
let svg = d3.select(DOM.svg(w, h));
let xScale = d3.scaleLinear([0, 1], [padding, w - padding]);
let yScale = d3.scaleLinear([1, 0], [padding, h - padding]);
let clipPath = svg
.append('clipPath')
.attr('id', 'chart-area')
.append('rect')
.attr('x', padding)
.attr('y', padding)
.attr('width', w - 2 * padding)
.attr('height', h - 2 * padding);
const curves = [];
for (let i = 0; i <= n; ++i) {
const bi_4 = [];
for (let t = 0; t <= pointNum; t++) {
bi_4.push([t / pointNum, bernstein_poly(i, n, t / pointNum)]);
}
curves.push(bi_4);
}
let line_log = d3
.line()
.x(d => xScale(d[0]))
.y(d => yScale(d[1]));
for (let curve of curves) {
svg
.append('path')
.datum(curve)
.attr("clip-path", "url(#chart-area)")
.attr('fill', 'none')
.attr('stroke', randomColor())
.attr('stroke-width', 2)
.attr('d', line_log);
}
let xAxis = d3.axisBottom(xScale);
let yAxis = d3.axisLeft(yScale);
svg
.append('g')
.attr('transform', `translate(0,${h - padding})`)
.call(xAxis);
svg
.append('g')
.attr('transform', `translate(${padding},0)`)
.call(yAxis);
return svg.node();
}
function factorial(n) {
let res = BigInt(1);
for (let i = 1n; i <= n; i += 1n) res = res * i;
return res;
}
function binomial(n, k) {
return Number(factorial(n) / (factorial(k) * factorial(n - k)));
}
function bernstein_poly(i, n, t) {
return binomial(n, i) * t ** i * (1 - t) ** (n - i);
}
function randomColor() {
const color = [
Math.floor(Math.random() * 256),
Math.floor(Math.random() * 256),
Math.floor(Math.random() * 256)
].join(',');
return `rgb(${color})`;
}
import { slider } from '@jashkenas/inputs'
d3 = require('d3')
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.
