Merge pull request #306 from proteus-h2020/development

Release 0.0.27

CHANGELOG.md

@@ -6,6 +6,15 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+## [0.0.27] - 2017-10-09
+### Added
+-  - ⭐ **New visualization: Parallel Coordinates**
+- New pause / resume button for streaming visualizations
+- New error component that shows an error sign if something went wrong
+- New brush + zoom interaction
+- Streaming visualizations now show a throbber while waiting for data to start coming
+- Confidence band component for line charts
+
 ## [0.0.26] - 2017-06-30
 ### Added
 - New annotated events

custom.d.ts

@@ -0,0 +1 @@
+declare module '*.svg';

examples/all.html

@@ -54,6 +54,7 @@ <h2 class="subtitle">
                         <li><a href="#network">Network</a></li>
                         <li><a href="#sunburst">Sunburst</a></li>
                         <li><a href="#swimlane">Swimlane</a></li>
+                        <li><a href="#parallelcoordinates">Parallel Coordinates</a></li>
                     </ul>
                 </div>
             </nav>
@@ -207,6 +208,18 @@ <h2 class="title is-2">Swimlane</h2>
         </div>
     </section>
 
+    <section class="section">
+        <h2 class="title is-2">Parallel Coordinates</h2>
+        <div class="columns">
+            <div class="column">
+                <div id='parallelcoordinates'></div>
+            </div>
+            <div class="column">
+                <div id='parallelcoordinates-ws'></div>
+            </div>
+        </div>
+    </section>
+
     <footer class="footer">
         <div class="container">
             <div class="content has-text-centered">
@@ -384,14 +397,41 @@ <h2 class="title is-2">Swimlane</h2>
     {"class": "link", "source": "Favourite", "target": "Fameuil", "weight": 3},
     {"class": "link", "source": "Favourite", "target": "Blacheville", "weight": 4},
     {"class": "link", "source": "Dahlia", "target": "Tholomyes", "weight": 3},
-    
+
     {"class": "link", "source": "Tholomyes", "target": "Mlle.Baptistine", "weight": 3},
 
     {"class": "link", "source": "Dahlia", "target": "Listolier", "weight": 3},
     {"class": "link", "source": "Dahlia", "target": "Fameuil", "weight": 3},
     {"class": "link", "source": "Dahlia", "target": "Blacheville", "weight": 3}
     ];
 
+    var dataParallel = [
+        {'name': 'AMC Ambassador Brougham', 'economy (mpg)': 13,
+		'cylinders': 8, 'displacement (cc)': 360, 'power (hp)': 175,
+		'weight (lb)': 3821, '0-60 mph (s)': 11, 'year': 73 },
+		{'name': 'AMC Ambassador DPL', 'economy (mpg)': 15,
+		'cylinders': 8, 'displacement (cc)': 390, 'power (hp)': 190,
+		'weight (lb)': 3850, '0-60 mph (s)': 8.5, 'year': 70 },
+		{'name': 'AMC Ambassador SST', 'economy (mpg)': 17,
+		'cylinders': 8, 'displacement (cc)': 304, 'power (hp)': 150,
+		'weight (lb)': 3672, '0-60 mph (s)': 11.5, 'year': 72 },
+		{'name': 'AMC Concord DL 6', 'economy (mpg)': 20.2,
+		'cylinders': 6, 'displacement (cc)': 232, 'power (hp)': 90,
+		'weight (lb)': 3265, '0-60 mph (s)': 18.2, 'year': 79 },
+		{'name': 'AMC Concord DL', 'economy (mpg)': 18.1,
+		'cylinders': 6, 'displacement (cc)': 258, 'power (hp)': 120,
+		'weight (lb)': 3410, '0-60 mph (s)': 15.1, 'year': 78 },
+		{'name': 'AMC Concord DL', 'economy (mpg)': 23,
+		'cylinders': 4, 'displacement (cc)': 151, 'power (hp)': 100,
+		'weight (lb)': 3035, '0-60 mph (s)': 20.5, 'year': 82 },
+		{'name': 'AMC Concord', 'economy (mpg)': 19.4,
+		'cylinders': 6, 'displacement (cc)': 232, 'power (hp)': 90,
+		'weight (lb)': 3210, '0-60 mph (s)': 17.2, 'year': 78 },
+		{'name': 'AMC Concord', 'economy (mpg)': 24.3,
+		'cylinders': 4, 'displacement (cc)': 151, 'power (hp)': 90,
+		'weight (lb)': 3003, '0-60 mph (s)': 20.1, 'year': 80 }
+    ];
+
     var wsBarchart = new WebSocket('wss://proteicws.herokuapp.com/barchart');
     var wsLinechart = new WebSocket('wss://proteicws.herokuapp.com/linechart');
     var wsMatrix = new WebSocket('wss://proteicws.herokuapp.com/matrix');
