Analyze quadratic and linear functions for plotting on Desmos.
Function TypeQuadratic
Vertex (h, k)(-1, -4)
X-Intercepts (Roots)x = 1, x = -3
Y-Intercept-3
Discriminant (Δ)16
Understanding Desmos Graphing Logic
A graphing calculator like Desmos operates on coordinate geometry principles. Whether you are dealing with linear functions ($y = mx + b$) or quadratic functions ($y = ax^2 + bx + c$), identifying key points is essential for accurate visualization. This tool helps you find those critical parameters before you plot them on a complex coordinate plane.
Key Parameters for Quadratic Functions
When graphing a parabola, the most significant point is the Vertex. This is the peak or the valley of the curve. The x-coordinate of the vertex is found using the formula $x = -b / (2a)$. Plugging this value back into the original equation gives you the y-coordinate.
Analyzing Roots and Intercepts
The Discriminant: Calculated as $b^2 – 4ac$, this value determines how many times your graph crosses the X-axis. A positive result means two real roots, zero means one touch-point, and negative means the graph never crosses the X-axis.
The Y-Intercept: This is simply the point where $x=0$. For any standard quadratic, the y-intercept is always the constant 'c'.
Practical Examples
Example 1: For the function $x^2 + 2x – 3$, the discriminant is $2^2 – 4(1)(-3) = 16$. Since 16 is positive, we expect two roots. Using the quadratic formula, we find them at $x=1$ and $x=-3$.
Example 2: A linear function where $a=0$, such as $2x + 5$, results in a straight line with a slope of 2 and a y-intercept of 5.
function calculateGraphData() {
var a = parseFloat(document.getElementById('coeffA').value);
var b = parseFloat(document.getElementById('coeffB').value);
var c = parseFloat(document.getElementById('coeffC').value);
var range = parseFloat(document.getElementById('graphRange').value) || 10;
if (isNaN(a) || isNaN(b) || isNaN(c)) {
alert("Please enter valid numeric coefficients.");
return;
}
var resType = document.getElementById('resType');
var resVertex = document.getElementById('resVertex');
var resRoots = document.getElementById('resRoots');
var resYInt = document.getElementById('resYInt');
var resDisc = document.getElementById('resDisc');
// Logic for linear vs quadratic
if (a === 0) {
resType.innerText = "Linear (y = mx + b)";
resVertex.innerText = "N/A (No Vertex)";
resDisc.innerText = "N/A";
resYInt.innerText = c;
if (b !== 0) {
var root = -c / b;
resRoots.innerText = "x = " + root.toFixed(2);
} else {
resRoots.innerText = "None (Parallel)";
}
} else {
resType.innerText = "Quadratic (ax² + bx + c)";
// Vertex
var h = -b / (2 * a);
var k = (a * h * h) + (b * h) + c;
resVertex.innerText = "(" + h.toFixed(2) + ", " + k.toFixed(2) + ")";
// Discriminant
var disc = (b * b) – (4 * a * c);
resDisc.innerText = disc.toFixed(2);
// Roots
if (disc > 0) {
var r1 = (-b + Math.sqrt(disc)) / (2 * a);
var r2 = (-b – Math.sqrt(disc)) / (2 * a);
resRoots.innerText = "x1 = " + r1.toFixed(2) + ", x2 = " + r2.toFixed(2);
} else if (disc === 0) {
var r = -b / (2 * a);
resRoots.innerText = "x = " + r.toFixed(2);
} else {
resRoots.innerText = "Complex Roots (No X-Int)";
}
resYInt.innerText = c.toFixed(2);
}
drawGraph(a, b, c, range);
}
function drawGraph(a, b, c, range) {
var canvas = document.getElementById('graphCanvas');
var ctx = canvas.getContext('2d');
var width = canvas.width;
var height = canvas.height;
// Clear
ctx.clearRect(0, 0, width, height);
// Draw Axis
ctx.strokeStyle = '#cbd5e0';
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(0, height / 2);
ctx.lineTo(width, height / 2); // X-axis
ctx.moveTo(width / 2, 0);
ctx.lineTo(width / 2, height); // Y-axis
ctx.stroke();
// Scale mapping
var scaleX = width / (range * 2);
var scaleY = height / (range * 2);
ctx.strokeStyle = '#3182ce';
ctx.lineWidth = 2;
ctx.beginPath();
var first = true;
for (var i = 0; i = 0 && canvasY <= height) {
if (first) {
ctx.moveTo(i, canvasY);
first = false;
} else {
ctx.lineTo(i, canvasY);
}
}
}
ctx.stroke();
}
// Initial Run
window.onload = function() {
calculateGraphData();
};