付録A5: インタラクティブな数学関数グラフ
SVGとJavaScriptを組み合わせることで、数学の関数グラフを動的に描画し、ユーザーがパラメータを変更してその影響をリアルタイムに確認できるインタラクティブな学習ツールを作成できます。このサンプルでは、二次関数と三角関数（サイン波）のグラフを例に、その基本的な実装方法を紹介します。
完成デモ: 関数グラフジェネレーター
下のコントロールで関数の種類とパラメータを選択・変更すると、SVGで描画されたグラフがリアルタイムに更新されます。グラフ上にマウスカーソルを合わせると、その点の座標（数学的な値）がツールチップで表示されます。
使用した主なテクニック
- SVG
<path>要素: 関数の線を描画。d属性の値をJavaScriptで動的に生成 (M x1,y1 L x2,y2 ...形式)。 - SVG
<line>,<text>要素: 座標軸、グリッド線、目盛りラベルを描画。 - JavaScriptによる関数の計算と座標マッピング:
- 選択された関数と入力パラメータに基づいて、指定範囲のx値に対するy値を計算。
- これらの数学座標をSVGの
viewBox内のピクセル座標に変換（スケーリング、Y軸の反転、原点のオフセット）。このデモでは簡単のため、viewBox自体を数学座標系（例: -10から10）に合わせて設定し、マッピングを単純化。
- JavaScriptによるDOM操作: パラメータ変更時に
<path>のd属性を更新し、グラフを再描画。 - イベント処理:
<select>や<input type="range">の変更イベントを監視し、グラフを更新。SVG要素へのmousemoveイベントでツールチップを制御。
Did you know? For displaying mathematical formulas themselves (not just their graphs), MathML (Mathematical Markup Language) is an XML-based language often used alongside SVG or HTML. While SVG excels at drawing the visual graph, MathML is designed to semantically describe the structure of equations, which can improve accessibility and interoperability of mathematical content.
知っていましたか？数学の数式自体を表示する（グラフだけでなく）ためには、MathML (Mathematical Markup Language) というXMLベースの言語が、SVGやHTMLと共によく使われます。SVGが視覚的なグラフを描画するのに優れているのに対し、MathMLは数式の構造を意味的に記述するように設計されており、これにより数学コンテンツのアクセシビリティや相互運用性を向上させることができます。
まとめ
SVGとJavaScriptを組み合わせることで、インタラクティブな数学関数グラフをウェブ上で手軽に実現できます。ユーザーがパラメータを操作し、その結果がグラフに即座に反映される様子は、数学の概念理解を助ける強力なツールとなり得ます。
このサンプルでは基本的な二次関数と三角関数、三次関数を扱いましたが、同様のアプローチでさらに多くの種類の関数グラフを描画したり、ズームやパンといった高度な機能を追加したりすることも可能です。データビジュアライゼーションの一形態として、SVGの柔軟性が光る分野です。
次は、「付録A6: 株価ローソク足チャート」で、また異なる種類のデータ表現に挑戦します。
このページの要約
日本語
このページでは、SVGとJavaScriptを使ってインタラクティブな数学関数グラフ（二次関数、三角関数、三次関数）を描画するサンプルを作成しました。ユーザーが関数の種類やパラメータを変更すると、グラフがリアルタイムに更新されます。SVGの<path>要素で関数線を描画し、軸やグリッド線は<line>や<text>で表現。JavaScriptで関数の値を計算し、SVG座標にマッピングしてパスデータを生成、DOM操作でグラフを更新しています。マウスオーバーによる座標ツールチップ機能も実装しました。
English
This page created a sample for drawing interactive mathematical function graphs (quadratic, trigonometric, cubic) using SVG and JavaScript. The graph updates in real-time as users change function types or parameters. SVG <path> elements draw function lines, while axes and gridlines are represented by <line> and <text>. JavaScript calculates function values, maps them to SVG coordinates, generates path data, and updates the graph via DOM manipulation. A coordinate tooltip feature on mouseover was also implemented.
Español
Esta página creó una muestra para dibujar gráficos interactivos de funciones matemáticas (cuadráticas, trigonométricas, cúbicas) usando SVG y JavaScript. El gráfico se actualiza en tiempo real a medida que los usuarios cambian los tipos de funciones o parámetros. Los elementos <path> de SVG dibujan líneas de función, mientras que los ejes y las líneas de la cuadrícula están representados por <line> y <text>. JavaScript calcula los valores de la función, los asigna a coordenadas SVG, genera datos de ruta y actualiza el gráfico mediante la manipulación del DOM. También se implementó una función de información sobre herramientas de coordenadas al pasar el mouse.
中文
本页创建了一个使用SVG和JavaScript绘制交互式数学函数图（二次函数、三角函数、三次函数）的示例。当用户更改函数类型或参数时，图形会实时更新。SVG <path>元素绘制函数线条，而轴和网格线由<line>和<text>表示。JavaScript计算函数值，将其映射到SVG坐标，生成路径数据，并通过DOM操作更新图形。还实现了鼠标悬停时的坐标工具提示功能。