{
const curve = Array.from({ length: 401 }, (_, i) => {
const x = -10 + i * 0.05;
return { x, y: a * x * x + b * x + c };
});
const points = [];
const disc = b * b - 4 * a * c;
if (a !== 0 && disc >= 0) {
const r1 = (-b + Math.sqrt(disc)) / (2 * a);
const r2 = (-b - Math.sqrt(disc)) / (2 * a);
points.push({ x: r1, y: 0, type: "Root", label: `x=${r1.toFixed(2)}` });
if (disc > 0) points.push({ x: r2, y: 0, type: "Root", label: `x=${r2.toFixed(2)}` });
} else if (a === 0 && b !== 0) {
const root = -c / b;
points.push({ x: root, y: 0, type: "Root", label: `x=${root.toFixed(2)}` });
}
const curve_plot = Plot.plot({
height: 400,
grid: true,
marginLeft: 40,
marginRight: 20,
x: { domain: [-10, 10], label: "x axis" },
y: { domain: [-10, 10], label: null }, // Removed Y label to save space
marks: [
Plot.ruleY([0], { stroke: "#888", strokeWidth: 1.5 }),
Plot.ruleX([0], { stroke: "#888", strokeWidth: 1.5 }),
Plot.line(curve, { x: "x", y: "y", stroke: "steelblue", strokeWidth: 3 }),
Plot.dot(points, { x: "x", y: "y", fill: d => d.type === "Root" ? "#e63946" : "#457b9d", r: 6, stroke: "white", strokeWidth: 2 }),
Plot.text(points, { x: "x", y: "y", text: "label", dy: -15, fill: "currentColor", stroke: "white", strokeWidth: 4, fontWeight: "bold", fontSize: 12 })
]
});
// Ensure the SVG fills the card width
curve_plot.style.width = "100%";
return curve_plot;
}