PageRanking in gulpfile and hasCredential instead of attendee

.htaccess

@@ -2,11 +2,18 @@
 RewriteEngine On
 RewriteRule "^2018/data-flaneur$" "index.html"
 RewriteRule "^2018/digital-cultures$" "index.html"
+RewriteRule "^2020/acts-of-collection-and-omission$" "index.html"
 RewriteRule "^article/choose-how-you-feel-you-have-seven-options$" "index.html"
 RewriteRule "^assets/video/guerilla_project.mp4$" "index.html"
+RewriteRule "^choose-how-you-feel-you-have-seven-options$" "index.html"
+RewriteRule "^degree/avm$" "index.html"
+RewriteRule "^degree/cddc$" "index.html"
+RewriteRule "^degree/mechanical-engineering$" "index.html"
+RewriteRule "^degree/media-design$" "index.html"
 RewriteRule "^emotionhero$" "index.html"
 RewriteRule "^event/2018/yama-ichi$" "index.html"
 RewriteRule "^event/2019/ccu-presentation$" "index.html"
+RewriteRule "^event/cqrrelations$" "index.html"
 RewriteRule "^event/creativity-and-cognition$" "index.html"
 RewriteRule "^exercises-in-overfitting$" "index.html"
 RewriteRule "^exercises-in-overfitting/image/1$" "index.html"
@@ -43,6 +50,7 @@ RewriteRule "^mvp3$" "index.html"
 RewriteRule "^mvp3/image/1$" "index.html"
 RewriteRule "^mvps$" "index.html"
 RewriteRule "^organisation/ccu$" "index.html"
+RewriteRule "^organisation/constant$" "index.html"
 RewriteRule "^organisation/nsvp$" "index.html"
 RewriteRule "^organisation/setup$" "index.html"
 RewriteRule "^organisation/v2_$" "index.html"
@@ -53,9 +61,11 @@ RewriteRule "^person/joseph-huot$" "index.html"
 RewriteRule "^person/merijn-van-moll$" "index.html"
 RewriteRule "^person/mikel-folgerts$" "index.html"
 RewriteRule "^person/ward-goes$" "index.html"
+RewriteRule "^pillow-talk$" "index.html"
 RewriteRule "^place/in4art$" "index.html"
 RewriteRule "^place/q21$" "index.html"
 RewriteRule "^plottingdata$" "index.html"
+RewriteRule "^residency/q21$" "index.html"
 RewriteRule "^residency/summer-sessions$" "index.html"
 RewriteRule "^samawati/video$" "index.html"
 RewriteRule "^spectacular-spectator-mood-meter$" "index.html"
@@ -73,6 +83,7 @@ RewriteRule "^@type/Event$" "index.html"
 RewriteRule "^@type/Report$" "index.html"
 RewriteRule "^@type/VideoObject$" "index.html"
 RewriteRule "^@type/MediaObject$" "index.html"
+RewriteRule "^@type/EducationalOccupationalCredential$" "index.html"
 RewriteRule "^@type/ExhibitionEvent$" "index.html"
 RewriteRule "^@type/ImageObject$" "index.html"
 RewriteRule "^@type/Festival$" "index.html"
@@ -83,5 +94,6 @@ RewriteRule "^@type/Person$" "index.html"
 RewriteRule "^@type/EventVenue$" "index.html"
 RewriteRule "^@type/Museum$" "index.html"
 RewriteRule "^@type/PerformingGroup$" "index.html"
+RewriteRule "^@type/VisualArtsEvent$" "index.html"
 RewriteRule "^@type/CollegeOrUniversity$" "index.html"
 RewriteRule "^@type/WebSite$" "index.html"

assets/css/portfolio.css

@@ -6,7 +6,7 @@ body {
   font-family: "DDINRegular", helvetica, sans-serif;
   font-weight: light;
   height: 100vh;
-  background: black;
+  background: #222;
   font-size: 12pt; }
 
 a, a:link, a:visited {
@@ -162,7 +162,7 @@ text {
       width: 0; }
   #nodeDetails .nodeType {
     font-size: 80%;
-    text-transform: uppercase;
+    font-variant-caps: small-caps;
     color: #999;
     margin-left: 10px; }
     #nodeDetails .nodeType:hover {
