To create an svg diagram or simple chart, use the
<r-svg-chart> component and add a few children to see the plotting of equations, lines and points.
Let's start with a simple sin wave, that is, we want a line defined as $f(x) = \sin(x)$. And then explore some of the dynamic properties of the chart.
First, let's manipulate and dynamically update the
xlim of the chart. We will make it hooked up to two variables that control the domain extents. Start by creating some variables:
Next we need to go from a static declaration of the
xlim, to it being computed every time by referencing these two variables. We can use the
:xlim property to do this.
We will also put in two
<r-range> properties to control the variables declared above.
This is also quite handy even if you are setting to
2 * Math.PI, this can also be dynamically evaluated. Try changing the domain of the plot below!
All Chart Components
render function of the chart loops through all of the children and renders the SVG template. Each
r-svg child has to return an SVG namespaced string to add to the chart. In this way, they keep the same ordering as the dom
Each child component has a
renderSVG function that returns an svg template string.
r-svg-eqn - Changing equations
r-svg-eqn component allows you to create dynamic lines or points based on an equation.
This allows you to create and show equations like
The equation is computed by evaluating a string, if we want it to be dynamically set, we can use another variable (e.g.
func) to set it.
It is important that you update the
:eqn function to
"func" directly, which will error.
You can also
parameterize the function over
When parameterizing in terms of
t you must supply a
[0, 1]) and the function
should return a length-two list. Both
y parameterizations provide the other coordinate
so the function should only return a number.
Example - Sin Wave
Example - Drag Nodes
Example - Adding Sin and Cos
Made with love by iooxa
Last updated August 5th, 2020