math-function-plotter-plotly

name

math-function-plotter-plotly

description

This skill generates interactive mathematical function plots using Plotly.js for iframe embedding in intelligent textbooks. Creates visualizations with hover tooltips, interactive sliders to move points along curves, responsive design optimized for narrow layouts, and comprehensive educational documentation. Use this when users request plotting mathematical functions, graphing equations, visualizing f(x), or creating interactive function explorers for calculus, precalculus, physics, or engineering courses.

Math Function Plotter - Plotly.js MicroSim Generator

Overview

This skill generates interactive mathematical function plots using the Plotly.js JavaScript library. Each MicroSim is optimized for iframe embedding in narrow textbook layouts with minimal margins, responsive design, hover tooltips showing precise coordinates, and interactive sliders allowing users to explore points along the curve.

The skill creates complete MicroSim packages following the repository's standardized structure, including standalone HTML files, responsive CSS, interactive JavaScript, comprehensive markdown documentation, and Dublin Core metadata.

When to Use This Skill

Invoke this skill when users request:

• "Plot a mathematical function"
• "Graph the equation y = ..."
• "Visualize f(x) = ..."
• "Create an interactive function plotter"
• "Show me a graph of [trigonometric/polynomial/exponential] function"
• "Make a plot I can embed in my textbook"
• "Generate a calculus visualization"
• "Create an interactive sine/cosine/tangent graph"

Workflow

Follow these steps to create a mathematical function plot MicroSim:

Step 1: Gather Requirements

Ask the user for the following information:

Required:

• Function expression: The mathematical function to plot (e.g., "sin(x)", "x^2", "e^(-x^2)")
• Title: Name for the MicroSim (e.g., "Sine Function", "Quadratic Function")
• Domain: Range of x-values to plot [xMin, xMax]

Optional (with smart defaults):

• Range: Y-axis limits [yMin, yMax] (auto-calculated if not provided)
• Interactive point: Initial x-position for the slider (default: midpoint of domain)
• Slider step: Increment for slider movement (default: (xMax - xMin) / 100)
• Axis labels: Custom labels for x and y axes (default: "x" and "y")
• Subtitle: Brief description (default: function expression)
• Context: Course/chapter where this will be used (for educational content)

Example conversation:

User: "Create a plot for the sine function"
Assistant: "I'll create an interactive sine function plot. Let me gather some details:

- Title: 'Sine Function Visualization'
- Function: sin(x)
- Domain: Would you like -2π to 2π (approximately -6.28 to 6.28)?
- Is this for a specific course or chapter?"

Use clear, friendly language when prompting users. Provide sensible defaults based on common mathematical conventions.

Step 2: Create Directory Structure

Create the MicroSim directory following the standardized pattern:

docs/sims/[microsim-name]/
├── main.html
├── style.css
├── script.js
├── index.md
└── metadata.json

Naming conventions:

• Use kebab-case (lowercase with hyphens)
• Be descriptive but concise
• Examples: sine-function, quadratic-parabola, exponential-decay, gaussian-bell-curve

Step 3: Generate main.html

Use the template from assets/template-iframe-main.html and replace placeholders:

Placeholder replacements:

• {{TITLE}} → Full title (e.g., "Sine Function Visualization")
• {{SUBTITLE}} → Function expression or description (e.g., "y = sin(x)")
• {{X_MIN}} → Minimum x value (e.g., -6.28)
• {{X_MAX}} → Maximum x value (e.g., 6.28)
• {{X_STEP}} → Slider step size (e.g., 0.01)
• {{INITIAL_X}} → Initial slider position (e.g., 0)

Key features to preserve:

• Minimal body margins (margin: 0; padding: 0;)
• Plotly.js CDN link (v2.27.0 or latest stable)
• Link to external style.css and script.js
• Semantic HTML5 structure

Step 4: Generate style.css

Use the template from assets/template-iframe-style.css.

Critical requirements:

