The Quantumviz widget is a Polymer webcomponent to visualize data from the Warp 10 platform.

To use the widget in an HTML page you need:

1. Import the webcomponents.js polyfill from the Polymer CDN:

   <script src="https://cdn.cityzendata.net/quantumviz/latest/webcomponentsjs/webcomponents-lite.js"></script>

2. Import the warp10-quantumviz.html widget from Cityzen Data website:

   <link rel="import" href="https://cdn.cityzendata.net/quantumviz/latest/warp10-quantumviz.html">

3. Use the <warp10-quantumviz> tag in your HTML

   <warp10-quantumviz>YOUR_WARPSCRIPT_CODE_HERE</warp10-quantumviz>

The Quantumviz widget puts onto the stack a series of variables to allow you to interact with them into your WarpScript script. These variables are:

• width: the width in pixels of the widget. It allows you to do a BUCKETIZE to limit the number of points in each series according to your visualization capabilities.

• host: if you aren't using a Cityzen Data entry point in the same domain from which you're serving the widget, you must configure the host parameter with the base URL (protocol and domain or IP address) of the platform version you want to use.

  YOUR_WARPSCRIPT_CODE_HERE

The Quantumviz widget expects to find in only one item in the Eintein stack, a MAP with the following properties:

• gts: a LIST of GTS to plot
• params: a LIST of visualisation parameters for each GTS to plot
• globalParams (optional): a MAP of global visualisations parameters

The two list must have the same size.

Each item in param is a MAP of (mostly optional) parameters to apply to the corresponding item in gts LIST. Available parameters are:

• key: the legend to associate to the GTS
• color (optional): the color of the line, as an CSS compliant color STRING (e.g.: #cc0505)

globalParams is an optional MAP of parameters to apply to the whole chart. Available parameters are:

• interpolate: the interpolating function used. Default mode is step-before, other usual modes are linear, basis and cardinal. The complete list of interpolation functions is here

<script src="https://cdn.cityzendata.net/quantumviz/latest/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="https://cdn.cityzendata.net/quantumviz/latest/warp10-quantumviz.html">

 'color' '#ff1010'
 'key' 'Temperature A'
 4 ->MAP
 'color' '#1010ff'
 'key' 'Temperature B'
 4 ->MAP
 2 ->LIST
 'params' STORE

 'interpolate' 'cardinal'
 2 ->MAP
 'globalParams' STORE

 'gts' $gts
 'params' $params
 'globalParams' $globalParams
 6 ->MAP

 NEWGTS
 100000000 NaN NaN NaN 10 ADDVALUE
 200000000 NaN NaN NaN 9 ADDVALUE
 300000000 NaN NaN NaN 8 ADDVALUE
 400000000 NaN NaN NaN 7 ADDVALUE
 500000000 NaN NaN NaN 6 ADDVALUE
 600000000 NaN NaN NaN 8 ADDVALUE


 2 ->LIST
 'gts' STORE

 'color' '#ff1010'
 'key' 'Heartrate'
 4 ->MAP
 'color' '#1010ff'
 'key' 'Speed'
 4 ->MAP
 2 ->LIST
 'params' STORE

 'interpolate' 'cardinal'
 2 ->MAP
 'globalParams' STORE

 'gts' $gts
 'params' $params
 'globalParams' $globalParams
 6 ->MAP

In order to follow this instructions, you need to have a recent version of NodeJS on your computer.

You also need to have Bower and Polyserve programs installed:

npm install -g bower polyserve

Instructions

1. Checkout Quantumviz project from https://github.com/cityzendata/warp10-quantumviz

2. From your local Quantumviz project root, install the dependencies

bower install

1. From your local Quantumviz project root, launch Polyserve on the PORT you want to use:

polyserve -p PORT

1. Components are then available on localhost:PORT/components/COMPONENT_NAME/COMPONENT.html

Examples (on port 8000):

http://localhost:8000/components/webcomponentsjs/webcomponents.js http://localhost:8000/components/polymer/polymer.html http://localhost:8000/components/warp10-quantumviz/warp10-display-chart.html