@@ -400,6 +440,7 @@ <h2 class="title is-2">Swimlane</h2>
     var wsScatterplot = new WebSocket('wss://proteicws.herokuapp.com/scatterplot');
     var wsSunburst = new WebSocket('wss://proteicws.herokuapp.com/sunburst');
     var wsSwimlane = new WebSocket('wss://proteicws.herokuapp.com/swimlane');
+    var wsParallel = new WebSocket('wss://proteicws.herokuapp.com/parallelcoordinates');
 
     var dsBarchart = new proteic.WebsocketDatasource(wsBarchart);
     var dsLinechart = new proteic.WebsocketDatasource(wsLinechart);
@@ -409,6 +450,7 @@ <h2 class="title is-2">Swimlane</h2>
     var dsScatterplot = new proteic.WebsocketDatasource(wsScatterplot);
     var dsSunburst = new proteic.WebsocketDatasource(wsSunburst);
     var dsSwimlane = new proteic.WebsocketDatasource(wsSwimlane);
+    var dsParallel = new proteic.WebsocketDatasource(wsParallel);
 
     dsBarchart.start();
     dsLinechart.start();
@@ -418,6 +460,7 @@ <h2 class="title is-2">Swimlane</h2>
     dsScatterplot.start();
     dsSunburst.start();
     dsSwimlane.start();
