Get unlimited public & private packages + package-based permissions with npm Pro.Get started »

@maslick/karandashee

2.1.3 • Public • Published

karanda-shee

npm (scoped) npm download count License: MIT

time series plot for categorical data

screenshot

Demo

See here.

Features

  • a running plot with bars representing categorical events
  • input: Rx streams (e.g. live websocket or MQTT data)
  • multiple plots on one page
  • leverages d3 v5 and rx-lite
  • browser and node.js friendly

Usage

Include this into your html:

<link rel="stylesheet" href="src/karandashee.css">
<div id="karandasheeGraph"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/Reactive-Extensions/RxJS/dist/rx.lite.min.js"></script>
<script src="dist/karandashee.min.js"></script>

Define your data stream (rx-lite):

const items = ["rain", "sunshine", "icy cold", "snow", "thunderstorm", "cloudy", "blizard", "hot", "tsunami"];
 
const dataObservable = Rx.Observable
    .interval(500)
    .map(x => {
        return {
            item: items[% items.length],
            timestamp: new Date().getTime(),
        };
    }).share();

Instantiate a Karandashee object:

let karandasheeOptions = {
    graphdiv: "#karandasheeGraph",
    observable: dataObservable,
    key: "item",
    values: items
};
 
let karandashee = new Karandashee(karandasheeOptions);

Node.js

Karandashee can be used either in the Browser or in the Node.js environment.

License

This project is licenced under the MIT License.

Install

npm i @maslick/karandashee

DownloadsWeekly Downloads

1

Version

2.1.3

License

MIT

Unpacked Size

18.9 kB

Total Files

8

Last publish

Collaborators

  • avatar