bernstein_vs_chebyshev = { const svgheight = 335; const svgwidth = 320; const margin = {top:10, bottom: 10, left: 10, right: 10} const pts = chebpts(129); const msvg = d3.select(DOM.svg(svgwidth, svgheight)); const bsvg = d3.select(DOM.svg(svgwidth, svgheight)); const csvg = d3.select(DOM.svg(svgwidth, svgheight)); const vsvg = d3.select(DOM.svg(svgwidth, svgheight)); const my = d3.scaleLinear().domain([-1.05, 1.05]).range([svgheight-margin.top, margin.bottom]) const mx = d3.scaleLinear().domain([-1, 1]).range([margin.left, svgwidth-margin.right]) const by = d3.scaleLinear().domain([-1.05, 1.05]).range([svgheight-margin.top, margin.bottom]) const bx = d3.scaleLinear().domain([-1, 1]).range([margin.left, svgwidth-margin.right]) const cy = d3.scaleLinear().domain([-1.05, 1.05]).range([svgheight-margin.top, margin.bottom]) const cx = d3.scaleLinear().domain([-1, 1]).range([margin.left, svgwidth-margin.right]) const vy = d3.scaleLinear().domain([-1.05, 1.05]).range([svgheight-margin.top, margin.bottom]) const vx = d3.scaleLinear().domain([-1, 1]).range([margin.left, svgwidth-margin.right]) const mline = d3.line().x(d => mx(d[0])).y(d => my(d[1])); const bline = d3.line().x(d => bx(d[0])).y(d => by(d[1])); const cline = d3.line().x(d => cx(d[0])).y(d => cy(d[1])); const vline = d3.line().x(d => vx(d[0])).y(d => vy(d[1])); const mdata = [[1,0,0,0], [0,1,0,0], [.5,0,.5,0], [0,.75,0,.25]]; const bdata = [[10,-15,6,-1], [6,-3,-6,3], [6,3,-6,-3], [10,15,6,1]]; const cdata = [[1,0,0,0], [0,1,0,0], [0,0,1,0], [0,0,0,1]]; const vdata = [[1/6,-2/6,2/6,-1/6], [2/6,-2/6,-2/6,2/6], [2/6,2/6,-2/6,-2/6], [1/6,2/6,2/6,1/6]]; const mcurve = msvg.append("g") .attr("fill", "none").attr("stroke-width", 1.5) .selectAll("path") .data(mdata) .enter().append("path") .attr("d", d => mline(pts.map(p => [p, chebeval(d, p)]))) .attr("stroke", (d, i) => d3.schemeCategory10[i]); const bcurve = bsvg.append("g") .attr("fill", "none").attr("stroke-width", 1.5) .selectAll("path") .data(bdata) .enter().append("path") .attr("d", d => bline(pts.map(p => [p, 1/32 * chebeval(d, p)]))) .attr("stroke", (d, i) => d3.schemeCategory10[i]); const ccurve = csvg.append("g") .attr("fill", "none").attr("stroke-width", 1.5) .selectAll("path") .data(cdata) .enter().append("path") .attr("d", d => cline(pts.map(p => [p, chebeval(d, p)]))) .attr("stroke", (d, i) => d3.schemeCategory10[i]); const vcurve = vsvg.append("g") .attr("fill", "none").attr("stroke-width", 1.5) .selectAll("path") .data(vdata) .enter().append("path") .attr("d", d => vline(pts.map(p => [p, chebeval(d, p)]))) .attr("stroke", (d, i) => d3.schemeCategory10[i]); return html`

Some cubic polynomial bases

${msvg.node()}
Monomial basis

${bsvg.node()}
Bernstein basis

${csvg.node()}
Chebyshev basis

${vsvg.node()}
Chebyshev values basis

` }