Graph Plotter Tool: Visualize Your Data with Precision

Responsive Graph Plotter

Scroll to zoom, drag to pan. Try functions like Math.sin(x), x*x, Math.exp(x).

Features:

1. Interactive Zoom and Pan:

   • Use the mouse scroll wheel to zoom in and out.
   • Drag the canvas to pan around the graph.

2. Dynamic Scaling:

   • Adjusts the scale dynamically for smooth zooming and panning.

3. Polished Visuals:

   • Gradient background, faint grid lines, and distinct axes for a professional appearance.

4. Error Handling:

   • Alerts the user if the input function is invalid.

5. Real-Time Feedback:

   • The graph updates as you zoom, pan, or change the function.

---

How to Use:

1. Enter a function in the input box (e.g., Math.sin(x), x*x, Math.exp(x)).
2. Click "Plot Graph" to draw the function.
3. Use your mouse to zoom (scroll wheel) and pan (dragging).

Let me know if you’d like any further customizations or additional features! 😊

Here’s a list of more function examples you can try in the input field, along with explanations:

Common Mathematical Functions:

1. Linear Functions:

   • x: A straight line through the origin.
   • 2*x + 5: A straight line with a slope of 2 and a y-intercept of 5.

2. Quadratic Functions:

   • x*x or Math.pow(x, 2): A parabola.
   • x*x - 4*x + 3: A shifted quadratic equation.

3. Cubic Functions:

   • x*x*x or Math.pow(x, 3): A cubic curve.
   • x*x*x - 2*x*x + x: A custom cubic curve.

4. Trigonometric Functions (Requires Math. prefix):

   • Math.sin(x): Sine wave.
   • Math.cos(x): Cosine wave.
   • Math.tan(x): Tangent function (be careful near vertical asymptotes).
   • Math.sin(x) + Math.cos(x): A combination of sine and cosine.

5. Exponential and Logarithmic Functions:

   • Math.exp(x): Exponential function $e^x$.
   • Math.log(x): Natural logarithm $\ln(x)$ (valid only for $x > 0$).
   • Math.log10(x): Base-10 logarithm.

6. Absolute Values and Modulo:

   • Math.abs(x): Absolute value of $x$, which reflects $x$ below the x-axis to above it.
   • x % 2: Modulo operation (remainder of $x / 2$) creates a step-like pattern.

7. Square Roots:

   • Math.sqrt(Math.abs(x)): Square root of $x$ (works for $x \geq 0$).
   • Math.sqrt(x*x + 4): Custom function involving square roots.

8. Piecewise Functions (Conditional Logic):

   • (x < 0 ? x*x : x): Parabola for $x < 0$, linear for $x \geq 0$.
   • (x % 2 === 0 ? Math.sin(x) : Math.cos(x)): Alternates between sine and cosine based on even/odd $x$.

9. Periodic or Oscillatory Functions:

   • Math.sin(x) * Math.cos(x): Combined oscillations.
   • Math.sin(2 * x): A sine wave with double frequency.
   • Math.sin(x) + x / 5: Adds a linear trend to a sine wave.

10. Custom Functions:

    • Math.pow(Math.sin(x), 3): Cube of the sine function.
    • (Math.sin(x) + Math.cos(x)) * Math.exp(-0.1 * x): A damped sine-cosine combination.

---

How to Use:

• Enter any of the above functions into the input field.
• Click "Plot Graph", and the tool will evaluate and plot the graph on the canvas.

---

Example Function Inputs:

1. Math.sin(x) + Math.log(Math.abs(x) + 1) (Sine wave with logarithmic effect).
2. Math.exp(-0.1 * x) * Math.sin(x) (Damped sine wave).
3. (x > 0 ? x : -x*x) (Absolute value for $x > 0$, parabola for $x \leq 0$).
4. Math.abs(Math.sin(x * 2)) (Absolute sine wave with double frequency).
5. Math.tan(x) - x (Tangent curve with linear subtraction).

Let me know if you'd like more examples or an explanation of how to create custom mathematical functions!