@curvenote/svg

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.

See the heart beat:

Getting Started

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.

r-svg-chart properties

`xlim` and `:xlim`

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.

<r-svg :xlim="[domainStart, domainEnd]">

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!

Start: End:

All Chart Components

The 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

render() { return html` <svg width="${this.width}" height="${this.height}"> ${this.children.map(child =>{ return child.renderSVG(this); })} </svg> `; }

Each child component has a renderSVG function that returns an svg template string.

`r-svg-eqn` - Changing equations

The 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 Math.sin(x). 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 compute the string rather than use the string "func" directly, which will error.

<r-svg-eqn :eqn="func">

You can also parameterize the function over x, y or t. When parameterizing in terms of t you must supply a domain (e.g. [0, 1]) and the function should return a length-two list. Both x and y parameterizations provide the other coordinate so the function should only return a number.

Amplitude:

Example - Sin Wave

Amplitude, $A$:
Frequency, $f$:
Phase, $\varphi$:
y(t) = A \cos(2 \pi f t - \varphi)

Example - Drag Nodes

$A$:
$B$:
$x$:
$y$:

Example - Adding Sin and Cos

Sin

Amplitude, $A$:
Frequency, $f$:
Phase, $\varphi$:

Cos

Amplitude, $A$:
Frequency, $f$:
Phase, $\varphi$:
y(t) = A \sin(2 \pi f t - \varphi)

Made with love by Curvenote
Last updated February 19th, 2021