merge forcenet with wikimap, many refinements, incremental loading directly from api

splitscreen.css

@@ -88,7 +88,7 @@ body {
 }
 
 .links line.active2 {
-    stroke: red;
+    stroke: magenta;
 }
 
 .links line.history {
@@ -96,11 +96,11 @@ body {
 }
 
 .active {
-    stroke: red;
+    stroke: magenta;
 }
 
 .category circle {
-    fill: yellow;
+    fill: cyan;
 }
 
 .web circle {
@@ -134,11 +134,11 @@ svg g.page {
 svg g.page text {
     visibility: hidden;
     fill: #222;
-    font: 12px sans-serif;
+    font: 9px sans-serif;
 }
 
 svg g.active text {
-    visibility: visible;
+    /*visibility: visible;*/
 }
 
 svg g.mouse text {
@@ -150,24 +150,44 @@ use {
     stroke: black;
 }
 
+.highlight use {
+    fill: #FFF;
+    stroke: cyan;
+}
+
+.active use {
+/*  animation-transform: 2;*/
+  animation-duration: 2s;
+  animation-name: pulse;
+  animation-iteration-count: infinite;
+}
+
+@keyframes pulse {
+  0% {
+    transform: scale(1, 1);
+  }
+  50% {
+    transform: scale(1.5, 1.5);
+  }
+  100% {
+    transform: scale(1, 1);
+  }
+}
+
 .active use {
     fill: #FFF;
-    stroke: red;
+    stroke: magenta;
 }
 
 .active text {
-    stroke: black;
+    stroke: none;
 }
 
 .active2 use {
     fill: #FFF;
-    stroke: red;
+    stroke: magenta;
 }
 
-.highlight use {
-    fill: #FFF;
-    stroke: orange;
-}
 
 
 /* Categories */
@@ -243,6 +263,9 @@ use {
     color: black;
     text-decoration: none;
 }
+#cats div.cat.highlight a {
+    color: cyan;
+}
 #cats hr {
   color: white;
 }