Merge pull request #376 from proteus-h2020/development

Release 0.0.30
proteus-h2020 · Feb 12, 2018 · 103aba8 · 103aba8
2 parents 7c5f1b4 + 81ea467
commit 103aba8
Show file tree

Hide file tree

Showing 8 changed files with 91 additions and 25 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,13 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+## [0.0.30] - 2018-02-12
+### Changed
+- Transfer NPM package to @proteus-h2020 org
+
+### Fixed
+- Network chart improvements
+
 ## [0.0.29] - 2018-02-05
 ### Added
 - iframe example
@@ -24,7 +31,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [0.0.27] - 2017-10-09
 ### Added
--  - ⭐ **New visualization: Parallel Coordinates**
+- ⭐ **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

diff --git a/dist/proteic.js b/dist/proteic.js
diff --git a/dist/proteic.js.map b/dist/proteic.js.map
diff --git a/examples/network.html b/examples/network.html
@@ -14,15 +14,18 @@
 </head>
 
 <body>
-  <h1> Normal network</h1>
+  <h1> Normal graph</h1>
   <div id='chart'></div>
 
-  <h1> Weighted network without zoom</h1>
+  <h1> Weighted graph without zoom</h1>
   <div id='weightedNetwork'></div>
 
-  <h1> Network without labels</h1>
+  <h1> Graph without labels</h1>
   <div id='noLabelsChart'></div>
 
