Symmetronic Scaleogram
Web component for a scaleogram visualization, e.g. for data from a discrete wavelet transform.
Using this component
Script tag
- Put a script tag similar to this
<script src='https://unpkg.com/strc-scaleogram@2.0.11/dist/strc-scaleogram.js'></script>
in the head of your index.html - Then you can use the element anywhere in your template, JSX, HTML, etc.
Node Modules
- Run
npm install strc-scaleogram --save
- Put a script tag similar to this
<script src='node_modules/strc-scaleogram/dist/strc-scaleogram.js'></script>
in the head of your index.html - Then you can use the element anywhere in your template, JSX, HTML, etc.
In a stencil-starter app
- Run
npm install strc-scaleogram --save
- Add an import to the npm packages
import strc-scaleogram;
- Then you can use the element anywhere in your template, JSX, HTML, etc.
API
Attributes
data
: String of an array of arrays containing the wavelet coefficients.invert-scale
(optional): Set totrue
if you want to invert the direction of the color scale set by thescale
attribute.scale
(optional): Color scale as a string. Any valid string of a Chroma.js color scale can be used.
Discrete Wavelets is a JavaScript library that already returns the coefficients in an appropriate format. But you need to convert the array to a string using JSON.stringify()
.
var data = JSON;
Styling
You can adjust the style of the scaleogram.
NPM scripts
npm install
: Install dependenciesnpm start
: Build in development modenpm run build
: Build in production modenpm test
: Run testsnpm run test:watch
: Run tests in interactive watch mode