README

⏆
<x-plot>

a web component that plots zoomable waveforms

🔧 Install · 🧩 Example · 📜 API docs · 🔥 Releases · 💪🏼 Contribute · 🖐️ Help

Install

$ npm i x-plot

Or directly from jsDelivr:

import { PlotElement } from 'https://cdn.jsdelivr.net/gh/stagas/x-plot/x-plot.min.js'

customElements.define('x-plot', PlotElement)

Example

<x-plot width="200" height="60"></x-plot>
<x-plot width="200" height="60" background="#f08" color="#ff0" zoom="4" line-width="3"></x-plot>
<x-plot width="200" height="60" background="#066" color="yellow" zoom="20" line-width="6"></x-plot>
<x-plot width="200" height="60" background="#000"></x-plot>

import { PlotElement } from 'x-plot'

// any name works for the custom element, here: <x-plot>
customElements.define('x-plot', PlotElement)

// then simply put array-like .data on the elements
const plots = container.querySelectorAll('x-plot')

const rate = 44100
const sine = (i, hz) => Math.sin(hz * (i * (1 / rate)) * Math.PI * 2)

plots[0].data = Array(rate)
  .fill(0)
  .map((_, i) => sine(i, 1))
plots[1].data = Array(rate)
  .fill(0)
  .map((_, i) => sine(i, 10))
plots[2].data = Array(rate)
  .fill(0)
  .map((_, i) => sine(i, 100))
plots[3].data = [1, 0, -1, 0, 1, 0, -1]