@iooxa/svg
The goal of @iooxa/svg
is to provide web-components for interactive scientific writing, reactive documents and explorable explanations. This library provides basic charting and diagram capabilities through basic, reactive SVG graphics.
<r-var name="a" value="3"></r-var>
<r-var name="b" value="3"></r-var>
<r-var name="r" :value="Math.sqrt(a*a + b*b)"></r-var>
<r-svg-chart xlim="[-5, 5]" ylim="[-5, 5]" height="400" width="400" x-axis-location="origin" y-axis-location="origin" style="text-align: center;">
<r-svg-eqn :domain="[0, Math.atan2(b, a)]" eqn="[r * Math.cos(t), r * Math.sin(t)]" parameterize="t" stroke="#333" stroke-width="1" stroke-dasharray="3"></r-svg-eqn>
<r-svg-path :data="[[0, 0],[r * Math.cos(Math.atan2(b, a)), r * Math.sin(Math.atan2(b, a))]]" stroke="#333" stroke-width="1" stroke-dasharray="3"></r-svg-path>
<r-svg-text :x="(r/2) * Math.cos(Math.atan2(b, a) / 2)" :y="(r/2) * Math.sin(Math.atan2(b, a) / 2)" :text="Math.round(Math.atan2(b, a)*180/Math.PI) + '°'"></r-svg-text>
<r-svg-node :x="a" :y="b" :drag="{a: x, b: y}" fill="#ff7f0e"></r-svg-node>
</r-svg-chart>
Getting Started
@iooxa/svg
is based on web-components, which creates custom HTML tags so that they can make writing documents easier.
To get started, copy the built javascript file to the head of your page:
<script src="https://unpkg.com/@iooxa/svg"></script>
You can also download the latest release from GitHub. If you are running this without a web server, ensure the script has charset="utf-8"
in the script tag. You can also install from npm:
>> npm install @iooxa/svg
You should then be able to extend the package as you see fit:
import components from '@iooxa/svg';
Note that the npm module does not setup the @iooxa/runtime store, nor does it register the components. See the iooxa.ts file for what the built package does to setup
the store and register
the components.
Documentation
See https://iooxa.dev for full documentation.
Basic Components
- r-svg-chart
- r-svg-text
- r-svg-path
- r-svg-eqn
- r-svg-circle
- r-svg-image
- r-svg-node