• Body margins: MUST be margin: 0; padding: 0; for iframe embedding
• Container padding: Maximum 5px (reduces to 2px on mobile)
• Header margins: Maximum 5px top, 2px bottom
• Background: Use aliceblue (repository standard)
• Responsive breakpoints: 768px (tablet), 480px (mobile)
• Plot height: 400px desktop, 300px tablet, 250px mobile

Testing: Ensure the visualization looks good at widths from 320px to 1200px.

Step 5: Generate script.js

Use the template from assets/template-script.js and replace placeholders:

Placeholder replacements:

• {{FUNCTION_JS}} → JavaScript function definition

  function f(x) {
      return Math.sin(x);  // Example
  }
  

• {{X_MIN}}, {{X_MAX}} → Domain limits
• {{Y_MIN}}, {{Y_MAX}} → Range limits (or calculate automatically)
• {{FUNCTION_LABEL}} → Legend label (e.g., "y = sin(x)")
• {{X_LABEL}} → X-axis label (default: "x")
• {{Y_LABEL}} → Y-axis label (default: "y")
• {{FILENAME}} → Export filename (e.g., "sine-function")

Function conversion guide:

Common mathematical expressions to JavaScript:

Math Notation	JavaScript Code
sin(x)	Math.sin(x)
cos(x)	Math.cos(x)
tan(x)	Math.tan(x)
e^x	Math.exp(x)
x^2	Math.pow(x, 2) or x**2
√x	Math.sqrt(x)
ln(x)	Math.log(x)
log₁₀(x)	Math.log10(x)
|x|	Math.abs(x)

Auto-calculate range if not provided:

// Sample the function to find y range
const samplePoints = 100;
const yValues = [];
for (let i = 0; i <= samplePoints; i++) {
    const x = xMin + (xMax - xMin) * i / samplePoints;
    yValues.push(f(x));
}
const yMin = Math.min(...yValues) * 1.1;  // Add 10% padding
const yMax = Math.max(...yValues) * 1.1;

Step 6: Create index.md Documentation

Use the template from assets/template-index.md and customize:

Required sections:

1. YAML frontmatter with title, description, quality_score
2. Level 1 header matching the title
3. Interactive visualization (iframe embed)
4. Fullscreen link button
5. Copy-paste embed code in HTML code block
6. Overview - Purpose and features
7. How to Use - Step-by-step instructions
8. Educational Applications - Subject-specific use cases
9. Customization Guide - How to modify the MicroSim
10. Technical Details - Library version, implementation notes
11. Lesson Plan Suggestions - Learning objectives, activities, assessments
12. References - Links to documentation and resources

Customization for specific functions:

• Trigonometric: Mention periodicity, amplitude, phase shift
• Polynomial: Discuss degree, roots, turning points
• Exponential: Highlight growth/decay, asymptotes
• Logarithmic: Note domain restrictions, inverse relationships

Lesson plan quality: Provide specific, actionable activities with questions that use the slider interactivity. Example:

**Activity 1: Finding Specific Values (10 minutes)**

1. Use the slider to find f(π/2). What value do you observe?
2. At what x-value does f(x) = 0.5? (Approximate using the slider)
3. Challenge: Find all x-values where f(x) = 0 in the visible range.

Step 7: Create metadata.json

Use the template from assets/template-metadata.json:

Required Dublin Core fields:

• title - Same as MicroSim title
• description - 1-2 sentence summary
• creator - Author name or organization
• date - Creation date (YYYY-MM-DD format)
• subject - Array of keywords (include "mathematics" plus specific topics)
• type - Always "Interactive Simulation"
• format - Always "text/html"
• language - Always "en-US"
• rights - License (typically "CC BY 4.0")

Optional educational fields:

• audience - Target learners (e.g., "High school students", "College undergraduates")
• educationalLevel - Grade/level (e.g., "Grade 11-12", "Undergraduate")
• learningResourceType - Always "Interactive Plot"
• interactivityType - Always "active"
• typicalLearningTime - ISO 8601 duration (e.g., "PT10M" for 10 minutes)

