Use Curvenote

curvenote.dev - logo

NPM Version MIT License GitHub Stars Twitter Follow

@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 August 24th, 2021