Update before putting live

New font
Content updates
Show connections on hover
See also now links
fix links of 'url' to self
This commit is contained in:
Ruben van de Ven 2018-10-25 23:08:53 +02:00
parent 2f1ff8f55d
commit d07f0191af
5 changed files with 225 additions and 93 deletions

View file

@ -81,7 +81,7 @@ gulp.task('serve', function() {
} }
}); });
gulp.watch(['index.html','rubenvandeven.jsonld'], browserSync.reload); gulp.watch(['index.html','rubenvandeven.jsonld'], browserSync.reload({stream: true}));
watchStylesAndScripts(); watchStylesAndScripts();
}); });

View file

@ -39,9 +39,9 @@
<stop offset=".51" stop-color="hsl(206, 0%, 48%)" /> <stop offset=".51" stop-color="hsl(206, 0%, 48%)" />
<stop offset=".99" stop-color="hsl(212, 0%, 78%)" /> <stop offset=".99" stop-color="hsl(212, 0%, 78%)" />
</linearGradient> </linearGradient>
<marker markerHeight="4" markerWidth="4" refY="0" refX="6" viewBox="0 -3 6 6" preserveAspectRatio="none" orient="auto" id="arrowHead" fill="#999"><path d="M0,-3L8,0L0,3"></path></marker> <marker markerHeight="4" markerWidth="4" refY="0" refX="6" viewBox="0 -3 8 6" preserveAspectRatio="none" orient="auto" id="arrowHead" fill="#999"><path d="M0,-3L8,0L0,3"></path></marker>
<marker markerHeight="4" markerWidth="4" refY="0" refX="6" viewBox="0 -3 6 6" preserveAspectRatio="none" orient="auto" id="arrowHeadSelected"><path d="M0,-3L8,0L0,3" fill="white"></path></marker> <marker markerHeight="4" markerWidth="4" refY="0" refX="6" viewBox="0 -3 8 6" preserveAspectRatio="none" orient="auto" id="arrowHeadSelected"><path d="M0,-3L8,0L0,3" fill="white"></path></marker>
<marker markerHeight="4" markerWidth="4" refY="0" refX="6" viewBox="0 -3 6 6" preserveAspectRatio="none" orient="auto" id="arrowHeadCrumbTrail"><path d="M0,-3L8,0L0,3" fill="yellow"></path></marker> <marker markerHeight="4" markerWidth="4" refY="0" refX="6" viewBox="0 -3 8 6" preserveAspectRatio="none" orient="auto" id="arrowHeadCrumbTrail"><path d="M0,-3L8,0L0,3" fill="yellow"></path></marker>
<clipPath id="clipNodeImage"> <clipPath id="clipNodeImage">
<circle cx="40" cy="40" r="40" /> <circle cx="40" cy="40" r="40" />
</clipPath> </clipPath>

View file

