FunctionVisor

FunctionVisor is a lightweight interactive function plotter built with plain HTML, CSS, and JavaScript. It renders mathematical expressions on a Cartesian plane, supports panning and zooming, and includes a value table for evaluating specific points on the curve.

The current interface is written in Spanish, while the repository documentation is maintained in English.

Overview

FunctionVisor is designed as a client-side static web app with no build step and no runtime framework. The project can be opened directly in a browser or served through any minimal static file server.

Features

• Interactive graph rendering on an HTML5 canvas
• Pan with pointer drag
• Zoom with mouse wheel or touch pinch gestures
• Live cursor coordinate display
• Configurable X and Y axis step values
• Value table mode for evaluating custom x inputs
• Automatic centering on selected table values
• Responsive layout for desktop and mobile screens
• No bundler or installation required

Supported Expression Syntax

Expressions are evaluated in the browser. The app currently supports:

• Variable: x
• Operators: +, -, *, /, ^, (, )
• Numeric literals
• Constants: pi, e
• Functions: sin, cos, tan, asin, acos, atan, sqrt, abs, log, ln, exp, floor, ceil, round, min, max, pow

Examples:

• sin(x) * x / 2
• x^2 - 4
• sqrt(abs(x))
• cos(x) + 2

Project Structure

.
├── index.html
├── assets
│   ├── css
│   │   └── styles.css
│   └── js
│       └── app.js
└── .github

Getting Started

Option 1: Open directly

Open index.html in a modern browser.

Option 2: Serve locally

Using Python:

python3 -m http.server 8000

Then open http://localhost:8000.

Usage

1. Enter a function in the input field.
2. Click Visualizar.
3. Drag on the canvas to move around the graph.
4. Use the mouse wheel or touch pinch to zoom.
5. Optionally define custom axis steps.
6. Enable the value table to evaluate specific x values and mark them on the graph.

Development

This repository currently uses no package manager, no bundler, and no test runner. Development is intentionally simple:

• Edit index.html for markup changes
• Edit assets/css/styles.css for styling
• Edit assets/js/app.js for graphing and interaction logic
• Reload the page in the browser to validate changes

Quality Notes

• The project is fully client-side.
• Function expressions are transformed and evaluated in the browser.
• Input validation exists, but any future expansion of the evaluator should be reviewed carefully from a security perspective.

GitHub Pages

This repository includes a GitHub Actions workflow for deploying the static site to GitHub Pages.

To enable it:

1. Push the repository to GitHub.
2. In the repository settings, open Pages.
3. Set the source to GitHub Actions.
4. Push to main to trigger deployment.

Contributing

Contributions are documented in CONTRIBUTING.md.

Security

If you discover a security issue, follow the reporting process in SECURITY.md.

License

This project is licensed under the MIT License. See LICENSE.