https://github.com/maslick/karandashee

time series plot for categorical data
https://github.com/maslick/karandashee

categorical-data d3 graph mqtt plot reactivex rx series-plot streams time-series websocket

Last synced: 6 months ago
JSON representation

time series plot for categorical data

• Host: GitHub
• URL: https://github.com/maslick/karandashee
• Owner: maslick
• License: mit
• Created: 2018-12-23T13:29:32.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2023-01-01T04:16:37.000Z (almost 3 years ago)
• Last Synced: 2025-04-15T05:08:29.813Z (6 months ago)
• Topics: categorical-data, d3, graph, mqtt, plot, reactivex, rx, series-plot, streams, time-series, websocket
• Language: JavaScript
• Homepage: https://maslick.github.io/karandashee/demo/
• Size: 2.32 MB
• Stars: 3
• Watchers: 3
• Forks: 1
• Open Issues: 8
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# karanda-shee

[![npm (scoped)](https://img.shields.io/npm/v/@maslick/karandashee.svg)](https://www.npmjs.com/package/@maslick/karandashee)

[![npm download count](https://img.shields.io/npm/dt/@maslick/karandashee.svg)](https://npmcharts.com/compare/@maslick/karandashee?minimal=true)

[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)

time series plot for categorical data

![screenshot](karandashee.png)

## Demo

See [here](https://maslick.github.io/karandashee/demo/).

## 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:

```html



```


```html

```

Define your data stream (rx-lite):

```js

const items = ["rain", "sunshine", "icy cold", "snow", "thunderstorm", "cloudy", "blizard", "hot", "tsunami"];

const dataObservable = Rx.Observable

    .interval(500)

    .map(x => {

        return {

            item: items[x % items.length],

            timestamp: new Date().getTime(),

        };

    }).share();

```

Instantiate a Karandashee object:

```js

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](https://github.com/maslick/karandashee/tree/master/demo) or in the [Node.js](https://github.com/maslick/karandashee/tree/master/example) environment.

## License

This project is licenced under the [MIT License](http://opensource.org/licenses/mit-license.html).