@ -5,6 +5,7 @@
}, },
"@type": "WebSite", "@type": "WebSite",
"url": "https://rubenvandeven.com", "url": "https://rubenvandeven.com",
"s:seeAlso": [ "https://rubenvandeven.com/rubenvandeven.jsonld", "https://rubenvandeven.com/foaf.rdf#me"],
"author": "author":
{ {
"@id": "https://rubenvandeven.com/ruben", "@id": "https://rubenvandeven.com/ruben",
@ -13,11 +14,10 @@
"jobTitle": "digital artist / researcher of software culture", "jobTitle": "digital artist / researcher of software culture",
"email": "info@rubenvandeven.com", "email": "info@rubenvandeven.com",
"nationality": "The Netherlands", "nationality": "The Netherlands",
"s:seeAlso": "https://rubenvandeven.com/foaf.rdf#me",
"@reverse": { "@reverse": {
"member": [ "member": [
{ {
"@id": "http://plottingd.at/a", "@id": "http://plottingd.at/a#id",
"@type": "PerformingGroup", "@type": "PerformingGroup",
"name": "Plotting Data: dramatisation as tactic", "name": "Plotting Data: dramatisation as tactic",
"url": "http://plottingd.at/a", "url": "http://plottingd.at/a",
@ -43,7 +43,7 @@
], ],
"attendee": [ "attendee": [
{ {
"@id": "http://summersessions.net/17-projects/projects-2016/55-emotion-hero", "@id": "http://summersessions.net/17-projects/projects-2016/55-emotion-hero#id",
"@type": "VisualArtsEvent", "@type": "VisualArtsEvent",
"name": "Residency: Summer Sessions 2016", "name": "Residency: Summer Sessions 2016",
"url": "http://summersessions.net/17-projects/projects-2016/55-emotion-hero", "url": "http://summersessions.net/17-projects/projects-2016/55-emotion-hero",
@ -59,8 +59,10 @@
"name": "Residency: Q21", "name": "Residency: Q21",
"startDate": "2017-01", "startDate": "2017-01",
"endDate": "2017-02", "endDate": "2017-02",
"isPartOf": { "@reverse": {
"subEvent": {
"@id": "https://rubenvandeven.com/exhibition/mood_swings" "@id": "https://rubenvandeven.com/exhibition/mood_swings"
}
}, },
"location": { "location": {
"@id": "https://rubenvandeven.com/place/q21" "@id": "https://rubenvandeven.com/place/q21"
@ -93,11 +95,13 @@
"image": [ "image": [
{ {
"@type": "ImageObject", "@type": "ImageObject",
"contentUrl": "assets\/image\/sustaining-gazes-2.jpg" "contentUrl": "assets\/image\/sustaining-gazes-2.jpg",
"thumbnailUrl": "assets\/thumb\/sustaining-gazes-2.jpg"
}, },
{ {
"@type": "ImageObject", "@type": "ImageObject",
"contentUrl": "assets\/image\/sustaining-gazes-1.jpg" "contentUrl": "assets\/image\/sustaining-gazes-1.jpg",
"thumbnailUrl": "assets\/thumb\/sustaining-gazes-1.jpg"
} }
] ]
}, },
@ -116,7 +120,7 @@
"height": "55cm + 8cm", "height": "55cm + 8cm",
"artworkSurface": "Oilpaint on wood + WiFi-connected RaspberryPi in ABS enclosure", "artworkSurface": "Oilpaint on wood + WiFi-connected RaspberryPi in ABS enclosure",
"contributor": { "contributor": {
"@id": "http://www.donaldschenkel.nl/", "@id": "http://www.donaldschenkel.nl/#person",
"@type": "Person", "@type": "Person",
"name": "Donald Schenkel", "name": "Donald Schenkel",
"url": "http://www.donaldschenkel.nl/" "url": "http://www.donaldschenkel.nl/"
@ -151,15 +155,18 @@
"image": [ "image": [
{ {
"@type": "ImageObject", "@type": "ImageObject",
"contentUrl": "assets\/image\/mvp1-1.jpg" "contentUrl": "assets\/image\/mvp1-1.jpg",
"thumbnailUrl": "assets\/thumb\/mvp1-1.jpg"
}, },
{ {
"@type": "ImageObject", "@type": "ImageObject",
"contentUrl": "assets\/image\/mvp1-2.jpg" "contentUrl": "assets\/image\/mvp1-2.jpg",
"thumbnailUrl": "assets\/thumb\/mvp1-2.jpg"
}, },
{ {
"@type": "ImageObject", "@type": "ImageObject",
"contentUrl": "assets\/image\/mvp1-4.jpg" "contentUrl": "assets\/image\/mvp1-4.jpg",
"thumbnailUrl": "assets\/thumb\/mvp1-4.jpg"
} }
] ]
}, },
@ -172,7 +179,7 @@
"height":"50cm", "height":"50cm",
"artworkSurface": "Pencil drawing in metal LCD enclosure", "artworkSurface": "Pencil drawing in metal LCD enclosure",
"contributor": { "contributor": {
"@id": "http://www.joseph-huot.com/", "@id": "http://www.joseph-huot.com/#person",
"@type": "Person", "@type": "Person",
"name": "Joseph Huot", "name": "Joseph Huot",
"url": "http://www.joseph-huot.com/" "url": "http://www.joseph-huot.com/"
@ -186,15 +193,18 @@
"image": [ "image": [
{ {
"@type": "ImageObject", "@type": "ImageObject",
"contentUrl": "assets\/image\/mvp2-01.jpg" "contentUrl": "assets\/image\/mvp2-01.jpg",
"thumbnailUrl": "assets\/thumb\/mvp2-01.jpg"
}, },
{ {
"@type": "ImageObject", "@type": "ImageObject",
"contentUrl": "assets\/image\/mvp2-02.jpg" "contentUrl": "assets\/image\/mvp2-02.jpg",
"thumbnailUrl": "assets\/thumb\/mvp2-02.jpg"
}, },
{ {
"@type": "ImageObject", "@type": "ImageObject",
"contentUrl": "assets\/image\/mvp2-5.jpg" "contentUrl": "assets\/image\/mvp2-5.jpg",
"thumbnailUrl": "assets\/thumb\/mvp2-5.jpg"
} }
] ]
}, },
@ -220,7 +230,8 @@
"image": [ "image": [
{ {
"@type": "ImageObject", "@type": "ImageObject",
"contentUrl": "assets\/image\/mvp3-1.jpg" "contentUrl": "assets\/image\/mvp3-1.jpg",
"thumbnailUrl": "assets\/thumb\/mvp3-1.jpg"
} }
] ]
} }
@ -251,19 +262,23 @@
"image": [ "image": [
{ {
"@type": "ImageObject", "@type": "ImageObject",
"contentUrl": "assets\/image\/moodmeter1-1.jpg" "contentUrl": "assets\/image\/moodmeter1-1.jpg",
"thumbnailUrl": "assets\/thumb\/moodmeter1-1.jpg"
}, },
{ {
"@type": "ImageObject", "@type": "ImageObject",
"contentUrl": "assets\/image\/moodmeter2.jpg" "contentUrl": "assets\/image\/moodmeter2.jpg",
"thumbnailUrl": "assets\/thumb\/moodmeter2.jpg"
}, },
{ {
"@type": "ImageObject", "@type": "ImageObject",
"contentUrl": "assets\/image\/moodmeter3.jpg" "contentUrl": "assets\/image\/moodmeter3.jpg",
"thumbnailUrl": "assets\/thumb\/moodmeter3.jpg"
}, },
{ {
"@type": "ImageObject", "@type": "ImageObject",
"contentUrl": "assets\/image\/moodmeter4.jpg" "contentUrl": "assets\/image\/moodmeter4.jpg",
"thumbnailUrl": "assets\/thumb\/moodmeter4.jpg"
} }
] ]
}, },
@ -375,11 +390,13 @@
"@id": "https://rubenvandeven.com/#stateofemotion", "@id": "https://rubenvandeven.com/#stateofemotion",
"@type": "ExhibitionEvent", "@type": "ExhibitionEvent",
"name": "STATE of Emotion", "name": "STATE of Emotion",
"isPartOf": { "@reverse": {
"subEvent": {
"@id": "https://www.statefestival.org/", "@id": "https://www.statefestival.org/",
"@type": "Event", "@type": "Festival",
"name": "STATE Festival", "name": "STATE Festival",
"address": "Berlin" "address": "Berlin"
}
}, },
"startDate": "2016-11-04", "startDate": "2016-11-04",
"endDate": "2016-11-05", "endDate": "2016-11-05",
@ -397,20 +414,24 @@
"startDate": "2016-09", "startDate": "2016-09",
"endDate": "2016-09", "endDate": "2016-09",
"workFeatured": [], "workFeatured": [],
"isPartOf": { "@reverse": {
"subEvent": {
"@id": "http://summersessions.net/17-projects/projects-2016/55-emotion-hero" "@id": "http://summersessions.net/17-projects/projects-2016/55-emotion-hero"
} }
} }
}
] ]
}, },
"image": [ "image": [
{ {
"@type": "ImageObject", "@type": "ImageObject",
"contentUrl": "assets\/image\/emotionhero1-2.jpg" "contentUrl": "assets\/image\/emotionhero1-2.jpg",
"thumbnailUrl": "assets\/thumb\/emotionhero1-2.jpg"
}, },
{ {
"@type": "ImageObject", "@type": "ImageObject",
"contentUrl": "assets\/image\/emotionhero2.jpg" "contentUrl": "assets\/image\/emotionhero2.jpg",
"thumbnailUrl": "assets\/thumb\/emotionhero2.jpg"
} }
] ]
}, },
@ -467,11 +488,13 @@
"image": [ "image": [
{ {
"@type": "ImageObject", "@type": "ImageObject",
"contentUrl": "assets\/image\/choosehowyoufeel2-2.jpg" "contentUrl": "assets\/image\/choosehowyoufeel2-2.jpg",
"thumbnailUrl": "assets\/thumb\/choosehowyoufeel2-2.jpg"
}, },
{ {
"@type": "ImageObject", "@type": "ImageObject",
"contentUrl": "assets\/image\/choosehowyoufeel.jpg" "contentUrl": "assets\/image\/choosehowyoufeel.jpg",
"thumbnailUrl": "assets\/thumb\/choosehowyoufeel.jpg"
} }
] ]
}, },
@ -482,7 +505,7 @@
"duration": "11:32 (∞ loop)", "duration": "11:32 (∞ loop)",
"description": "Whether the video frames are ordered by time or by emotion will not make a difference to a computer. For it, both orderings are just as logical. However, for the human spectator the reordered display of frames becomes a disruptive process. The human is positioned as a required agent for meaning making in an algorithmic procedure.\n\nIn collaboration with Cristina Cochior I went manually through the Eye's public collection, and catalogued faces by surrendering them to an emotion detection algorithm. Cutting from one face to another,its uncritical selection produced a new portrait of emotional gradients moving in-between anger and happiness.", "description": "Whether the video frames are ordered by time or by emotion will not make a difference to a computer. For it, both orderings are just as logical. However, for the human spectator the reordered display of frames becomes a disruptive process. The human is positioned as a required agent for meaning making in an algorithmic procedure.\n\nIn collaboration with Cristina Cochior I went manually through the Eye's public collection, and catalogued faces by surrendering them to an emotion detection algorithm. Cutting from one face to another,its uncritical selection produced a new portrait of emotional gradients moving in-between anger and happiness.",
"author": { "author": {
"@id": "http://randomizer.info", "@id": "http://randomizer.info#person",
"@type": "Person", "@type": "Person",
"name": "Cristina Cochior", "name": "Cristina Cochior",
"url": "http://randomizer.info" "url": "http://randomizer.info"
@ -490,15 +513,18 @@
"image": [ "image": [
{ {
"@type": "ImageObject", "@type": "ImageObject",
"contentUrl": "assets\/image\/eye_0-2.jpg" "contentUrl": "assets\/image\/eye_0-2.jpg",
"thumbnailUrl": "assets\/thumb\/eye_0-2.jpg"
}, },
{ {
"@type": "ImageObject", "@type": "ImageObject",
"contentUrl": "assets\/image\/eye_3-2.jpg" "contentUrl": "assets\/image\/eye_3-2.jpg",
"thumbnailUrl": "assets\/thumb\/eye_3-2.jpg"
}, },
{ {
"@type": "ImageObject", "@type": "ImageObject",
"contentUrl": "assets\/image\/eye_6-2.jpg" "contentUrl": "assets\/image\/eye_6-2.jpg",
"thumbnailUrl": "assets\/thumb\/eye_6-2.jpg"
} }
], ],
"@reverse": { "@reverse": {
@ -552,7 +578,7 @@
"datePublished": "2017-01-27" "datePublished": "2017-01-27"
}, },
{ {
"@id": "http://networkcultures.org/longform/2017/01/25/choose-how-you-feel-you-have-seven-options/", "@id": "http://networkcultures.org/longform/2017/01/25/choose-how-you-feel-you-have-seven-options/#article",
"@type": "Report", "@type": "Report",
"name": "Longform - Choose How You Feel; You Have Seven Options", "name": "Longform - Choose How You Feel; You Have Seven Options",
"description": "What does it mean to feel 82% surprised or 93% joy? As part of their Longform series, the Institute of Network Cultures published my research into software that derives emotional scores from facial expressions.", "description": "What does it mean to feel 82% surprised or 93% joy? As part of their Longform series, the Institute of Network Cultures published my research into software that derives emotional scores from facial expressions.",
@ -568,7 +594,6 @@
{ {
"@type": "Event", "@type": "Event",
"name": "Presentation @ Media Lab UFRJ", "name": "Presentation @ Media Lab UFRJ",
"url": "https://www.ied.edu/ied-locations/sao-paulo",
"startDate": "2018-05-25", "startDate": "2018-05-25",
"endDate": "2018-05-25", "endDate": "2018-05-25",
"organizer": "Media Lab UFRJ & Dutch Consulate", "organizer": "Media Lab UFRJ & Dutch Consulate",
@ -663,12 +688,16 @@
"url": "https://state-studio.com/participant/2016/ruben-van-de-ven", "url": "https://state-studio.com/participant/2016/ruben-van-de-ven",
"startDate": "2018-11-04", "startDate": "2018-11-04",
"endDate": "2018-11-04", "endDate": "2018-11-04",
"isPartOf": { "@reverse": {
"subEvent": {
"@id": "https://www.statefestival.org/" "@id": "https://www.statefestival.org/"
}
}, },
"recordedIn": { "recordedIn": {
"@id": "https://www.youtube.com/watch?v=L2O6ecO-8PM&t=2042s", "@id": "https://www.youtube.com/watch?v=L2O6ecO-8PM&feature=youtu.be&t=2062",
"@type": "VideoObject" "@type": "VideoObject",
"embedUrl": "https://www.youtube.com/embed/L2O6ecO-8PM?start=2062",
"thumbnailUrl": "https://i.ytimg.com/vi/L2O6ecO-8PM/maxresdefault.jpg"
} }
}, },
{ {
@ -718,11 +747,13 @@
{ {
"@type": "ImageObject", "@type": "ImageObject",
"contentUrl": "assets\/image\/we_know_how_you_feel.jpg", "contentUrl": "assets\/image\/we_know_how_you_feel.jpg",
"thumbnailUrl": "assets\/thumb\/we_know_how_you_feel.jpg",
"caption": "We know how you feel" "caption": "We know how you feel"
}, },
{ {
"@type": "ImageObject", "@type": "ImageObject",
"contentUrl": "assets\/image\/we_know_how_you_feel-3.jpg", "contentUrl": "assets\/image\/we_know_how_you_feel-3.jpg",
"thumbnailUrl": "assets\/thumb\/we_know_how_you_feel-3.jpg",
"caption": "Mind Reading Emotions Library" "caption": "Mind Reading Emotions Library"
} }
], ],
@ -758,16 +789,19 @@
{ {
"@type": "ImageObject", "@type": "ImageObject",
"contentUrl": "assets\/image\/fragments-6-2.jpg", "contentUrl": "assets\/image\/fragments-6-2.jpg",
"thumbnailUrl": "assets\/thumb\/fragments-6-2.jpg",
"caption": "Fragments of reality" "caption": "Fragments of reality"
}, },
{ {
"@type": "ImageObject", "@type": "ImageObject",
"contentUrl": "assets\/image\/fragments-9-2.jpg", "contentUrl": "assets\/image\/fragments-9-2.jpg",
"thumbnailUrl": "assets\/thumb\/fragments-9-2.jpg",
"caption": "Fragments of reality" "caption": "Fragments of reality"
}, },
{ {
"@type": "ImageObject", "@type": "ImageObject",
"contentUrl": "assets\/image\/fragments-7-2.jpg", "contentUrl": "assets\/image\/fragments-7-2.jpg",
"thumbnailUrl": "assets\/thumb\/fragments-7-2.jpg",
"caption": "Fragments of reality" "caption": "Fragments of reality"
} }
] ]
@ -780,11 +814,13 @@
"image": [ "image": [
{ {
"@type": "ImageObject", "@type": "ImageObject",
"contentUrl": "assets\/image\/waterdagen-teaser.jpg" "contentUrl": "assets\/image\/waterdagen-teaser.jpg",
"thumbnailUrl": "assets\/thumb\/waterdagen-teaser.jpg"
}, },
{ {
"@type": "ImageObject", "@type": "ImageObject",
"contentUrl": "assets\/image\/waterdagen1.jpg" "contentUrl": "assets\/image\/waterdagen1.jpg",
"thumbnailUrl": "assets\/thumb\/waterdagen1.jpg"
} }
], ],
"@reverse": { "@reverse": {
@ -814,7 +850,8 @@
"image": [ "image": [
{ {
"@type": "ImageObject", "@type": "ImageObject",
"contentUrl": "assets\/image\/copoet1.jpg" "contentUrl": "assets\/image\/copoet1.jpg",
"thumbnailUrl": "assets\/thumb\/copoet1.jpg"
} }
], ],
"@reverse": { "@reverse": {
@ -842,16 +879,22 @@
"image": [ "image": [
{ {
"@type": "ImageObject", "@type": "ImageObject",
"contentUrl": "assets\/image\/samawati-prev2.jpg" "contentUrl": "assets\/image\/samawati-prev2.jpg",
"thumbnailUrl": "assets\/thumb\/samawati-prev2.jpg"
}, },
{ {
"@type": "ImageObject", "@type": "ImageObject",
"contentUrl": "assets\/image\/samawati-prev1.jpg" "contentUrl": "assets\/image\/samawati-prev1.jpg",
"thumbnailUrl": "assets\/thumb\/samawati-prev1.jpg"
} }
], ],
"video": { "video": {
"@id": "http://www.youtube.com/watch?v=D8pMy7xOZnI", "@id": "https://rubenvandeven.com/assets/video/samawati.mp4#videoobject",
"@type": "VideoObject" "@type": "VideoObject",
"thumbnailUrl": "assets/thumb/samawati.mp4.jpg",
"contentUrl": "assets/video/samawati.mp4" ,
"encodingFormat": "video/mp4",
"videoFrameSize": "1280x1024"
} }
}, },
{ {
@ -862,22 +905,27 @@
"image": [ "image": [
{ {
"@type": "ImageObject", "@type": "ImageObject",
"contentUrl": "assets\/image\/guerilla2.jpg" "contentUrl": "assets/image/guerilla2.jpg",
"thumbnailUrl": "assets/thumb/guerilla2.jpg"
} }
], ],
"video": { "video": {
"@id": "http://www.youtube.com/watch?v=7Nk24Mh6uMc", "@id": "https://rubenvandeven.com/assets/video/guerilla_project.mp4#videoobject",
"@type": "VideoObject" "@type": "VideoObject",
"contentUrl": "assets/video/guerilla_project.mp4",
"thumbnailUrl": "assets/thumb/guerilla_project.mp4.jpg",
"encodingFormat": "video/mp4",
"videoFrameSize": "1280x1024"
} }
} }
], ],
"contributor": [ "contributor": [
{ {
"@type": "MediaObject", "@type": "MediaObject",
"name": "The Spectacular Times", "name": "The Specta­cular Times",
"dateCreated": "2013-12-04", "dateCreated": "2013-12-04",
"author": { "author": {
"@id": "http://www.wardgoes.nl", "@id": "http://www.wardgoes.nl/#person",
"@type": "Person", "@type": "Person",
"name": "Ward Goes", "name": "Ward Goes",
"url": "http://www.wardgoes.nl" "url": "http://www.wardgoes.nl"
@ -888,11 +936,13 @@
{ {
"@type": "ImageObject", "@type": "ImageObject",
"contentUrl": "assets\/image\/times1.jpg", "contentUrl": "assets\/image\/times1.jpg",
"thumbnailUrl": "assets\/thumb\/times1.jpg",
"caption": "The Spectacular Times" "caption": "The Spectacular Times"
}, },
{ {
"@type": "ImageObject", "@type": "ImageObject",
"contentUrl": "assets\/image\/times2.jpg", "contentUrl": "assets\/image\/times2.jpg",
"thumbnailUrl": "assets\/thumb\/times2.jpg",
"caption": "The Spectacular Times" "caption": "The Spectacular Times"
} }
] ]

View file

@ -528,12 +528,20 @@ var setDetails = function(nodeDatum, nodeIdx) {
} else if(typeof nodeAttr[i]['@id'] !== 'undefined') { } else if(typeof nodeAttr[i]['@id'] !== 'undefined') {
continue; continue;
} }
if(attr == 'https://schema.org/url') { if(attr == 'https://schema.org/url' || attr == 'http://www.w3.org/2000/01/rdf-schema#seeAlso') {
listEl.innerHTML += `<dt class='dt-${getDisplayAttr(attr)}' title='${attr}'>${getDisplayAttr(attr)}</dt><dd class='dd-${getDisplayAttr(attr)}'><a href='${nodeAttr[i]}'>${nodeAttr[i]}</a></dd>`; listEl.innerHTML += `<dt class='dt-${getDisplayAttr(attr)}' title='${attr}'>${getDisplayAttr(attr)}</dt><dd class='dd-${getDisplayAttr(attr)}'><a href='${nodeAttr[i]}'>${nodeAttr[i]}</a></dd>`;
} else if(attr == 'https://schema.org/embedUrl') {
listEl.innerHTML += `<dt class='dt-${getDisplayAttr(attr)}' title='${attr}'>${getDisplayAttr(attr)}</dt><dd class='dd-${getDisplayAttr(attr)}'><a href='${nodeAttr[i]}'>${nodeAttr[i]}</a></dd>`;
listEl.innerHTML += `<dd class='dd-embed'><embed src='${nodeAttr[i]}'></embed></dd>`;
} else if(attr == 'https://schema.org/contentUrl') { } else if(attr == 'https://schema.org/contentUrl') {
// console.log('test', attr);
listEl.innerHTML += `<dt class='dt-${getDisplayAttr(attr)}' title='${attr}'>${getDisplayAttr(attr)}</dt><dd class='dd-${getDisplayAttr(attr)}'><a href='${nodeAttr[i]}'>${nodeAttr[i]}</a></dd>`; listEl.innerHTML += `<dt class='dt-${getDisplayAttr(attr)}' title='${attr}'>${getDisplayAttr(attr)}</dt><dd class='dd-${getDisplayAttr(attr)}'><a href='${nodeAttr[i]}'>${nodeAttr[i]}</a></dd>`;
if(nodeDatum['@type'] == 'https://schema.org/VideoObject') {
let videoType = nodeAttr['https://schema.org/encodingFormat'] ? `type='${nodeAttr['https://schema.org/encodingFormat']}'`: "";
let poster = nodeAttr['https://schema.org/thumbnailUrl'] ? `poster='${nodeAttr['https://schema.org/thumbnailUrl']}'`: "";
listEl.innerHTML += `<dd class='dd-contentobject'><video controls ${poster} autoplay><source src='${nodeAttr[i]}' ${videoType}></video></dd>`;
} else{
listEl.innerHTML += `<dd class='dd-contentobject'><object data='${nodeAttr[i]}'></object></dd>`; listEl.innerHTML += `<dd class='dd-contentobject'><object data='${nodeAttr[i]}'></object></dd>`;
}
} else { } else {
let valueHtml = nodeAttr[i].replace(/\n/g,"<br>"); let valueHtml = nodeAttr[i].replace(/\n/g,"<br>");
listEl.innerHTML += `<dt class='dt-${getDisplayAttr(attr)}' title='${attr}'>${getDisplayAttr(attr)}</dt><dd class='dd-${getDisplayAttr(attr)}'>${valueHtml}</dd>`; listEl.innerHTML += `<dt class='dt-${getDisplayAttr(attr)}' title='${attr}'>${getDisplayAttr(attr)}</dt><dd class='dd-${getDisplayAttr(attr)}'>${valueHtml}</dd>`;
@ -576,7 +584,13 @@ var setDetails = function(nodeDatum, nodeIdx) {
if(typeof rel['https://schema.org/contentUrl'] != 'undefined') { if(typeof rel['https://schema.org/contentUrl'] != 'undefined') {
let ddEl = document.createElement('dd') let ddEl = document.createElement('dd')
ddEl.classList.add('dd-contentobject'); ddEl.classList.add('dd-contentobject');
if(rel['@type'] == 'https://schema.org/VideoObject') {
let videoType = rel['https://schema.org/encodingFormat'] ? `type='${rel['https://schema.org/encodingFormat']}'`: "";
let poster = rel['https://schema.org/thumbnailUrl'] ? `poster='${rel['https://schema.org/thumbnailUrl']}'`: "";
ddEl.innerHTML += `<video controls preload="none" ${poster}><source src='${rel['https://schema.org/contentUrl']}' ${videoType}></video>`;
} else{
ddEl.innerHTML = `<object data='${rel['https://schema.org/contentUrl']}'></object>` ddEl.innerHTML = `<object data='${rel['https://schema.org/contentUrl']}'></object>`
}
relsEl.appendChild(ddEl); relsEl.appendChild(ddEl);
} }
} }
@ -790,11 +804,21 @@ node.call(d3.drag()
.on("end", dragended)) .on("end", dragended))
.on("click", function(d, idx, nodes){ .on("click", function(d, idx, nodes){
let node = nodes[idx]; let node = nodes[idx];
// if(typeof nodePositions[idx] == 'undefined') {
selectNode(idx, node, d); selectNode(idx, node, d);
// } else { })
// node.parentNode.classList.toggle('detail'); .on('mouseover', function(n, nIdx){
// } link.each(function(l,idx,linkEls,q){
// set nodes 'visible'/highlighted when linked to active node
if(l.source == n || l.target == n) {
linkEls[idx].classList.add('hoverLink');
}
});
})
.on('mouseout', function(){
let hoverLinkEls = document.getElementsByClassName('hoverLink');
while(hoverLinkEls.length > 0){
hoverLinkEls[0].classList.remove('hoverLink');
}
}); });
// svg.call(d3.drag() // svg.call(d3.drag()
@ -848,6 +872,46 @@ node.append('text')
return getNodeYear(n); return getNodeYear(n);
}) })
; ;
let splitText = function(text){
let characters = [" ","-","\u00AD"];
let charSplitPos = {};
let mid = Math.floor(text.length / 2);
let splitPos = false;
let splitPosChar = false;
// split sentences
for(let char of characters) {
if(text.indexOf(char) < 0) {
continue;
}
let tmid = text.substr(0,mid).lastIndexOf(char);
if(tmid === -1) {
tmid = text.indexOf(char);
}
tmid += 1; // we want to cut _after_ the character
console.log("Char", char, tmid);
if(splitPos === false || Math.abs(tmid-mid) < Math.abs(splitPos - mid)){
console.log("least!");
splitPos = tmid;
splitPosChar = char;
}
}
console.log("pos",splitPos)
if(splitPos === false) {
return false;
}
let text1 = text.substr(0, splitPos).trim();
let text2 = text.substr(splitPos).trim();
if(splitPosChar == "\u00AD") {
text1 += "-";
}
// find most equal split
return [text1, text2];
}
let nodeTitle = node.append('text') let nodeTitle = node.append('text')
.attr("class", "nodeTitle") .attr("class", "nodeTitle")
.attr("y", "5") .attr("y", "5")
@ -860,25 +924,24 @@ nodeTitle
let textLength; let textLength;
let self = d3.select(this); let self = d3.select(this);
let titleText = getNodeLabel(node); let titleText = getNodeLabel(node);
if(titleText.length > 20 && titleText.indexOf(" ") > -1) { let titleTexts = false;
let mid = Math.floor(titleText.length / 2); if(titleText.length > 20) {
mid = titleText.substr(0,mid).lastIndexOf(" "); titleTexts = splitText(titleText);
if(mid === -1) {
mid = titleText.indexOf(" ");
} }
let titleText1 = titleText.substr(0, mid).trim(); if(titleTexts !== false) {
let titleText2 = titleText.substr(mid).trim(); let tspan1 = self.append("tspan")
self.append("tspan") .text(titleTexts[0])
.text(titleText1)
.attr("y", "-10") .attr("y", "-10")
.attr("x", "0") .attr("x", "0")
; ;
let tspan = self.append("tspan") let tspan = self.append("tspan")
.text(titleText2) .text(titleTexts[1])
.attr("y", "10") .attr("y", "10")
.attr("x", "0") .attr("x", "0")
; ;
textLength = tspan.node().getComputedTextLength(); let textLength1 = tspan.node().getComputedTextLength();
let textLength2 = tspan.node().getComputedTextLength();
textLength = Math.max(textLength1, textLength2);
} else { } else {
self.text(titleText); self.text(titleText);
textLength = self.node().getComputedTextLength(); textLength = self.node().getComputedTextLength();
@ -892,11 +955,11 @@ nodeTitle
; ;
node.each(function(d) { node.each(function(d) {
if(!d['https://schema.org/contentUrl']) { if(!d['https://schema.org/thumbnailUrl']) {
return; return;
} }
d3.select(this).append('svg:image') d3.select(this).append('svg:image')
.attr("xlink:href", d['https://schema.org/contentUrl'].replace('image', 'thumb')) .attr("xlink:href", d['https://schema.org/thumbnailUrl'])
.attr("width", nodeSize*2) .attr("width", nodeSize*2)
.attr("height", nodeSize*2) .attr("height", nodeSize*2)
.attr("transform","translate(-"+nodeSize+" -"+nodeSize+")") .attr("transform","translate(-"+nodeSize+" -"+nodeSize+")")
@ -974,8 +1037,8 @@ function ticked() {
srcSize = (typeof nodePositions[d.source.index] != 'undefined') ? selectedNodeSize : nodeSize; srcSize = (typeof nodePositions[d.source.index] != 'undefined') ? selectedNodeSize : nodeSize;
tgtSize = (typeof nodePositions[d.target.index] != 'undefined') ? selectedNodeSize : nodeSize; tgtSize = (typeof nodePositions[d.target.index] != 'undefined') ? selectedNodeSize : nodeSize;
*/ */
let srcSize = nodeSize; let srcSize = nodeSize+3.2;
let tgtSize = nodeSize; let tgtSize = nodeSize+3.2;
// Compute the line endpoint such that the arrow // Compute the line endpoint such that the arrow
// is touching the edge of the node rectangle perfectly. // is touching the edge of the node rectangle perfectly.

View file

@ -3,11 +3,22 @@ $detailsWidth: 740px;
$detailSlide: -1 * ($detailsWidth); $detailSlide: -1 * ($detailsWidth);
$detailSlideMobile: -30vh; $detailSlideMobile: -30vh;
@import url('/assets/fonts/FluxischElse/webfonts/fluxischelse.css'); // @import url('/assets/fonts/FluxischElse/webfonts/fluxischelse.css');
// @import url('https://fontlibrary.org/face/nunito-sans');
// @import url('https://fontlibrary.org/face/hk-grotesk');
@import url('https://fontlibrary.org/face/d-din');
body{ body{
margin:0;overflow: hidden; margin:0;overflow: hidden;
font-family: "Fluxisch Else", helvetica, sans-serif; font-family: "DDINRegular", helvetica, sans-serif;
// order of pref:
// - DDINRegular
// - HankenGroteskRegular
// - Cantarell
// - Noto Sans Light
// - CooperHewittBook
// - NunitoSansRegular
font-weight: light;
height: 100vh; height: 100vh;
background: black; background: black;
font-size: 12pt; font-size: 12pt;
@ -26,11 +37,6 @@ a:active{
} }
/*@-moz-keyframes bgShift{
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}*/
svg{ svg{
width:100%; width:100%;
height: 100%; height: 100%;
@ -132,10 +138,13 @@ g.node{
} }
// &.visibleLink{ // &.visibleLink{
&.activeLink{ &.activeLink, &.hoverLink{
display:block; display:block;
// opacity: 1; // opacity: 1;
text{
display:block;
fill: #999;
}
} }
line{ line{
@ -329,12 +338,22 @@ text{
dd.dd-description{ dd.dd-description{
margin-left:0; margin-left:0;
} }
dd.dd-contentobject{ dd.dd-contentobject, dd.dd-embed{
margin-left:0; margin-left:0;
} }
dd.dd-contentobject object{ dd.dd-contentobject{
object{
width: 100%; width: 100%;
} }
video{
width: 100%;
// min-height: 600px;
}
}
dd.dd-embed embed{
width: 100%;
min-height: 500px;
}
} }
body.detailsOpen{ body.detailsOpen{