Grafieken tekenen met SVG
Dit project is een aanzet voor een serie artikelen over Numerieke Wiskunde met onderwerpen als:
- Benadering van een rechte lijn, een polynoom of een exponentiële functie, gebaseerd op een aantal punten;
- Nulpunt-bepaling van functies: Bisectie, Regula Falsi en Newton-Raphson;
- Oppervlakte-bepaling door integratie: Trapeziumregel en Simpsonregel.
Om dit soort Numerieke Methoden effectief te gebruiken is het nodig om inzicht te hebben in het verloop van de functie in een zeker interval. Een goede manier om dat te bereiken is door het tekenen van een grafiek.
Om de grafiek van een wiskundige functie 'realtime' te tekenen op een webpagina is SVG in combinatie met JavaScript heel
geschikt.
Om dat interactief te doen heb je een tekstveld nodig waar je een formule en een stapgrootte ingeeft. De formule wordt
geïnterpreteerd en vervolgens in kleine stapjes van de lopende variabele uitgerekend. De achtereenvolgende resultaten
worden met SVG in een figuur gezet.
Op deze pagina wordt een en ander uitgewerkt. Er is ook een
applicatie zodat je er zelf mee aan de slag kunt. Druk op de knop hiernaast.
De code van de applicatie kun je downloaden om in je eigen site te gebruiken of om zelf aan door te ontwikkelen.
De applicatie tekent een grafiek in drie stappen:
- Haal de invoerdata op en controleer die. Als iets echt fout is volgt er een melding, anders wordt stilzwijgend een correctie aangebracht.
- Maak een raster, aan de hand van de ingegeven data. Daar worden ook de X-as (rood) en de Y-as (groen) in gezet.
- Bereken een reeks waarden van de grafiek, naar de opgegeven stapgrootte. Deze worden passend gemaakt op het canvas.
- Om de grafiek te tonen wordt van de X- en Y-coördinaten een <svg>-tag gemaakt. Voor het raster en de assen wordt <line /> ingezet. De curve is een <polyline />.
Let op: Voor het voorbeeld voert het te ver om de rasterlijen te koppelen aan eenheden. De rasterlijnen staan
daarom op X- en Y-waarden die je zelf moet interpreteren.
Bij de default-instellingen (beide waarden van Raster zijn -1 en beide assen staan op nul) staan de rasterlijnen
exact op de eenheden (dus op X = … -3, -2, -1, 0, 1, 2, 3, … en op Y = … -3, -2, -1, 0, 1, 2, 3, …).
Als de bijvoorbeeld 6 rasterlijnen in X-richting neemt, liggen die op X = …, -6.67, -3.33, 0, 3.33, 6.67, ….
Dat bepaal je als volgt:
- Er zijn 6 gelijke velden, en dus 7 rasterlijnen. Aan beide uiteinden steekt wat uit, dit is om de grafiek 'netjes' te houden.
- Zet de minimum X-waarde op -10 en de maximum X-waarde op +10. Het domein is dan +10 − -10 = 20. 20 ÷ 6 = 3.33.
Maar ook:
- Zet de minimum X-waarde op -6 en de maximum X-waarde op +6. Het domein is dan +6 − -6 = 12. 12 ÷ 6 = 2.
Het is dus even wennen aan de interface om een een ander goed te begrijpen. Het canvas zelf meet overigens 500 × 500 beeldpunten.
Een meer uitgebreide gebruikershandleiding staat in de applicatie.
Downloaden:
Druk op de knop:
File: voorb646.zip, 4569 bytes.
