# @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.

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

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.

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