viewof x0_x = Inputs.number([-10, 10], {label: "x0 (x-coor):", step: 1, value: 1})
viewof x0_y = Inputs.number([-10, 10], {label: "x0 (y-coordinate):", step: 1, value: -3})
viewof x1_x = Inputs.number([-10, 10], {label: "x1 (x-coordinate):", step: 1, value: 5})
viewof x1_y = Inputs.number([-10, 10], {label: "x1 (y-coordinate):", step: 1, value: 6})
// Recombine into coordinate arrays
x0_coords = [x0_x, x0_y]
x1_coords = [x1_x, x1_y]
// Create a slider for parameter t
viewof t_slider = Inputs.range([0, 1], {step: 0.01, value: 0.5, label: "Parameter t"})
// Calculate the point on the segment
current_point = [
(1 - t_slider) * x0_coords[0] + t_slider * x1_coords[0],
(1 - t_slider) * x0_coords[1] + t_slider * x1_coords[1]
]
// Create the plot using Observable Plot
Plot.plot({
title: "Line Segment Visualization",
x: {domain: [-6, 10], label: "X-axis"},
y: {domain: [-6, 10], label: "Y-axis"},
grid: true,
marks: [
Plot.line([[x0_coords[0], x1_coords[0]], [x0_coords[1], x1_coords[1]]], {stroke: "lightgray", strokeWidth: 3}),
Plot.dot([x0_coords], {r: 8, fill: "red", title: `x0: (${x0_coords[0]}, ${x0_coords[1]})`}),
Plot.dot([x1_coords], {r: 8, fill: "blue", title: `x1: (${x1_coords[0]}, ${x1_coords[1]})`}),
Plot.dot([current_point], {r: 10, fill: "green", title: `Current Point (t=${t_slider.toFixed(2)}): (${current_point[0].toFixed(2)}, ${current_point[1].toFixed(2)})`})
]
})