math-function-plotter-plotly_skill

Overview

This skill generates interactive, iframe-ready mathematical function plots using Plotly.js optimized for narrow textbook layouts. It produces a complete MicroSim package: standalone HTML, responsive CSS, JavaScript interactivity, documentation, and metadata ready for embedding. Visuals include hover tooltips, keyboard-accessible sliders, and responsive sizing for mobile and tablet. The output is tailored for educational use in calculus, precalculus, physics, and engineering.

How this skill works

I convert a user-provided function expression into a JavaScript f(x) implementation, sample the domain with a performant number of points, and auto-calculate a padded y-range when not supplied. The generator creates an accessible Plotly trace for the curve plus a movable point controlled by an HTML range input; tooltip templates show coordinates with precision. Files produced include main.html, style.css, script.js, index.md documentation, and metadata.json following Dublin Core fields for easy integration into a textbook site.

When to use it

• When you need an embeddable interactive graph of y = f(x) for a textbook or lesson
• To create slider-driven explorations of maxima, zeros, asymptotes, or limits
• For visualizing trigonometric, polynomial, exponential, logarithmic, or physics-based functions
• When you want responsive plots that work in narrow iframe layouts and mobile viewports
• To generate a packaged MicroSim with docs and metadata ready for a lesson site

Best practices

• Request function, title, and domain up front; provide y-range only if you need strict clipping
• Use 500 sample points minimum for smooth curves but keep total points under 2000 for performance
• Choose domains that highlight key behavior (1–3 periods for trig, roots for polynomials)
• Provide educational tooltip text and lesson prompts in the documentation rather than raw coordinates
• Ensure keyboard accessibility by retaining native HTML range controls and test at widths 320px–1200px

Example use cases

• Interactive sine/cosine explorer with slider to demonstrate phase and amplitude
• Quadratic plotter showing vertex, roots, and dynamic point to explore f(x) values
• Exponential growth/decay visualization for chemistry or population models
• Projectile motion trajectory emulator for physics lessons with domain tuned to range
• Logarithm visualization with domain validation and guided student activities