Plotly = require("plotly.js-dist@2")
viewof x_val = Inputs.range([-2, 1], {value: -1.5, step: 0.05,
label: html`<b>x</b> — position of p₁`})
viewof y_val = Inputs.range([-2, 1], {value: 0.0, step: 0.05,
label: html`<b>y</b> — position of p₂`})
viewof theta_val = Inputs.range([0, 1], {value: 0.5, step: 0.05,
label: html`<b>θ</b> — blend (0 = p₂, 1 = p₁)`})
{
const f = t => t * t + 0.2;
const N = 200;
const ts = Array.from({length: N}, (_, i) => -2.1 + i * 3.2 / (N - 1));
const ys = ts.map(f);
const fp1 = f(x_val);
const fp2 = f(y_val);
const bx = theta_val * x_val + (1 - theta_val) * y_val;
const z_surf = f(bx);
const z_chord = theta_val * fp1 + (1 - theta_val) * fp2;
const gap = (z_chord - z_surf).toFixed(4);
const data = [
{
type: 'scatter', x: ts, y: ys, mode: 'lines',
line: {color: 'steelblue', width: 2.5},
name: 'f(t) = t\u00b2 + 0.2'
},
{
type: 'scatter',
x: [x_val, y_val], y: [fp1, fp2],
mode: 'lines+markers',
line: {color: 'black', width: 1.5},
marker: {color: 'black', size: 8},
name: 'Chord'
},
{
type: 'scatter', x: [bx], y: [z_surf], mode: 'markers',
marker: {color: 'red', size: 11, symbol: 'circle'},
name: `f(\u03b8p\u2081+(1-\u03b8)p\u2082) = ${z_surf.toFixed(3)}`
},
{
type: 'scatter', x: [bx], y: [z_chord], mode: 'markers',
marker: {color: 'green', size: 11, symbol: 'diamond-open',
line: {width: 3, color: 'green'}},
name: `\u03b8f(p\u2081)+(1-\u03b8)f(p\u2082) = ${z_chord.toFixed(3)}`
},
{
type: 'scatter', x: [bx, bx], y: [z_surf, z_chord], mode: 'lines',
line: {color: 'purple', width: 2, dash: 'dot'},
name: `gap = ${gap}`
}
];
const layout = {
title: 'Convex function f(t) = t\u00b2 + 0.2: chord lies above graph',
xaxis: {title: 't', range: [-2.2, 1.2],
zeroline: true, zerolinewidth: 0.8, zerolinecolor: '#888'},
yaxis: {title: 'f(t)', range: [-0.15, 2.6]},
legend: {x: 0.01, y: 0.99, bgcolor: 'rgba(255,255,255,0.85)'},
margin: {l: 50, r: 20, t: 45, b: 40},
height: 370,
annotations: [
{x: x_val, y: fp1, text: 'p\u2081', showarrow: true,
arrowhead: 2, ax: 25, ay: -35, font: {size: 13}},
{x: y_val, y: fp2, text: 'p\u2082', showarrow: true,
arrowhead: 2, ax: -25, ay: -35, font: {size: 13}}
]
};
const div = document.createElement('div');
Plotly.newPlot(div, data, layout, {responsive: true, displayModeBar: false});
return div;
}