Subject keyword selection:

Choose 3-5 specific keywords from:

• Mathematics: algebra, geometry, trigonometry, calculus, statistics
• Physics: kinematics, waves, thermodynamics, electromagnetism
• Engineering: signals, control-systems, circuits
• Computer Science: algorithms, numerical-methods, machine-learning

Step 8: Test and Validate

Perform the following checks:

Visual Testing:

1. Open main.html in a browser
2. Verify the plot renders correctly
3. Check that axes are labeled and readable
4. Confirm tooltips appear on hover
5. Test slider interaction - point should move smoothly along curve
6. Resize browser window - verify responsive behavior

Functional Testing:

1. Slider range: Ensure slider covers the full x domain
2. Point accuracy: Verify point position matches slider value
3. Tooltips: Check coordinate precision (3 decimal places)
4. Export: Test PNG export functionality
5. Mobile: Test on small screen sizes (320px width minimum)

Documentation Review:

1. Verify iframe embed works in index.md
2. Check all placeholders are replaced
3. Ensure lesson plan is specific to the function
4. Validate all markdown links work

Metadata Validation:

1. Confirm metadata.json is valid JSON
2. Check all required Dublin Core fields are present
3. Verify subject keywords are relevant

Integration (if part of a textbook project):

1. Update mkdocs.yml navigation if needed
2. Add references to the MicroSim in relevant chapters
3. Link from glossary terms if applicable

Best Practices

Educational Design

1. Tooltip content: Use educational definitions, not just raw coordinates

   • Good: "At x=π/2 (1.571), sin(x) reaches its maximum value of 1"
   • Avoid: "1.571, 1.000"

2. Slider purpose: Design slider activities that promote exploration

   • "Find where f(x) = 0"
   • "What happens as x approaches infinity?"
   • "Locate the maximum value"

3. Lesson integration: Reference specific textbook concepts

   • Link to chapter sections
   • Use consistent notation with textbook
   • Address common misconceptions

Technical Design

1. Function sampling: Use 500 points minimum for smooth curves

2. Domain selection: Choose domains that show key features

   • Trigonometric: Show 1-3 complete periods
   • Polynomial: Include all real roots if possible
   • Exponential: Show meaningful change (3-5 orders of magnitude)

3. Range calculation: Add 10% padding above/below extrema for visual clarity

4. Responsive design: Test at widths: 320px, 480px, 768px, 1024px, 1200px

5. Performance: Keep total points under 2000 for smooth rendering

Accessibility

1. Color choices: Ensure sufficient contrast (WCAG AA minimum)
2. Font sizes: Minimum 12px, scale up to 16px on desktop
3. Alt text: Provide text descriptions of function behavior
4. Keyboard navigation: Slider should be keyboard-accessible (built-in with HTML range input)

Documentation Quality

1. Mathematical notation: Use proper LaTeX or Unicode symbols
   • π not pi, ≈ not ~, ² not ^2 (in markdown text)
2. Code examples: Provide copy-paste ready snippets
3. References: Link to authoritative sources (MDN, Plotly docs, math references)

Common Function Configurations

Trigonometric Functions

// Sine function
function f(x) { return Math.sin(x); }
// Domain: -2π to 2π (-6.28 to 6.28)
// Range: -1.5 to 1.5

// Cosine function
function f(x) { return Math.cos(x); }
// Domain: -2π to 2π
// Range: -1.5 to 1.5

// Tangent function (with discontinuities)
function f(x) { return Math.tan(x); }
// Domain: -π to π (-3.14 to 3.14)
// Range: -10 to 10 (limited for visibility)

// Damped sine wave
function f(x) { return Math.exp(-x/5) * Math.sin(x); }
// Domain: 0 to 20
// Range: Auto-calculate

Polynomial Functions

// Quadratic
function f(x) { return x**2; }
// Domain: -5 to 5
// Range: 0 to 25

