updating colors and other nits

package.json

@@ -20,7 +20,7 @@
     "seedrandom": "2.4.3",
     "tfjs": "^0.6.0",
     "underscore": "^1.10.2",
-    "yarn": "^1.17.3"
+    "yarn": "^1.22.10"
   },
   "devDependencies": {
     "@babel/core": "^7.5.5",

visualizations/graph-description-embeddings.ts

@@ -148,9 +148,9 @@ export class GraphDescriptionEmbeddings {
         .attr('stroke', 'white');
     }
 
-    makeLine('Global (or master node) embedding', this.global[0], 'g')
     makeLine('Vertex (or node) embedding', this.nodes[this.selectedNodeIdx], 'n')
     makeLine('Edge (or link) attributes and embedding', this.links[this.selectedEdgeIdx], 'l')
+    makeLine('Global (or master node) embedding', this.global[0], 'g')
 
     this.parent.selectAll('circle')
       .style("stroke-width", (d, i) => this.selectedNodeIdx == i ? 6 : 1)

visualizations/graph-description.ts

@@ -108,9 +108,9 @@ export class GraphDescription {
       div.on('mouseout', () => this.unhighlightAll()));
     }
 
-    makeLine('U', 'Global (or master node) attributes', 'e.g., number of nodes, longest path', () => this.highlightGlobal())
     makeLine('V', 'Vertex (or node) attributes', 'e.g., node identity, number of neighbors', () => this.highlightNodes())
     makeLine('E', 'Edge (or link) attributes and directions', 'e.g., edge identity, edge weight', () => this.highlightEdges())
+    makeLine('U', 'Global (or master node) attributes', 'e.g., number of nodes, longest path', () => this.highlightGlobal())
   }
   highlightEdges() {
     this.parent.select('#E').classed('selected', true);

visualizations/image-as-graph.js

@@ -62,8 +62,9 @@ function fontColor(d) {
   return d.isOn ? '#fff' : '#777';
 }
 
-var dBlue = 'steelblue'
-var lBlue = d3.color(dBlue).darker(1);
+var blue = 'steelblue'
+var dBlue = d3.color(blue).darker(-.5);
+var lBlue = d3.color(blue).darker(2);
 
 export function imageAsGraph() {
 
@@ -189,7 +190,7 @@ export function imageAsGraph() {
     })
 
   var fLinkSel = f.svg.append('g').appendMany('path.link', links)
-    .at({stroke: 'steelblue',})
+    .at({stroke: dBlue,})
     .on('mouseover', updateActivePair)
 
   var fNodeSel = f.svg.appendMany('g', pixels)

visualizations/mols-as-graph.ts

@@ -18,8 +18,10 @@
 
 import * as d3 from 'd3';
 
-const blue = d3.color('steelblue');
-const blueDark = blue.darker(1);
+const steelblue = d3.color('steelblue')
+const blue = steelblue.darker(-.5);
+const blueDark =steelblue.darker(2);
+
 export class XsAsGraphs {
   parent = d3.select('#mols-as-graph');
   names = ['caffeine', 'citronellal', 'othello', 'karate']

visualizations/text-as-graph.ts

@@ -22,8 +22,9 @@ const padding = 30
 const wordSpacing = 30
 const fontSize = 30
 const charWidth = calcCharWidth();
-const blue = d3.color('steelblue');
-const blueDark = blue.darker(1);
+const steelblue = d3.color('steelblue')
+const blue = steelblue.darker(-.5);
+const blueDark =steelblue.darker(2);
 
 export class TextAsGraph {