[WIP] Add a network diagram

app/javascript/blacklight/layouts/home.vue

@@ -20,7 +20,7 @@
           <div class="card-body">
             <h5 class="card-title">Visualizations</h5>
             <p class="card-text">See how Stanford researchers connect with the world</p>
-            <a href="#" class="btn btn-primary">Visualize</a>
+            <router-link :to="{ name: 'visulizations'}" class="btn btn-primary">Visualize</router-link>
           </div>
         </div>
       </div>

app/javascript/blacklight/layouts/visualizations.vue

@@ -0,0 +1,19 @@
+<template>
+  <section class="container">
+    <h1>Visualizations</h1>
+    <NetworkVisualization />
+  </section>
+</template>
+
+
+<script>
+import NetworkVisualization from '../networkVisualization.vue'
+export default {
+  components: {
+    NetworkVisualization
+  }
+}
+</script>
+
+<style scoped>
+</style>

app/javascript/blacklight/networkVisualization.vue

@@ -0,0 +1,51 @@
+<template>
+  <div id="foo">
+    <d3-network :net-nodes="nodes" :net-links="links" :options="options" />
+  </div>
+</template>
+
+<script>
+import D3Network from 'vue-d3-network'
+
+export default {
+  name: 'NetworkVisualization',
+  components: {
+    D3Network
+  },
+  data: function() {
+    return {
+      options: {
+        force: 3000,
+        nodeSize: 20,
+        nodeLabels: true,
+        linkWidth:5
+      },
+      nodes: [
+          { id: 1, name: 'Stanford' },
+        { id: 2, name: 'Cornell' },
+        { id: 3, name: 'Minnesota', _color:'orange' },
+        { id: 4, name: 'Cal', _size: '50' },
+        { id: 5, name: 'Northwestern' },
+        { id: 6, name: 'Columbia' },
+        { id: 7, name: 'York' },
+        { id: 8, name: 'Penn State' },
+        { id: 9, name: 'Harvard' }],
+      links: [
+        { sid: 1, tid: 2, _color:'red' },
+        { sid: 2, tid: 8, _color:'lightgray' },
+        { sid: 3, tid: 4, _color:'rebeccapurple' },
+        { sid: 4, tid: 5, _color:'lightgray' },
+        { sid: 5, tid: 6, _color:'lightgray' },
+        { sid: 7, tid: 8, _color:'lightgray' },
+        { sid: 5, tid: 8, _color:'lightgray' },
+        { sid: 3, tid: 8, _color:'lightgray' },
+        { sid: 7, tid: 9, _color:'lightgray' }
+      ]
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+</style>

app/javascript/packs/blacklight_vue.js

@@ -16,10 +16,12 @@ Vue.use(VueRouter)
 import Show from '../blacklight/layouts/showPage.vue'
 import Search from '../blacklight/layouts/search.vue'
 import Home from '../blacklight/layouts/home.vue'
+import Visualizations from '../blacklight/layouts/visualizations.vue'
 
 const routes = [
   { path: '/catalog/:id', name: 'show', component: Show },
   { path: '/catalog', name: 'search', component: Search },
+  { path: '/viz', name: 'visulizations', component: Visualizations },
   { path: '/', name: 'home', component: Home }
 ]
 

package.json

@@ -9,6 +9,7 @@
     "popper.js": "^1.14.3",
     "typeahead.js": "^0.11.1",
     "vue": "^2.5.16",
+    "vue-d3-network": "^0.1.26",
     "vue-loader": "14.2.2",
     "vue-resource": "^1.5.1",
     "vue-router": "^3.0.1",

yarn.lock

@@ -1658,6 +1658,31 @@ cyclist@~0.2.2:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-0.2.2.tgz#1b33792e11e914a2fd6d6ed6447464444e5fa640"
 
+d3-collection@1:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/d3-collection/-/d3-collection-1.0.4.tgz#342dfd12837c90974f33f1cc0a785aea570dcdc2"
+
+d3-dispatch@1:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/d3-dispatch/-/d3-dispatch-1.0.3.tgz#46e1491eaa9b58c358fce5be4e8bed626e7871f8"
+
+d3-force@^1.0.6:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/d3-force/-/d3-force-1.1.0.tgz#cebf3c694f1078fcc3d4daf8e567b2fbd70d4ea3"
+  dependencies:
+    d3-collection "1"
+    d3-dispatch "1"
+    d3-quadtree "1"
+    d3-timer "1"
+
+d3-quadtree@1:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/d3-quadtree/-/d3-quadtree-1.0.3.tgz#ac7987e3e23fe805a990f28e1b50d38fcb822438"
+
+d3-timer@1:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/d3-timer/-/d3-timer-1.0.7.tgz#df9650ca587f6c96607ff4e60cc38229e8dd8531"
+
 d@1:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/d/-/d-1.0.0.tgz#754bb5bfe55451da69a58b94d45f4c5b0462d58f"
@@ -6119,6 +6144,12 @@ [email protected]:
   dependencies:
     indexof "0.0.1"
 
+vue-d3-network@^0.1.26:
+  version "0.1.26"
+  resolved "https://registry.yarnpkg.com/vue-d3-network/-/vue-d3-network-0.1.26.tgz#5317396c4d96aab7ab806fba009e48c0a551a19b"
+  dependencies:
+    d3-force "^1.0.6"
+
 vue-hot-reload-api@^2.2.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.0.tgz#97976142405d13d8efae154749e88c4e358cf926"