virtual-streamgraph

virtual-streamgraph

Create a virtual-dom streamgraph. Useful to visualize time series data.

Usage

const vgraph = require('virtual-streamgraph')
const vdom = require('virtual-dom')
const hyperx = require('hyperx')
const hx = hyperx(vdom.h)

const data = [
  { name: 'apples', values: [ { x: 1, y: 55 }, { x: 2, y: 65 }, { x: 3, y: 67 }] },
  { name: 'bananas', values: [ { x: 1, y: 55 }, { x: 2, y: 65 }, { x: 3, y: 67 }] },
  { name: 'cherries', values: [ { x: 1, y: 55 }, { x: 2, y: 65 }, { x: 3, y: 67 }] },
  { name: 'dates', values: [ { x: 1, y: 55 }, { x: 2, y: 65 }, { x: 3, y: 67 }] }
]

const tree = hx`
  <section className="my-graph">
    ${vgraph({ height: 500, width: 960, data: data })}
  </section>
`
console.log(vdom.create(tree).toString())

API

vgraph(opts)

Create a new virtual-streamgraph from data. Opts can contain the following fields:

• opts.data: set data to be rendered
• opts.width: set width dimension of the graph
• opts.height: set height dimension of the graph
• opts.min: optional, set lower bound for graph
• opts.max: optional, set upper bound for graph
• opts.limit: optional, limit amount of data points to be displayed

See Also

• d3/wiki/stack-layout
• d3-shape/stacks

Installation

$ npm install virtual-streamgraph

License

MIT