// Cubic
function f(x) { return x**3 - 3*x; }
// Domain: -3 to 3
// Range: Auto-calculate

// Quartic with multiple turning points
function f(x) { return x**4 - 4*x**2 + 1; }
// Domain: -3 to 3
// Range: Auto-calculate

Exponential and Logarithmic

// Exponential growth
function f(x) { return Math.exp(x); }
// Domain: -2 to 2
// Range: 0 to 10

// Exponential decay
function f(x) { return Math.exp(-x); }
// Domain: 0 to 5
// Range: 0 to 1.2

// Natural logarithm
function f(x) { return Math.log(x); }
// Domain: 0.1 to 10 (must be positive)
// Range: Auto-calculate

// Gaussian/Normal distribution
function f(x) {
    const mu = 0, sigma = 1;
    return Math.exp(-0.5 * ((x-mu)/sigma)**2) / (sigma * Math.sqrt(2*Math.PI));
}
// Domain: -4 to 4
// Range: 0 to 0.5

Physics and Engineering

// Projectile motion (trajectory)
function f(x) {
    const v0 = 20, angle = 45 * Math.PI/180, g = 9.8;
    return x * Math.tan(angle) - (g * x**2) / (2 * v0**2 * Math.cos(angle)**2);
}
// Domain: 0 to 40
// Range: Auto-calculate

// Simple harmonic motion
function f(x) {
    const A = 1, omega = 2, phi = 0;
    return A * Math.cos(omega * x + phi);
}
// Domain: 0 to 10
// Range: -1.5 to 1.5

Troubleshooting

Issue: Plot appears blank

Causes:

• Function returns NaN for some x-values
• Domain/range mismatch
• JavaScript function syntax error

Solutions:

• Check browser console for errors
• Verify function definition in script.js
• Test function with sample values: console.log(f(0), f(1), f(-1))
• Add domain validation:

  function f(x) {
      if (x <= 0) return NaN;  // For log functions
      return Math.log(x);
  }
  

Issue: Slider doesn't update the point

Causes:

• Incorrect trace index in Plotly.restyle
• Event listener not attached
• Slider ID mismatch

Solutions:

• Verify point trace is index 1 (curve is index 0)
• Check slider ID matches: document.getElementById('x-slider')
• Confirm event listener is after DOM load
• Test with: console.log('Slider value:', e.target.value)

Issue: Tooltips show incorrect values

Causes:

• Hover template formatting error
• Point coordinates not calculated correctly

Solutions:

• Check hovertemplate syntax in trace definition
• Verify decimal precision: %{x:.3f} for 3 decimal places
• Test point calculation: console.log(pointX, pointY)

Issue: Layout too cramped in iframe

Causes:

• Margins/padding too large
• Plot height too tall for container

Solutions:

• Reduce container padding to 2-5px maximum
• Check responsive breakpoints are working
• Test iframe height: Try 500px, 600px, 700px
• Verify margin in Plotly layout:

  margin: { l: 50, r: 20, t: 10, b: 50 }
  

Issue: Function looks jagged/pixelated

Causes:

• Not enough sample points
• Domain too large for point count

Solutions:

• Increase numPoints in config (try 500-1000)
• For discontinuous functions, handle special points
• Add more points near areas of rapid change

References

Plotly.js Documentation

• Plotly.js Official Documentation
• Line Charts Guide
• Scatter Plots
• Hover Text and Formatting
• Layout Configuration
• Responsive Plots

JavaScript Math Functions

• MDN Math Object
• Math.sin()
• Math.pow()
• Math.exp()

Educational Resources

• Desmos Graphing Calculator - Reference for function visualization
• GeoGebra - Interactive mathematics software
• Khan Academy - Functions

MicroSim Standards

• MicroSim Standardization Skill - Quality rubric and requirements
• Dublin Core Metadata - Metadata standards
• Plotly.js CDN - Latest library versions