@@ -201,7 +201,8 @@ text {
     width: 170px;
     font-weight: bold;
     min-height: 25px;
-    clear: both; }
+    clear: both;
+    word-wrap: anywhere; }
   #nodeDetails dd {
     min-height: 30px;
     margin-top: 5px; }

assets/js/portfolio.js

@@ -45,7 +45,7 @@ function getNodeYear(n) {
     return n['https://schema.org/datePublished'].substr(0, 4);
   }
   if (typeof n['https://schema.org/startDate'] !== 'undefined') {
-    console.log(n['https://schema.org/startDate']);
+    // console.log(n['https://schema.org/startDate']);
     return n['https://schema.org/startDate'].substr(0, 4);
   }
   if (typeof n['https://schema.org/endDate'] !== 'undefined') {
@@ -125,10 +125,24 @@ var graph;
 var nodeMap = {};
 var linkMap = {};
 var breadcrumbs = {};
+var weights = {};
+
 // load the flattened jsonld file
 var requestPromise = fetch('/assets/js/rubenvandeven.jsonld').then(function (r) {
   return r.json();
-}).then(function (data) {
+});
+var rankingPromise = fetch('/assets/js/ranking.json').then(function (r) {
+  return r.json();
+});
+
+Promise.all([requestPromise, rankingPromise]).then(function (values) {
+  if (values[0].hasOwnProperty('@graph')) {
+    data = values[0];
+    weights = values[1];
+  } else {
+    data = values[1];
+    weights = values[0];
+  }
   graph = jsonLdToGraph(data['@graph']);
   // create a map of nodes by id.
   for (var i in graph.nodes) {
@@ -199,8 +213,7 @@ var firstNodeId = "https://rubenvandeven.com/";
 
 function getSizeForNode(node) {
   if (node.hasOwnProperty('https://schema.org/thumbnailUrl')) return nodeSize;
-  //if(weights[node['@id']])
-  //  return nodeSize * weights[node['@id']];
+  if (weights[node['@id']]) return nodeSize * weights[node['@id']];
   if (node['@id'] == firstNodeId) return nodeSize * 1.2;
   // everynode has at least one link. these should equal 1
   return nodeSize * (.7 + Math.min(20, linkMap[node['@id']].length) / 40);
@@ -534,7 +547,7 @@ function startGraph(graph) {
     deselectNode();
     if (updateHistory) {
       // TODO: working
-      console.log(types[0], getDisplayAttr(types[0]), types.map(getDisplayAttr));
+      // console.log(types[0], getDisplayAttr(types[0]),types.map(getDisplayAttr));
       history.pushState({ types: types }, "", "/@type/" + types.map(getDisplayAttr).join("+"));
     } else {
       history.replaceState({ types: types }, "", "/@type/" + types.map(getDisplayAttr).join("+"));
@@ -729,11 +742,17 @@ function startGraph(graph) {
       }
     }
 
-    // relationships / links in <dl>
+    // relationships / links incomming <dl>
     for (var _attr in relDown) {
       var attrEl = document.createElement("dt");
       attrEl.innerHTML = getDisplayAttr(_attr);
       relsEl.appendChild(attrEl);
+
+      // highest pagerank first:
+      relDown[_attr].sort(function (a, b) {
+        return weights[b['@id']] - weights[a['@id']];
+      });
+
       for (var _i2 in relDown[_attr]) {
         var rel = relDown[_attr][_i2];
         relsEl.appendChild(createRelationshipEl(rel));
@@ -752,10 +771,17 @@ function startGraph(graph) {
       }
     }
 
+    // relationships / links outgoing <dl>
     for (var _attr2 in relUp) {
       var _attrEl = document.createElement("dt");
       _attrEl.innerHTML = getDisplayAttr(_attr2);
       relsEl.appendChild(_attrEl);
+
+      // highest pagerank first:
+      relUp[_attr2].sort(function (a, b) {
+        return weights[b['@id']] - weights[a['@id']];
+      });
+
       for (var _i3 in relUp[_attr2]) {
         var _rel = relUp[_attr2][_i3];
         relsEl.appendChild(createRelationshipEl(_rel, _i3));

gulpfile.js

@@ -10,6 +10,7 @@ var browserSync = require('browser-sync');
 var jsonld = require('jsonld');
 var source = require('vinyl-source-stream');
 var buffer = require('vinyl-buffer');
+var exec = require('child_process').exec;
 
 
 var through = require('through2')
@@ -106,21 +107,39 @@ function createHtaccessFromFlattenedJsonld(flattened) {
     require('fs').writeFileSync('.htaccess', contentLines.join("\n")+"\n"+Object.values(typeLines).join("\n") + "\n");
 }
 
-gulp.task('jsonld', function(){
+function createPagerankFromFlattenedJsonld(done){
+  exec('ranking/venv/bin/python ranking/jsonld_ranking.py -i assets/js/rubenvandeven.jsonld -o assets/js/ranking.json', function (err, stdout, stderr) {
+    if(stdout)
+      console.log(stdout);
+    if(stderr)
+      console.error(stderr);
+    done(err);
+  });
+}
+
+gulp.task('flattenJsonld', function() {
   return gulp.src(paths.data.src)
     .pipe(through.obj(function (file, enc, callback) {
       let data = JSON.parse(file.contents.toString(enc));
       var transformedFile = file.clone();
       // console.log(data);
       jsonld.flatten(data, {}, (err, flattened)=> {
+        if(err) {
+          console.error(err);
+        }
         transformedFile.contents = Buffer.from(JSON.stringify(flattened), enc);
         createHtaccessFromFlattenedJsonld(flattened);
         callback(null, transformedFile)
       });
     }))
-    .pipe(gulp.dest(paths.data.dest));
+    .pipe(gulp.dest(paths.data.dest))
 });
 
+gulp.task('jsonld', gulp.series(
+  'flattenJsonld',
+  createPagerankFromFlattenedJsonld
+));
+
 var watchStylesAndScripts = function() {
   gulp.watch(paths.styles.src, gulp.series('styles'));
   gulp.watch(paths.scripts.src,gulp.series('scripts', reload));

ranking/jsonld_ranking.py

@@ -1,10 +1,20 @@
 from pyld import jsonld
 import json
-
 import PageRank.pagerank as pagerank
+import argparse
+
+parser = argparse.ArgumentParser(description='Apply pagerank to the (flattened) JSONLD file')
+parser.add_argument('--jsonld', '-i', metavar='FILENAME.JSONLD', type=str,
+                    required=True,
+                    help='Input filename, make sure to use the flattened JSONLD (in our case from the \'assets\' folder)')
+parser.add_argument('--output', '-o', type=str,
+                    default=None, metavar='FILENAME.JSON',
+                    help='Optional output filename for the resulting JSON')
+
+args = parser.parse_args()
 
 # use flattened jsonld
-with open('../assets/js/rubenvandeven.jsonld', 'r') as fp:
+with open(args.jsonld, 'r') as fp:
     contents = json.load(fp)['@graph']
 
 linksPerItem = {}
@@ -17,6 +27,7 @@ def addCount(fromId, toId, weight):
     linksPerItem[fromId][toId] += weight
 
 def addLink(fromId, toId, weight = 1):
+    # Add link both ways: from + to.
     addCount(fromId, toId, weight)
     addCount(toId, fromId, weight)
 
@@ -49,7 +60,13 @@ targetMax = 1.5
 values = pagerank.powerIteration(linksPerItem)
 
 normalised = targetMin + (values - min(values)) * (targetMax-targetMin)/max(values)
-print(json.dumps(dict(normalised)))
+
+if args.output is None:
+    print(json.dumps(dict(normalised)))
+else:
+    with open(args.output, 'w') as fp:
+        json.dump(dict(normalised), fp)
+
 #
 # factor = 1 / min(values)
 # print(factor)

src/js/portfolio.js

@@ -33,7 +33,7 @@ function getNodeYear(n){
     return n['https://schema.org/datePublished'].substr(0,4);
   }
   if(typeof n['https://schema.org/startDate'] !== 'undefined') {
-      console.log(n['https://schema.org/startDate']);
+      // console.log(n['https://schema.org/startDate']);
     return n['https://schema.org/startDate'].substr(0,4);
   }
   if(typeof n['https://schema.org/endDate'] !== 'undefined') {
@@ -114,10 +114,21 @@ var graph;
 var nodeMap = {};
 var linkMap = {};
 var breadcrumbs = {};
+var weights = {};
+
 // load the flattened jsonld file
-const requestPromise = fetch('/assets/js/rubenvandeven.jsonld')
-                      .then(r => r.json())
-                      .then(data => {
+const requestPromise = fetch('/assets/js/rubenvandeven.jsonld').then(r => r.json());
+const rankingPromise = fetch('/assets/js/ranking.json').then(r => r.json());
+
+Promise.all([requestPromise, rankingPromise])
+                      .then(values => {
+                        if(values[0].hasOwnProperty('@graph')) {
+                          data = values[0];
+                          weights = values[1];
+                        } else {
+                          data = values[1];
+                          weights = values[0];
+                        }
                         graph = jsonLdToGraph(data['@graph']);
                         // create a map of nodes by id.
                         for(let i in graph.nodes) {
@@ -169,8 +180,8 @@ var firstNodeId = "https://rubenvandeven.com/";
 function getSizeForNode(node) {
   if(node.hasOwnProperty('https://schema.org/thumbnailUrl'))
      return nodeSize;
-  //if(weights[node['@id']])
-  //  return nodeSize * weights[node['@id']];
+  if(weights[node['@id']])
+   return nodeSize * weights[node['@id']];
   if(node['@id'] == firstNodeId)
     return nodeSize*1.2;
   // everynode has at least one link. these should equal 1
@@ -442,7 +453,7 @@ var centerByType = function(types, updateHistory) {
   deselectNode();
   if(updateHistory) {
     // TODO: working
-    console.log(types[0], getDisplayAttr(types[0]),types.map(getDisplayAttr));
+    // console.log(types[0], getDisplayAttr(types[0]),types.map(getDisplayAttr));
     history.pushState({types: types}, "", "/@type/"+(types.map(getDisplayAttr).join("+")));
   } else {
     history.replaceState({types: types}, "", "/@type/"+(types.map(getDisplayAttr).join("+")));
@@ -614,11 +625,15 @@ var setDetails = function(nodeDatum, nodeIdx) {
     }
   }
 
-  // relationships / links in <dl>
+  // relationships / links incomming <dl>
   for(let attr in relDown) {
     let attrEl = document.createElement("dt");
     attrEl.innerHTML = getDisplayAttr(attr);
     relsEl.appendChild(attrEl);
+
+    // highest pagerank first:
+    relDown[attr].sort((a,b) => weights[b['@id']] - weights[a['@id']]);
+
     for(let i in relDown[attr]) {
       let rel = relDown[attr][i];
       relsEl.appendChild(createRelationshipEl(rel));
@@ -637,10 +652,15 @@ var setDetails = function(nodeDatum, nodeIdx) {
     }
   }
 
+  // relationships / links outgoing <dl>
   for(let attr in relUp) {
     let attrEl = document.createElement("dt");
     attrEl.innerHTML = getDisplayAttr(attr);
     relsEl.appendChild(attrEl);
+
+    // highest pagerank first:
+    relUp[attr].sort((a,b) => weights[b['@id']] - weights[a['@id']]);
+
     for(let i in relUp[attr]) {
       let rel = relUp[attr][i];
       relsEl.appendChild(createRelationshipEl(rel, i));

src/scss/portfolio.scss

@@ -20,7 +20,8 @@ body{
   // - NunitoSansRegular
   font-weight: light;
   height: 100vh;
-  background: black;
+  background:#222;
+  // background: radial-gradient(purple, darken(purple, 10%));
   font-size: 12pt;
 }
 
@@ -271,7 +272,8 @@ text{
 
   .nodeType{
     font-size:80%;
-    text-transform: uppercase;
+    // text-transform: uppercase;
+    font-variant-caps: small-caps;
     color: #999;
     margin-left:10px;
 
@@ -329,6 +331,7 @@ text{
      font-weight:bold;
      min-height:25px;
      clear:both;
+     word-wrap: anywhere; // relations like "educationalCredentialAward" are crazily long..
    }
    dd{
      min-height:30px;