+  <h1> Disconnected graph</h1>
+  <div id="disconnected"></div>
+
 
   <script>
         var data = [
@@ -78,14 +81,49 @@ <h1> Network without labels</h1>
     {"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 disconnectedData = [
+      {"class": "node", "id": "Myriel", "key": 1, "weight": 25},
+      {"class": "node", "id": "Napoleon", "key": 1, "weight": 50},
+      {"class": "node", "id": "Mlle.Baptistine", "key": 1, "weight": 35},
+      {"class": "node", "id": "Mme.Magloire", "key": 1, "weight": 100},
+      {"class": "node", "id": "CountessdeLo", "key": 1, "weight": 10},
+      {"class": "node", "id": "Geborand", "key": 1, "weight": 50},
+      {"class": "node", "id": "Champtercier", "key": 1, "weight": 75},
+      {"class": "node", "id": "Cravatte", "key": 1, "weight": 75},
+      {"class": "node", "id": "Count", "key": 1, "weight": 75},
+      {"class": "node", "id": "OldMan", "key": 1, "weight": 75},
+      {"class": "node", "id": "Labarre", "key": 2, "weight": 75},
+      {"class": "node", "id": "Valjean", "key": 2, "weight": 75},
+      {"class": "node", "id": "Marguerite", "key": 3, "weight": 75},
+      {"class": "node", "id": "Mme.deR", "key": 2, "weight": 75},
+      {"class": "node", "id": "Isabeau", "key": 2, "weight": 75},
+      {"class": "node", "id": "Gervais", "key": 2, "weight": 75},
+      {"class": "node", "id": "Tholomyes", "key": 3, "weight": 75},
+      {"class": "node", "id": "Listolier", "key": 3, "weight": 75},
+      {"class": "node", "id": "Fameuil", "key": 3, "weight": 75},
+      {"class": "node", "id": "Blacheville", "key": 3, "weight": 75},
+      {"class": "node", "id": "Favourite", "key": 3, "weight": 75},
+      {"class": "node", "id": "Dahlia", "key": 3, "weight": 75},
+
+      {"class": "link", "source": "Napoleon", "target": "Myriel", "weight": 1},
+      {"class": "link", "source": "Mlle.Baptistine", "target": "Myriel", "weight": 8},
+      {"class": "link", "source": "Mme.Magloire", "target": "Myriel", "weight": 10},
+      {"class": "link", "source": "Mme.Magloire", "target": "Mlle.Baptistine", "weight": 6},
+      {"class": "link", "source": "CountessdeLo", "target": "Myriel", "weight": 1},
+      {"class": "link", "source": "Geborand", "target": "Myriel", "weight": 1},
+      {"class": "link", "source": "Champtercier", "target": "Myriel", "weight": 1},
+      {"class": "link", "source": "Cravatte", "target": "Myriel", "weight": 1},
+      {"class": "link", "source": "Count", "target": "Myriel", "weight": 2},
+    ];
+
     chart = new proteic.Network(data, {
       width: '100%',
       height: 600,
@@ -96,29 +134,39 @@ <h1> Network without labels</h1>
     });
 
 
-  weightedChart = new proteic.Network(data, {
-    selector: '#weightedNetwork',
+    weightedChart = new proteic.Network(data, {
+      selector: '#weightedNetwork',
       width: '100%',
       height: 600,
       weighted: true,
-      zoom:false,
-      labelField: (d) => 'label: ' + d.id,
+      zoom: false,
+      labelField: (d) => d.id,
       onClick: (d) => console.log('clicking', d)
     });
 
-  noLabelsChart = new proteic.Network(data, {
+    noLabelsChart = new proteic.Network(data, {
       selector: '#noLabelsChart',
       width: '100%',
       height: 600,
       labelShow: false,
       onClick: (d) => console.log('clicking', d)
     });
 
+    disconnected = new proteic.Network(disconnectedData, {
+      selector: '#disconnected',
+      width: '100%',
+      height: 600,
+      weighted: true,
+      zoom: false,
+      labelField: (d) => d.id,
+      onClick: (d) => console.log('clicking', d)
+    });
 
     chart.draw();
     weightedChart.draw();
     noLabelsChart.draw();
+    disconnected.draw();
   </script>
 </body>
 
-</html>
+</html>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "proteic",
-  "version": "0.0.29",
+  "name": "@proteus-h2020/proteic",
+  "version": "0.0.30",
   "description": "Streaming and static data visualization for the modern web",
   "homepage": "http://proteic.js.org/",
   "main": "dist/proteic.node.js",

diff --git a/src/charts/Chart.ts b/src/charts/Chart.ts
@@ -91,21 +91,21 @@ abstract class Chart {
      * @protected
      * @memberof Chart
      */
-    protected streamingIntervalIdentifier: number = null;
+    protected streamingIntervalIdentifier: any = null;
 
     /**
      * An identifier Only used to set streaming interval when chart initially changes the state from pause to resume
      * @protected
      * @memberof Chart
      */
-    protected resumeIntervalIdentifier: number = null;
+    protected resumeIntervalIdentifier: any = null;
 
     /**
      * An identifier used to store Array type paused data with interval to tolerate long time
      * @protected
      * @memberof Chart
      */
-    protected storeIntervalIdentifier: number = null;
+    protected storeIntervalIdentifier: any = null;
 
     // TODO: Inject with annotations?
     private visibilityObservable: Observable<any> = GlobalInjector.getRegistered('onVisibilityChange');

diff --git a/src/svg/components/LinkedNodeset.ts b/src/svg/components/LinkedNodeset.ts
@@ -14,6 +14,8 @@ import {
     forceLink,
     forceManyBody,
     forceCenter,
+    forceX as d3ForceX,
+    forceY as d3ForceY,
     Simulation,
     SimulationNodeDatum,
     SimulationLinkDatum,
@@ -30,6 +32,8 @@ class LinkedNodeset extends Component implements Zoomable {
     private dragended: any;
     private linkedByIndex: any;
     private toggle: number = 0;
+    private forceX: any;
+    private forceY: any;
 
 
     constructor() {
@@ -40,10 +44,15 @@ class LinkedNodeset extends Component implements Zoomable {
         let width: number = this.config.get('width'),
             height: number = this.config.get('height');
 
+        this.forceX = d3ForceX(width / 2).strength(0.015);
+        this.forceY = d3ForceY(height / 2).strength(0.015);
+
         this.simulation = forceSimulation()
-            .force('link', forceLink().id((d: any) => d.id).distance(50))
-            .force('charge', forceManyBody())
-            .force('center', forceCenter(width / 2, height / 2));
+            .force('link', forceLink().id((d: any) => d.id).distance(100))
+            .force('charge', forceManyBody().strength(-30).distanceMax(500))
+            .force('center', forceCenter(width / 2, height / 2))
+            .force('x', this.forceX)
+            .force('y', this.forceY);
 
         this.dragstarted = (d: SimulationNodeDatum) => {
             if (!event.active) { this.simulation.alphaTarget(0.3).restart(); }
@@ -74,7 +83,7 @@ class LinkedNodeset extends Component implements Zoomable {
             minNodeWeight = this.config.get('minNodeWeight'),
             maxNodeWeight = this.config.get('maxNodeWeight'),
             weighted = this.config.get('weighted'),
-            linkScaleRadius = scaleLinear().domain([minLinkWeight, maxLinkWeight]).range([0, 3]),
+            linkScaleRadius = scaleLinear().domain([minLinkWeight, maxLinkWeight]).range([0, 5]),
             nodeScaleRadius = scaleLinear().domain([minNodeWeight, maxNodeWeight]).range([0, 15]),
             labelShow = this.config.get('labelShow'),
             labelField = this.config.get('labelField'),
@@ -101,7 +110,7 @@ class LinkedNodeset extends Component implements Zoomable {
             .attr('stroke', '#999')
             .attr('stroke-opacity', 1);
 
-        node = this.svg.select('g.serie').append('g')
+        node = this.svg.selectAll('g.serie').append('g')
             .attr('class', 'nodes')
             .selectAll('circle')
             .data(data.nodes)
@@ -118,7 +127,6 @@ class LinkedNodeset extends Component implements Zoomable {
 
         let chart = this;
         node
-
             .on('mousedown.user', this.config.get('onDown'))
             .on('mouseup.user', this.config.get('onUp'))
             .on('mouseleave.user', this.config.get('onLeave'))
@@ -148,7 +156,6 @@ class LinkedNodeset extends Component implements Zoomable {
             : this.ticked(link, node));
 
         this.simulation.force('link').links(data.links);
-
     }
     private tickedWithText(link: any, node: any, text: any) {
         this.ticked(link, node);
@@ -178,9 +185,11 @@ class LinkedNodeset extends Component implements Zoomable {
     }
 
     public clear() {
+        this.svg.selectAll('.serie').remove();
         this.svg.selectAll('.nodes').remove();
         this.svg.selectAll('.links').remove();
         this.svg.selectAll('.labels').remove();
+        this.render();
     }
 
     public transition() {

diff --git a/src/utils/defaults/network.ts b/src/utils/defaults/network.ts
@@ -16,6 +16,8 @@ export const defaults: any = {
     nodeWeight: 8,
     minLinkValue: 0,
     maxLinkValue: 10,
+    minLinkWeight: 0,
+    maxLinkWeight: 10,
     minNodeWeight: 0,
     maxNodeWeight: 100,
     weighted: false,