Free Blackbody Radiation Planck's Law Calculator & Graphing Tool

Technical Specification: Blackbody Radiation Curve Plotter

1. Overview

This single-file web application provides an interactive, client-side simulation of Planck’s Law. It allows students and researchers to visualize how temperature influences the spectral radiance of a blackbody. The tool renders high-fidelity line charts using Chart.js.

2. Architecture & Constraints

• Architecture: Single-file HTML5/CSS3/Vanilla JS.
• Dependencies: Use Chart.js from CDN (https://cdn.jsdelivr.net/npm/chart.js).
• Sandbox Safety: No localStorage, sessionStorage, or cookies. No alert() or confirm(). All UI states must be managed in-memory.
• Responsiveness: The chart must rescale automatically on window resize. Use CSS Flexbox/Grid for layout.

3. User Interface Layout

• Header: Clean, minimalist title "Blackbody Radiation Plotter" with a brief helper text (e.g., "Visualize spectral radiance based on temperature (Kelvin)").
• Control Panel:
  • Temperature Input: Combined Slider (100K to 10,000K range) and Number Input.
  • Axis Toggle: Selector for Wavelength (nm) vs Frequency (Hz).
  • Visible Spectrum Toggle: A checkbox to shade the visible light range (380-750nm) on the chart area.
• Main Visualization: A large responsive <canvas> area centered in the main view.
• Result Dashboard: A small data card below the chart showing calculated values in real-time:
  • Peak Wavelength (nm).
  • Total Power Density (Stefan-Boltzmann Law output in W/m²).

4. Aesthetics & Design

• Palette: Professional SaaS aesthetic.
  • Background: Off-white (#f9fafb).
  • Primary Accent: Deep Indigo (#4f46e5) for the curve line.
  • Secondary: Soft Gray (#e5e7eb) for grid lines.
  • Shadows: Subtle box-shadows on card elements to imply depth.
• Animations: Use CSS transition properties for smooth slider movements and input focus states. Chart.js animation should be enabled for smooth curve rendering when temperature changes.

5. Logic Implementation Details

• Calculation: Implement Planck’s Law: B(λ, T) = (2hc^2 / λ^5) * (1 / (e^(hc/λkT) - 1)).
• State Management: Use a reactive JS object to hold the current temperature and axis settings. Whenever a control value changes, recalculate the dataset and trigger chart.update().
• Formatting: Format numerical results with appropriate precision (e.g., to 2 decimal places) using Number.toLocaleString() for better readability.