diff --git a/assets/css/portfolio.css b/assets/css/portfolio.css index d518b48..3712ab0 100644 --- a/assets/css/portfolio.css +++ b/assets/css/portfolio.css @@ -73,7 +73,9 @@ g.node { font-size: 10pt; } g.node text.nodeTitle tspan { text-anchor: middle; } - g.node.ImageObject text.nodeTitle { + g.node .play { + fill: white; } + g.node.ImageObject text.nodeTitle, g.node.VideoObject text.nodeTitle, g.node.BroadcastEvent text.nodeTitle { display: none; } .relationship { diff --git a/assets/js/portfolio.js b/assets/js/portfolio.js index a9c324b..ac3d236 100644 --- a/assets/js/portfolio.js +++ b/assets/js/portfolio.js @@ -44,6 +44,9 @@ function getNodeLabel(node) { } function getNodeYear(n) { if (typeof n['https://schema.org/dateCreated'] !== 'undefined') { + if (n['https://schema.org/dateCreated'].length == 9) { + return n['https://schema.org/dateCreated']; + } return n['https://schema.org/dateCreated'].substr(0, 4); } if (typeof n['https://schema.org/datePublished'] !== 'undefined') { @@ -51,7 +54,8 @@ function getNodeYear(n) { } if (typeof n['https://schema.org/startDate'] !== 'undefined') { // console.log(n['https://schema.org/startDate']); - return n['https://schema.org/startDate'].substr(0, 4); + var year = n['https://schema.org/startDate'].substr(0, 4); + return year; } if (typeof n['https://schema.org/endDate'] !== 'undefined') { return n['https://schema.org/endDate'].substr(0, 4); @@ -710,9 +714,11 @@ function startGraph(graph) { } else if (attr == 'https://schema.org/contentUrl') { listEl.innerHTML += '
' + getDisplayAttr(attr) + '
' + nodeAttr[_i] + '
'; if (nodeDatum['@type'] == 'https://schema.org/VideoObject') { - var videoType = nodeAttr['https://schema.org/encodingFormat'] ? 'type=\'' + nodeAttr['https://schema.org/encodingFormat'] + '\'' : ""; - var poster = nodeAttr['https://schema.org/thumbnailUrl'] ? 'poster=\'' + nodeAttr['https://schema.org/thumbnailUrl'] + '\'' : ""; - listEl.innerHTML += '
'; + // console.log(nodeDatum, nodeAttr); + var videoType = nodeDatum['https://schema.org/encodingFormat'] ? 'type=\'' + nodeDatum['https://schema.org/encodingFormat'] + '\'' : ""; + var poster = nodeDatum['https://schema.org/thumbnailUrl'] ? 'poster=\'' + nodeDatum['https://schema.org/thumbnailUrl'] + '\'' : ""; + // TODO: enable outplay and make it work (for some reason it does not...) + listEl.innerHTML += '
'; } else { listEl.innerHTML += '
'; } @@ -793,7 +799,13 @@ function startGraph(graph) { if (typeof _rel['https://schema.org/contentUrl'] != 'undefined') { var _ddEl = document.createElement('dd'); _ddEl.classList.add('dd-contentobject'); - _ddEl.innerHTML = ''; + if (_rel['@type'] == 'https://schema.org/VideoObject') { + var _videoType2 = _rel['https://schema.org/encodingFormat'] ? 'type=\'' + _rel['https://schema.org/encodingFormat'] + '\'' : ""; + var _poster2 = _rel['https://schema.org/thumbnailUrl'] ? 'poster=\'' + _rel['https://schema.org/thumbnailUrl'] + '\'' : ""; + _ddEl.innerHTML += ''; + } else { + _ddEl.innerHTML = ''; + } relsEl.appendChild(_ddEl); } } @@ -1194,6 +1206,13 @@ function startGraph(graph) { return "translate(-" + getSizeForNode(d) + " -" + getSizeForNode(d) + ")"; }).attr("clip-path", "url(#clipNodeImage)").attr("preserveAspectRatio", "xMidYMid slice"); }); + node.each(function (d) { + if (d['@type'] !== 'https://schema.org/VideoObject') { + return; + } + var size = getSizeForNode(d); + d3.select(this).append('svg:polygon').attr('points', "-10,-10, -10,10, 10,0").attr("class", "play"); + }); simulation.nodes(graph.nodes).on("tick", ticked); diff --git a/assets/js/portfolio.min.js b/assets/js/portfolio.min.js index c98e9cb..3938d0d 100644 --- a/assets/js/portfolio.min.js +++ b/assets/js/portfolio.min.js @@ -1,2 +1,2 @@ -"use strict";var data,graph,_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};function getLabelAttribute(e){if(void 0!==e["https://schema.org/name"])return"https://schema.org/name";switch(e["@type"]){case"https://schema.org/WebSite":if(void 0!==e["https://schema.org/url"])return"https://schema.org/url";break;case"https://schema.org/ImageObject":if(void 0!==e["https://schema.org/caption"])return"https://schema.org/caption";if(void 0!==e["https://schema.org/contentUrl"])return"https://schema.org/contentUrl";break;case"https://schema.org/PostalAddress":if(void 0!==e["https://schema.org/addressLocality"])return"https://schema.org/addressLocality";break;case"https://schema.org/OrganizationRole":if(void 0!==e["https://schema.org/roleName"])return"https://schema.org/roleName"}return"@id"}function getNodeLabel(e){var t=e[getLabelAttribute(e)];return t=void 0===(t=void 0===t?e["@id"]:t)?"":t}function getNodeYear(e){return void 0!==e["https://schema.org/dateCreated"]?e["https://schema.org/dateCreated"].substr(0,4):void 0!==e["https://schema.org/datePublished"]?e["https://schema.org/datePublished"].substr(0,4):void 0!==e["https://schema.org/startDate"]?e["https://schema.org/startDate"].substr(0,4):void 0!==e["https://schema.org/endDate"]?e["https://schema.org/endDate"].substr(0,4):void 0!==e["https://schema.org/foundingDate"]?e["https://schema.org/foundingDate"].substr(0,4):void 0!==e["https://schema.org/temporalCoverage"]&&e["https://schema.org/temporalCoverage"].match(/\d{4}-\d{4}/)?e["https://schema.org/temporalCoverage"].substr(5,4):null}function getDisplayAttr(e){return e.replace(/.*[#|\/]/,"")}function jsonLdToGraph(e){var t,n,r={},a=[];for(t in e)r[e[t]["@id"]]=e[t];for(n in e){var o,i=e[n],s=i["@id"];for(o in i){var d,c=Array.isArray(i[o])?i[o]:[i[o]];for(d in c)"@id"!==o&&"string"==typeof c[d]&&r[c[d]]?a[a.length]={source:s,target:c[d],name:o}:void 0!==c[d]["@id"]&&(1==Object.keys(c[d]).length&&void 0===r[c[d]["@id"]]||(a[a.length]={source:s,target:c[d]["@id"],name:o}))}}return{nodes:Object.values(r),links:a}}var nodeMap={},linkMap={},breadcrumbs={},weights={},requestPromise=fetch("/assets/js/rubenvandeven.jsonld").then(function(e){return e.json()}),rankingPromise=fetch("/assets/js/ranking.json").then(function(e){return e.json()});function inCircle(e,t,n){var r=Math.abs(e),a=Math.abs(t);return!(n"+getNodeYear(n)+""),r.classList.add("nodeTitle"),r.classList.add("nodeTitleNr"+e),r.addEventListener("click",function(e){var t=P.nodes.indexOf(n);I(t)}),(e=document.createElement("a")).classList.add("nodeType"),e.innerHTML=getDisplayAttr(n["@type"]),e.title=n["@type"],e.addEventListener("click",function(e){X(n["@type"])}),t.appendChild(r),t.appendChild(e),t}function h(t,r){for(document.body.classList.add("detailsOpen"),scrollToY(0,4e3);z.hasChildNodes();)z.removeChild(z.lastChild);var e=[],n=[],a=[],o=document.createElement("div");o.id="nodeDetailsScaler",o.addEventListener("mousedown",function(e){function t(e){z.style.width=window.innerWidth-e.clientX+5+"px"}document.body.addEventListener("mousemove",t),document.body.addEventListener("mouseup",function(){document.body.removeEventListener("mousemove",t)})}),nodeDetails.appendChild(o);var i=document.createElement("ul");i.classList.add("breadcrumbs");var s=!0,d=!1,c=void 0;try{for(var l,u=breadcrumbs[t["@id"]][Symbol.iterator]();!(s=(l=u.next()).done);s=!0)!function(n){var e=document.createElement("li"),t=document.createElement("span");t.classList.add("crumb"),t.addEventListener("click",function(e){var t=P.nodes.indexOf(nodeMap[n]);I(t)}),t.innerHTML=""+getNodeLabel(nodeMap[n]);var r=getNodeYear(nodeMap[n]);null!==r&&(t.innerHTML+=""+r+""),e.appendChild(t),i.appendChild(e),a.push(getNodeLabel(nodeMap[n]))}(l.value)}catch(e){d=!0,c=e}finally{try{!s&&u.return&&u.return()}finally{if(d)throw c}}z.appendChild(i),a.push(getNodeLabel(t)),o=getLabelAttribute(t),(d=document.createElement("h2")).innerHTML=getNodeLabel(t),(c=document.createElement("span")).classList.add("nodeType"),c.innerHTML=getDisplayAttr(t["@type"]),c.title=t["@type"],c.addEventListener("click",function(e){X(t["@type"])}),d.appendChild(c),z.appendChild(d);var h,m=document.createElement("dl"),p=["@id","x","y","index","@type","vy","vx","fx","fy","leftX","rightX"];for(h in"https://schema.org/contentUrl"!==o&&(p[p.length]=o),t)if(-1==p.indexOf(h)){var g,f,v,y=Array.isArray(t[h])?t[h]:[t[h]];for(g in y)"string"==typeof y[g]&&nodeMap[y[g]]||void 0===y[g]["@id"]&&("https://schema.org/url"==h||"http://www.w3.org/2000/01/rdf-schema#seeAlso"==h?m.innerHTML+="
"+getDisplayAttr(h)+"
"+y[g]+"
":"https://schema.org/embedUrl"==h?(m.innerHTML+="
"+getDisplayAttr(h)+"
"+y[g]+"
",m.innerHTML+="
"):"https://schema.org/contentUrl"==h?(m.innerHTML+="
"+getDisplayAttr(h)+"
"+y[g]+"
","https://schema.org/VideoObject"==t["@type"]?(v=y["https://schema.org/encodingFormat"]?"type='"+y["https://schema.org/encodingFormat"]+"'":"",f=y["https://schema.org/thumbnailUrl"]?"poster='"+y["https://schema.org/thumbnailUrl"]+"'":"",m.innerHTML+="
"):m.innerHTML+="
"):(v=y[g].replace(/\n/g,"
"),m.innerHTML+="
"+getDisplayAttr(h)+"
"+v+"
"))}z.appendChild(m);for(var b,L,x=document.createElement("dl"),M=0;M"):T.innerHTML="",x.appendChild(T))}}for(L in e){var C,D=document.createElement("dt");for(C in D.innerHTML=getDisplayAttr(L),x.appendChild(D),e[L].sort(function(e,t){return weights[t["@id"]]-weights[e["@id"]]}),e[L]){var O,j=e[L][C];x.appendChild(F(j,C)),void 0!==j["https://schema.org/contentUrl"]&&((O=document.createElement("dd")).classList.add("dd-contentobject"),O.innerHTML="",x.appendChild(O))}}z.appendChild(x),H.each(function(e,t,n){t==r?n[t].classList.add("selectedNode"):n[t].classList.remove("selectedNode")}),document.title=a.join(" :: ")}var m,p,g=d3.select("svg"),f=(g.attr("width"),g.attr("height"),g.append("g").attr("id","container")),v=d3.forceSimulation().force("link",d3.forceLink().id(function(e){return e["@id"]}).strength(.005)).force("charge",d3.forceManyBody()).force("collision",d3.forceCollide(function(e){return 1.1*getSizeForNode(e)})),y=f.append("g").attr("class","links").selectAll(".relationship").data(P.links).enter().append("g").attr("class",function(e){return"relationship "+e.name}),b=y.append("line").attr("marker-end","url(#arrowHead)"),L=y.append("text").text(function(e){return getDisplayAttr(e.name)}),H=f.append("g").attr("class","nodes").selectAll(".node").data(P.nodes).enter().append("g").attr("class",function(e){var t,n="node "+e["@type"];return!e["@type"]||-1<(t=e["@type"].lastIndexOf("/"))&&(n+=" "+e["@type"].substr(t+1)),n}),x=function(e,t){var n=l(),r=k();w(),void 0===t&&(t=1==e.length?n[2]/6:n[2]/(4+Math.max(0,2.5-e.length))),d=t;for(var a=n[0]+n[2]/2-r.dx,o=n[1]+n[3]/2-r.dy,i=2*Math.PI/e.length,s=0;s2*getSizeForNode(e)&&a.attr("transform","scale("+2*getSizeForNode(e)/r/1.05+")")}),H.each(function(e){e["https://schema.org/thumbnailUrl"]&&d3.select(this).append("svg:image").attr("xlink:href",e["https://schema.org/thumbnailUrl"]).attr("width",function(e){return 2*getSizeForNode(e)}).attr("height",function(e){return 2*getSizeForNode(e)}).attr("transform",function(e){return"translate(-"+getSizeForNode(e)+" -"+getSizeForNode(e)+")"}).attr("clip-path","url(#clipNodeImage)").attr("preserveAspectRatio","xMidYMid slice")}),v.nodes(P.nodes).on("tick",function(){P.nodes.forEach(function(e,t){e.leftX=e.rightX=e.x}),b.each(function(e){var t,n;e.source.rightXe.target.rightX?o=e.target.rightX:o>e.source.rightX?o=e.source.rightX:o"+getNodeYear(n)+""),r.classList.add("nodeTitle"),r.classList.add("nodeTitleNr"+e),r.addEventListener("click",function(e){var t=P.nodes.indexOf(n);U(t)}),(e=document.createElement("a")).classList.add("nodeType"),e.innerHTML=getDisplayAttr(n["@type"]),e.title=n["@type"],e.addEventListener("click",function(e){I(n["@type"])}),t.appendChild(r),t.appendChild(e),t}function h(t,r){for(document.body.classList.add("detailsOpen"),scrollToY(0,4e3);B.hasChildNodes();)B.removeChild(B.lastChild);var e=[],n=[],a=[],o=document.createElement("div");o.id="nodeDetailsScaler",o.addEventListener("mousedown",function(e){function t(e){B.style.width=window.innerWidth-e.clientX+5+"px"}document.body.addEventListener("mousemove",t),document.body.addEventListener("mouseup",function(){document.body.removeEventListener("mousemove",t)})}),nodeDetails.appendChild(o);var i=document.createElement("ul");i.classList.add("breadcrumbs");var s=!0,d=!1,c=void 0;try{for(var l,u=breadcrumbs[t["@id"]][Symbol.iterator]();!(s=(l=u.next()).done);s=!0)!function(n){var e=document.createElement("li"),t=document.createElement("span");t.classList.add("crumb"),t.addEventListener("click",function(e){var t=P.nodes.indexOf(nodeMap[n]);U(t)}),t.innerHTML=""+getNodeLabel(nodeMap[n]);var r=getNodeYear(nodeMap[n]);null!==r&&(t.innerHTML+=""+r+""),e.appendChild(t),i.appendChild(e),a.push(getNodeLabel(nodeMap[n]))}(l.value)}catch(e){d=!0,c=e}finally{try{!s&&u.return&&u.return()}finally{if(d)throw c}}B.appendChild(i),a.push(getNodeLabel(t)),o=getLabelAttribute(t),(d=document.createElement("h2")).innerHTML=getNodeLabel(t),(c=document.createElement("span")).classList.add("nodeType"),c.innerHTML=getDisplayAttr(t["@type"]),c.title=t["@type"],c.addEventListener("click",function(e){I(t["@type"])}),d.appendChild(c),B.appendChild(d);var h,m=document.createElement("dl"),p=["@id","x","y","index","@type","vy","vx","fx","fy","leftX","rightX"];for(h in"https://schema.org/contentUrl"!==o&&(p[p.length]=o),t)if(-1==p.indexOf(h)){var g,f,v,y=Array.isArray(t[h])?t[h]:[t[h]];for(g in y)"string"==typeof y[g]&&nodeMap[y[g]]||void 0===y[g]["@id"]&&("https://schema.org/url"==h||"http://www.w3.org/2000/01/rdf-schema#seeAlso"==h?m.innerHTML+="
"+getDisplayAttr(h)+"
"+y[g]+"
":"https://schema.org/embedUrl"==h?(m.innerHTML+="
"+getDisplayAttr(h)+"
"+y[g]+"
",m.innerHTML+="
"):"https://schema.org/contentUrl"==h?(m.innerHTML+="
"+getDisplayAttr(h)+"
"+y[g]+"
","https://schema.org/VideoObject"==t["@type"]?(v=t["https://schema.org/encodingFormat"]?"type='"+t["https://schema.org/encodingFormat"]+"'":"",f=t["https://schema.org/thumbnailUrl"]?"poster='"+t["https://schema.org/thumbnailUrl"]+"'":"",m.innerHTML+="
"):m.innerHTML+="
"):(v=y[g].replace(/\n/g,"
"),m.innerHTML+="
"+getDisplayAttr(h)+"
"+v+"
"))}B.appendChild(m);for(var b,L,x=document.createElement("dl"),M=0;M"):T.innerHTML="",x.appendChild(T))}}for(L in e){var C,O=document.createElement("dt");for(C in O.innerHTML=getDisplayAttr(L),x.appendChild(O),e[L].sort(function(e,t){return weights[t["@id"]]-weights[e["@id"]]}),e[L]){var D,j,F,H=e[L][C];x.appendChild(z(H,C)),void 0!==H["https://schema.org/contentUrl"]&&((D=document.createElement("dd")).classList.add("dd-contentobject"),"https://schema.org/VideoObject"==H["@type"]?(j=H["https://schema.org/encodingFormat"]?"type='"+H["https://schema.org/encodingFormat"]+"'":"",F=H["https://schema.org/thumbnailUrl"]?"poster='"+H["https://schema.org/thumbnailUrl"]+"'":"",D.innerHTML+='"):D.innerHTML="",x.appendChild(D))}}B.appendChild(x),X.each(function(e,t,n){t==r?n[t].classList.add("selectedNode"):n[t].classList.remove("selectedNode")}),document.title=a.join(" :: ")}var m,p,g=d3.select("svg"),f=(g.attr("width"),g.attr("height"),g.append("g").attr("id","container")),v=d3.forceSimulation().force("link",d3.forceLink().id(function(e){return e["@id"]}).strength(.005)).force("charge",d3.forceManyBody()).force("collision",d3.forceCollide(function(e){return 1.1*getSizeForNode(e)})),y=f.append("g").attr("class","links").selectAll(".relationship").data(P.links).enter().append("g").attr("class",function(e){return"relationship "+e.name}),b=y.append("line").attr("marker-end","url(#arrowHead)"),L=y.append("text").text(function(e){return getDisplayAttr(e.name)}),X=f.append("g").attr("class","nodes").selectAll(".node").data(P.nodes).enter().append("g").attr("class",function(e){var t,n="node "+e["@type"];return!e["@type"]||-1<(t=e["@type"].lastIndexOf("/"))&&(n+=" "+e["@type"].substr(t+1)),n}),x=function(e,t){var n=l(),r=N();w(),void 0===t&&(t=1==e.length?n[2]/6:n[2]/(4+Math.max(0,2.5-e.length))),d=t;for(var a=n[0]+n[2]/2-r.dx,o=n[1]+n[3]/2-r.dy,i=2*Math.PI/e.length,s=0;s2*getSizeForNode(e)&&a.attr("transform","scale("+2*getSizeForNode(e)/r/1.05+")")}),X.each(function(e){e["https://schema.org/thumbnailUrl"]&&d3.select(this).append("svg:image").attr("xlink:href",e["https://schema.org/thumbnailUrl"]).attr("width",function(e){return 2*getSizeForNode(e)}).attr("height",function(e){return 2*getSizeForNode(e)}).attr("transform",function(e){return"translate(-"+getSizeForNode(e)+" -"+getSizeForNode(e)+")"}).attr("clip-path","url(#clipNodeImage)").attr("preserveAspectRatio","xMidYMid slice")}),X.each(function(e){"https://schema.org/VideoObject"===e["@type"]&&(getSizeForNode(e),d3.select(this).append("svg:polygon").attr("points","-10,-10, -10,10, 10,0").attr("class","play"))}),v.nodes(P.nodes).on("tick",function(){P.nodes.forEach(function(e,t){e.leftX=e.rightX=e.x}),b.each(function(e){var t,n;e.source.rightXe.target.rightX?o=e.target.rightX:o>e.source.rightX?o=e.source.rightX:o