+    dsParallel.start();
 
     var areas = new proteic.StackedArea(dataTemporal, {
         selector: '#areas',
@@ -463,7 +506,11 @@ <h2 class="title is-2">Swimlane</h2>
     //	dsBarsStacked.start();
 
 
-    var gauge = new proteic.Gauge([{value: 30}], {selector: '#gauge', height: 200, width: '100%'});
+    var gauge = new proteic.Gauge([{value: 30}], {
+        selector: '#gauge', height: 200, width: '100%'
+    });
+    gauge.draw();
+
     new proteic.Gauge([], {
         selector: '#gauge-ws', height: 200, width: '100%',
         marginRight: 100,
@@ -527,7 +574,7 @@ <h2 class="title is-2">Swimlane</h2>
         height: 200,
         linkWeght: 0.4,
         nodeWeight: 5,
-        labelField: 'class',
+        labelField: 'class'
       });
 
       network.draw();
@@ -609,7 +656,7 @@ <h2 class="title is-2">Swimlane</h2>
     var swimlane = new proteic.Swimlane(dataLanes, {
         selector: '#swimlane',
         xAxisFormat: '%Y-%m-%d',
-        height: 200, 
+        height: 200,
         width: '100%',
         marginRight: 100,
         marginLeft: 70
@@ -622,8 +669,28 @@ <h2 class="title is-2">Swimlane</h2>
         marginLeft: 70
     }).datasource(dsSwimlane);
 
+    var parallelCoordinates = new proteic.ParallelCoordinates(dataParallel, {
+        selector: '#parallelcoordinates',
+		propertyKey: 'name',
+        height: 200,
+        marginRight: 100,
+        marginLeft: 70,
+		legend: true,
+		legendPosition: 'right'
+	});
+    parallelCoordinates.draw();
+
+    new proteic.ParallelCoordinates([], {
+        selector: '#parallelcoordinates-ws',
+        propertyKey: 'name',
+        height: 200,
+        marginRight: 100,
+        marginLeft: 70,
+		legend: true
+    }).datasource(dsParallel);
+
 
 </script>
 </body>
 
-</html>
+</html>

examples/barchart.html

@@ -14,7 +14,6 @@
 	<meta charset="utf-8" />
 	<link rel="stylesheet" href="../dist/lighter.css">
   <style>
-
     body {
       background-color: navy;
       display: grid;
@@ -29,21 +28,18 @@
     <div id='chart'></div>
     <div id='chartGrouped'></div>
 
-	<script>        
+	<script>
     var data = [
       {x: 'SP', key: '- 18', y: 30},
       {x: 'SP', key: '+ 18 - 35', y: 25},
       {x: 'SP', key: '+ 35', y: 45},
-
       {x: 'FR', key: '- 18', y: 10},
       {x: 'FR', key: '+ 18 - 35', y: 50},
       {x: 'FR', key: '+ 35', y: 40},
-
       {x: 'BR', key: '- 18', y: 20},
       {x: 'BR', key: '+ 18 - 35', y: 40},
       {x: 'BR', key: '+ 35', y: 40}
     ];
-
             //Default config uses #chart selector
     var barchart = new proteic.Barchart(data, {
       stacked: true,
@@ -52,16 +48,16 @@
       colorScale: proteic.Colors.category2()
     });
     barchart.draw();
-    
+
     var barchartGrouped = new proteic.Barchart(data, {
       selector: '#chartGrouped',
       stacked: false,
       xAxisLabel: 'Countries',
       yAxisLabel: 'People (%)'
     });
     barchartGrouped.draw();
-            
+
   </script>
 </body>
 
-</html>
+</html>

examples/confidence.html

@@ -0,0 +1,98 @@
+<!doctype html>
+<!--[if lt IE 7]>      <html class='no-js lt-ie9 lt-ie8 lt-ie7' lang=''> <![endif]-->
+<!--[if IE 7]>         <html class='no-js lt-ie9 lt-ie8' lang=''> <![endif]-->
+<!--[if IE 8]>         <html class='no-js lt-ie9' lang=''> <![endif]-->
+<!--[if gt IE 8]><!-->
+<html class='no-js' lang=''>
+<!--<![endif]-->
+
+<head>
+	<title>Simple ConfidenceLinechart</title>
+	<script src='../node_modules/d3/build/d3.min.js'></script>
+	<script src='../dist/proteic.js'></script>
+	<link rel="stylesheet" href="../dist/proteic.css">
+</head>
+
+<body>
+	<div id='chart'></div>
+	<div id='chart-temporal'></div>
+
+	<script>
+        var dataArea = [
+            {key:'serie1', x:1, y:5, error:1},
+            {key:'serie1', x:2, y:15, error:1},
+            {key:'serie1', x:3, y:35, error:1},
+            {key:'serie1', x:4, y:25, error:1},
+            {key:'serie1', x:5, y:12, error:1},
+            {key:'serie1', x:6, y:0, error:1},
+            {key:'serie1', x:7, y:21, error:1},
+            {key:'serie1', x:8, y:0, error:1},
+            {key:'serie2', x:1, y:4, error:1},
+            {key:'serie2', x:2, y:4, error:1},
+            {key:'serie2', x:3, y:20, error:1},
+            {key:'serie2', x:7, y:12, error:1},
+            {key:'serie2', x:5, y:14, error:1},
+            {key:'serie2', x:6, y:9, error:1},
+            {key:'serie2', x:4, y:12, error:1},
+            {key:'serie2', x:8, y:13, error:1}
+    ];
+    confidenceLinechart = new proteic.Linechart(dataArea, {
+		confidenceBandOpacity: 0.7,
+    	selector: '#chart',
+        markerSize:10,
+        markerShape: 'dot',
+        width: '90%',
+        height: 400,
+        onClick: (d) => console.log('clicking', d),
+        onUp: (d) => console.log('upping', d),
+        onHover: (d) => console.log('hovering', d),
+        onDown: (d) => console.log('downing', d),
+        onLeave: (d) => console.log('leaving', d),
+		confidenceModifier: (confidence) => 2 * confidence
+    }).annotations([
+        { type: 'threshold', axis: 'y', value: 15.2, text: 'Everything is fine below this line' },
+        { type: 'threshold', axis: 'y', value: 6.8, text: 'We\'re on trouble over this line' },
+        { type: 'threshold', axis: 'x', value: 3.1, text: 'Something could happen at this point' }
+    ]);
+    confidenceLinechart.draw();
+
+	var temporalData = [
+        {key:'serie1', x: '01/01/16', y: 3, error: 0.5},
+        {key:'serie1', x: '01/02/16', y: 5, error: 0.5},
+        {key:'serie1', x: '01/03/16', y: 3, error: 0.5},
+        {key:'serie1', x: '01/04/16', y: 8, error: 0.5},
+        {key:'serie1', x: '01/04/16', y: 3, error: 0.5},
+        {key:'serie1', x: '01/05/16', y: 5, error: 0.5},
+        {key:'serie1', x: '01/06/16', y: 3, error: 0.5},
+        {key:'serie1', x: '01/07/16', y: 8, error: 0.5},
+        {key:'serie1', x: '01/08/16', y: 3, error: 0.5},
+        {key:'serie1', x: '01/09/16', y: 5, error: 0.5},
+        {key:'serie1', x: '01/10/16', y: 3, error: 0.5},
+        {key:'serie1', x: '01/11/16', y: 8, error: 0.5},
+        {key:'serie1', x: '01/12/16', y: 3, error: 0.5},
+        {key:'serie1', x: '01/13/16', y: 5, error: 0.5},
+        {key:'serie1', x: '01/14/16', y: 3, error: 0.5},
+        {key:'serie1', x: '01/15/16', y: 8, error: 0.5},
+        {key:'serie1', x: '01/19/16', y: 5, error: 0.5}, //unsorted!!!!
+        {key:'serie1', x: '01/16/16', y: 3, error: 0.5},
+        {key:'serie1', x: '01/17/16', y: 8, error: 0.5},
+        {key:'serie1', x: '01/18/16', y: 3, error: 0.5},
+        {key:'serie1', x: '01/20/16', y: 3, error: 0.5}
+    ];
+    temporalLinechart = new proteic.Linechart(temporalData, {
+		confidenceBandOpacity: 0.7,
+		areaOpacity: 0.3,
+    	xAxisType: 'time',
+        xAxisFormat: '%m/%d/%y',
+        selector: '#chart-temporal',
+        width: '90%',
+        markerSize: 0, // No markers,
+        xAxisLabel: 'Numbers',
+        yAxisLabel: 'Y Axis',
+    });
+    temporalLinechart.draw();
+
+    </script>
+  </body>
+
+  </html>

examples/confidence_streaming.html

@@ -0,0 +1,58 @@
+<!doctype html>
+<!--[if lt IE 7]>      <html class='no-js lt-ie9 lt-ie8 lt-ie7' lang=''> <![endif]-->
+<!--[if IE 7]>         <html class='no-js lt-ie9 lt-ie8' lang=''> <![endif]-->
+<!--[if IE 8]>         <html class='no-js lt-ie9' lang=''> <![endif]-->
+<!--[if gt IE 8]><!-->
+<html class='no-js' lang=''>
+<!--<![endif]-->
+
+<head>
+
+    <head>
+        <title>Dynamic Confidence Band</title>
+        <script src='../node_modules/d3/build/d3.min.js'></script>
+        <script src='../dist/proteic.js'></script>
+        <meta charset="utf-8" />
+
+        <link rel="stylesheet" href="../dist/proteic.css">
+    </head>
+
+    <body>
+        <div id='chart'></div>
+        <script>
+    let margins = {
+        top: 20,
+        left: 70,
+        bottom: 100,
+        right: 20
+    };
+            var ws = new WebSocket('wss://proteicws.herokuapp.com/rain');
+            var ds = new proteic.WebsocketDatasource(ws);
+            linechart = new proteic.Linechart([], {
+                height: 200,
+                width: '100%',
+                legendPosition: 'bottom',
+                marginTop: margins.top,
+                marginRight: margins.right + 100,
+                marginBottom: margins.bottom,
+                marginLeft: margins.left,
+                yAxisLabel: 'Amount',
+                xTicksTextRotation: -65,
+                propertyX: 'time',
+                propertyY: 'value',
+                propertyKey: 'key',
+                xAxisType: 'time',
+                xAxisFormat: '%Y-%m-%d %H:%M:%S',
+                maxNumberOfElements: 5855,
+                colorScale: proteic.Colors.category7(),
+                confidenceBandOpacity: 0.3,
+                confidenceModifier: (confidence) => 0.1 * confidence,
+                propertyError: 'flowError',
+            })
+            .unpivot(['rain', 'flow'])
+            .datasource(ds);
+            ds.start();
+        </script>
+    </body>
+
+</html>