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
parent
2f1ff8f55d
commit
d07f0191af
5 changed files with 225 additions and 93 deletions
|
|
@ -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();
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -39,9 +39,9 @@
|
|||
<stop offset=".51" stop-color="hsl(206, 0%, 48%)" />
|
||||
<stop offset=".99" stop-color="hsl(212, 0%, 78%)" />
|
||||
</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 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 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="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="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="arrowHeadCrumbTrail"><path d="M0,-3L8,0L0,3" fill="yellow"></path></marker>
|
||||
<clipPath id="clipNodeImage">
|
||||
<circle cx="40" cy="40" r="40" />
|
||||
</clipPath>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
},
|
||||
"@type": "WebSite",
|
||||
"url": "https://rubenvandeven.com",
|
||||
"s:seeAlso": [ "https://rubenvandeven.com/rubenvandeven.jsonld", "https://rubenvandeven.com/foaf.rdf#me"],
|
||||
"author":
|
||||
{
|
||||
"@id": "https://rubenvandeven.com/ruben",
|
||||
|
|
@ -13,11 +14,10 @@
|
|||
"jobTitle": "digital artist / researcher of software culture",
|
||||
"email": "info@rubenvandeven.com",
|
||||
"nationality": "The Netherlands",
|
||||
"s:seeAlso": "https://rubenvandeven.com/foaf.rdf#me",
|
||||
"@reverse": {
|
||||
"member": [
|
||||
{
|
||||
"@id": "http://plottingd.at/a",
|
||||
"@id": "http://plottingd.at/a#id",
|
||||
"@type": "PerformingGroup",
|
||||
"name": "Plotting Data: dramatisation as tactic",
|
||||
"url": "http://plottingd.at/a",
|
||||
|
|
@ -43,7 +43,7 @@
|
|||
],
|
||||
"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",
|
||||
"name": "Residency: Summer Sessions 2016",
|
||||
"url": "http://summersessions.net/17-projects/projects-2016/55-emotion-hero",
|
||||
|
|
@ -59,8 +59,10 @@
|
|||
"name": "Residency: Q21",
|
||||
"startDate": "2017-01",
|
||||
"endDate": "2017-02",
|
||||
"isPartOf": {
|
||||
"@id": "https://rubenvandeven.com/exhibition/mood_swings"
|
||||
"@reverse": {
|
||||
"subEvent": {
|
||||
"@id": "https://rubenvandeven.com/exhibition/mood_swings"
|
||||
}
|
||||
},
|
||||
"location": {
|
||||
"@id": "https://rubenvandeven.com/place/q21"
|
||||
|
|
@ -93,11 +95,13 @@
|
|||
"image": [
|
||||
{
|
||||
"@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",
|
||||
"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",
|
||||
"artworkSurface": "Oilpaint on wood + WiFi-connected RaspberryPi in ABS enclosure",
|
||||
"contributor": {
|
||||
"@id": "http://www.donaldschenkel.nl/",
|
||||
"@id": "http://www.donaldschenkel.nl/#person",
|
||||
"@type": "Person",
|
||||
"name": "Donald Schenkel",
|
||||
"url": "http://www.donaldschenkel.nl/"
|
||||
|
|
@ -151,15 +155,18 @@
|
|||
"image": [
|
||||
{
|
||||
"@type": "ImageObject",
|
||||
"contentUrl": "assets\/image\/mvp1-1.jpg"
|
||||
"contentUrl": "assets\/image\/mvp1-1.jpg",
|
||||
"thumbnailUrl": "assets\/thumb\/mvp1-1.jpg"
|
||||
},
|
||||
{
|
||||
"@type": "ImageObject",
|
||||
"contentUrl": "assets\/image\/mvp1-2.jpg"
|
||||
"contentUrl": "assets\/image\/mvp1-2.jpg",
|
||||
"thumbnailUrl": "assets\/thumb\/mvp1-2.jpg"
|
||||
},
|
||||
{
|
||||
"@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",
|
||||
"artworkSurface": "Pencil drawing in metal LCD enclosure",
|
||||
"contributor": {
|
||||
"@id": "http://www.joseph-huot.com/",
|
||||
"@id": "http://www.joseph-huot.com/#person",
|
||||
"@type": "Person",
|
||||
"name": "Joseph Huot",
|
||||
"url": "http://www.joseph-huot.com/"
|
||||
|
|
@ -186,15 +193,18 @@
|
|||
"image": [
|
||||
{
|
||||
"@type": "ImageObject",
|
||||
"contentUrl": "assets\/image\/mvp2-01.jpg"
|
||||
"contentUrl": "assets\/image\/mvp2-01.jpg",
|
||||
"thumbnailUrl": "assets\/thumb\/mvp2-01.jpg"
|
||||
},
|
||||
{
|
||||
"@type": "ImageObject",
|
||||
"contentUrl": "assets\/image\/mvp2-02.jpg"
|
||||
"contentUrl": "assets\/image\/mvp2-02.jpg",
|
||||
"thumbnailUrl": "assets\/thumb\/mvp2-02.jpg"
|
||||
},
|
||||
{
|
||||
"@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": [
|
||||
{
|
||||
"@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": [
|
||||
{
|
||||
"@type": "ImageObject",
|
||||
"contentUrl": "assets\/image\/moodmeter1-1.jpg"
|
||||
"contentUrl": "assets\/image\/moodmeter1-1.jpg",
|
||||
"thumbnailUrl": "assets\/thumb\/moodmeter1-1.jpg"
|
||||
},
|
||||
{
|
||||
"@type": "ImageObject",
|
||||
"contentUrl": "assets\/image\/moodmeter2.jpg"
|
||||
"contentUrl": "assets\/image\/moodmeter2.jpg",
|
||||
"thumbnailUrl": "assets\/thumb\/moodmeter2.jpg"
|
||||
},
|
||||
{
|
||||
"@type": "ImageObject",
|
||||
"contentUrl": "assets\/image\/moodmeter3.jpg"
|
||||
"contentUrl": "assets\/image\/moodmeter3.jpg",
|
||||
"thumbnailUrl": "assets\/thumb\/moodmeter3.jpg"
|
||||
},
|
||||
{
|
||||
"@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",
|
||||
"@type": "ExhibitionEvent",
|
||||
"name": "STATE of Emotion",
|
||||
"isPartOf": {
|
||||
"@id": "https://www.statefestival.org/",
|
||||
"@type": "Event",
|
||||
"name": "STATE Festival",
|
||||
"address": "Berlin"
|
||||
"@reverse": {
|
||||
"subEvent": {
|
||||
"@id": "https://www.statefestival.org/",
|
||||
"@type": "Festival",
|
||||
"name": "STATE Festival",
|
||||
"address": "Berlin"
|
||||
}
|
||||
},
|
||||
"startDate": "2016-11-04",
|
||||
"endDate": "2016-11-05",
|
||||
|
|
@ -397,8 +414,10 @@
|
|||
"startDate": "2016-09",
|
||||
"endDate": "2016-09",
|
||||
"workFeatured": [],
|
||||
"isPartOf": {
|
||||
"@id": "http://summersessions.net/17-projects/projects-2016/55-emotion-hero"
|
||||
"@reverse": {
|
||||
"subEvent": {
|
||||
"@id": "http://summersessions.net/17-projects/projects-2016/55-emotion-hero"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
|
|
@ -406,11 +425,13 @@
|
|||
"image": [
|
||||
{
|
||||
"@type": "ImageObject",
|
||||
"contentUrl": "assets\/image\/emotionhero1-2.jpg"
|
||||
"contentUrl": "assets\/image\/emotionhero1-2.jpg",
|
||||
"thumbnailUrl": "assets\/thumb\/emotionhero1-2.jpg"
|
||||
},
|
||||
{
|
||||
"@type": "ImageObject",
|
||||
"contentUrl": "assets\/image\/emotionhero2.jpg"
|
||||
"contentUrl": "assets\/image\/emotionhero2.jpg",
|
||||
"thumbnailUrl": "assets\/thumb\/emotionhero2.jpg"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -467,11 +488,13 @@
|
|||
"image": [
|
||||
{
|
||||
"@type": "ImageObject",
|
||||
"contentUrl": "assets\/image\/choosehowyoufeel2-2.jpg"
|
||||
"contentUrl": "assets\/image\/choosehowyoufeel2-2.jpg",
|
||||
"thumbnailUrl": "assets\/thumb\/choosehowyoufeel2-2.jpg"
|
||||
},
|
||||
{
|
||||
"@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)",
|
||||
"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": {
|
||||
"@id": "http://randomizer.info",
|
||||
"@id": "http://randomizer.info#person",
|
||||
"@type": "Person",
|
||||
"name": "Cristina Cochior",
|
||||
"url": "http://randomizer.info"
|
||||
|
|
@ -490,15 +513,18 @@
|
|||
"image": [
|
||||
{
|
||||
"@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",
|
||||
"contentUrl": "assets\/image\/eye_3-2.jpg"
|
||||
"contentUrl": "assets\/image\/eye_3-2.jpg",
|
||||
"thumbnailUrl": "assets\/thumb\/eye_3-2.jpg"
|
||||
},
|
||||
{
|
||||
"@type": "ImageObject",
|
||||
"contentUrl": "assets\/image\/eye_6-2.jpg"
|
||||
"contentUrl": "assets\/image\/eye_6-2.jpg",
|
||||
"thumbnailUrl": "assets\/thumb\/eye_6-2.jpg"
|
||||
}
|
||||
],
|
||||
"@reverse": {
|
||||
|
|
@ -552,7 +578,7 @@
|
|||
"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",
|
||||
"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.",
|
||||
|
|
@ -568,7 +594,6 @@
|
|||
{
|
||||
"@type": "Event",
|
||||
"name": "Presentation @ Media Lab UFRJ",
|
||||
"url": "https://www.ied.edu/ied-locations/sao-paulo",
|
||||
"startDate": "2018-05-25",
|
||||
"endDate": "2018-05-25",
|
||||
"organizer": "Media Lab UFRJ & Dutch Consulate",
|
||||
|
|
@ -663,12 +688,16 @@
|
|||
"url": "https://state-studio.com/participant/2016/ruben-van-de-ven",
|
||||
"startDate": "2018-11-04",
|
||||
"endDate": "2018-11-04",
|
||||
"isPartOf": {
|
||||
"@id": "https://www.statefestival.org/"
|
||||
"@reverse": {
|
||||
"subEvent": {
|
||||
"@id": "https://www.statefestival.org/"
|
||||
}
|
||||
},
|
||||
"recordedIn": {
|
||||
"@id": "https://www.youtube.com/watch?v=L2O6ecO-8PM&t=2042s",
|
||||
"@type": "VideoObject"
|
||||
"@id": "https://www.youtube.com/watch?v=L2O6ecO-8PM&feature=youtu.be&t=2062",
|
||||
"@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",
|
||||
"contentUrl": "assets\/image\/we_know_how_you_feel.jpg",
|
||||
"thumbnailUrl": "assets\/thumb\/we_know_how_you_feel.jpg",
|
||||
"caption": "We know how you feel"
|
||||
},
|
||||
{
|
||||
"@type": "ImageObject",
|
||||
"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"
|
||||
}
|
||||
],
|
||||
|
|
@ -758,16 +789,19 @@
|
|||
{
|
||||
"@type": "ImageObject",
|
||||
"contentUrl": "assets\/image\/fragments-6-2.jpg",
|
||||
"thumbnailUrl": "assets\/thumb\/fragments-6-2.jpg",
|
||||
"caption": "Fragments of reality"
|
||||
},
|
||||
{
|
||||
"@type": "ImageObject",
|
||||
"contentUrl": "assets\/image\/fragments-9-2.jpg",
|
||||
"thumbnailUrl": "assets\/thumb\/fragments-9-2.jpg",
|
||||
"caption": "Fragments of reality"
|
||||
},
|
||||
{
|
||||
"@type": "ImageObject",
|
||||
"contentUrl": "assets\/image\/fragments-7-2.jpg",
|
||||
"thumbnailUrl": "assets\/thumb\/fragments-7-2.jpg",
|
||||
"caption": "Fragments of reality"
|
||||
}
|
||||
]
|
||||
|
|
@ -780,11 +814,13 @@
|
|||
"image": [
|
||||
{
|
||||
"@type": "ImageObject",
|
||||
"contentUrl": "assets\/image\/waterdagen-teaser.jpg"
|
||||
"contentUrl": "assets\/image\/waterdagen-teaser.jpg",
|
||||
"thumbnailUrl": "assets\/thumb\/waterdagen-teaser.jpg"
|
||||
},
|
||||
{
|
||||
"@type": "ImageObject",
|
||||
"contentUrl": "assets\/image\/waterdagen1.jpg"
|
||||
"contentUrl": "assets\/image\/waterdagen1.jpg",
|
||||
"thumbnailUrl": "assets\/thumb\/waterdagen1.jpg"
|
||||
}
|
||||
],
|
||||
"@reverse": {
|
||||
|
|
@ -814,7 +850,8 @@
|
|||
"image": [
|
||||
{
|
||||
"@type": "ImageObject",
|
||||
"contentUrl": "assets\/image\/copoet1.jpg"
|
||||
"contentUrl": "assets\/image\/copoet1.jpg",
|
||||
"thumbnailUrl": "assets\/thumb\/copoet1.jpg"
|
||||
}
|
||||
],
|
||||
"@reverse": {
|
||||
|
|
@ -842,16 +879,22 @@
|
|||
"image": [
|
||||
{
|
||||
"@type": "ImageObject",
|
||||
"contentUrl": "assets\/image\/samawati-prev2.jpg"
|
||||
"contentUrl": "assets\/image\/samawati-prev2.jpg",
|
||||
"thumbnailUrl": "assets\/thumb\/samawati-prev2.jpg"
|
||||
},
|
||||
{
|
||||
"@type": "ImageObject",
|
||||
"contentUrl": "assets\/image\/samawati-prev1.jpg"
|
||||
"contentUrl": "assets\/image\/samawati-prev1.jpg",
|
||||
"thumbnailUrl": "assets\/thumb\/samawati-prev1.jpg"
|
||||
}
|
||||
],
|
||||
"video": {
|
||||
"@id": "http://www.youtube.com/watch?v=D8pMy7xOZnI",
|
||||
"@type": "VideoObject"
|
||||
"@id": "https://rubenvandeven.com/assets/video/samawati.mp4#videoobject",
|
||||
"@type": "VideoObject",
|
||||
"thumbnailUrl": "assets/thumb/samawati.mp4.jpg",
|
||||
"contentUrl": "assets/video/samawati.mp4" ,
|
||||
"encodingFormat": "video/mp4",
|
||||
"videoFrameSize": "1280x1024"
|
||||
}
|
||||
},
|
||||
{
|
||||
|
|
@ -862,22 +905,27 @@
|
|||
"image": [
|
||||
{
|
||||
"@type": "ImageObject",
|
||||
"contentUrl": "assets\/image\/guerilla2.jpg"
|
||||
"contentUrl": "assets/image/guerilla2.jpg",
|
||||
"thumbnailUrl": "assets/thumb/guerilla2.jpg"
|
||||
}
|
||||
],
|
||||
"video": {
|
||||
"@id": "http://www.youtube.com/watch?v=7Nk24Mh6uMc",
|
||||
"@type": "VideoObject"
|
||||
"@id": "https://rubenvandeven.com/assets/video/guerilla_project.mp4#videoobject",
|
||||
"@type": "VideoObject",
|
||||
"contentUrl": "assets/video/guerilla_project.mp4",
|
||||
"thumbnailUrl": "assets/thumb/guerilla_project.mp4.jpg",
|
||||
"encodingFormat": "video/mp4",
|
||||
"videoFrameSize": "1280x1024"
|
||||
}
|
||||
}
|
||||
],
|
||||
"contributor": [
|
||||
{
|
||||
"@type": "MediaObject",
|
||||
"name": "The Spectacular Times",
|
||||
"name": "The Spectacular Times",
|
||||
"dateCreated": "2013-12-04",
|
||||
"author": {
|
||||
"@id": "http://www.wardgoes.nl",
|
||||
"@id": "http://www.wardgoes.nl/#person",
|
||||
"@type": "Person",
|
||||
"name": "Ward Goes",
|
||||
"url": "http://www.wardgoes.nl"
|
||||
|
|
@ -888,11 +936,13 @@
|
|||
{
|
||||
"@type": "ImageObject",
|
||||
"contentUrl": "assets\/image\/times1.jpg",
|
||||
"thumbnailUrl": "assets\/thumb\/times1.jpg",
|
||||
"caption": "The Spectacular Times"
|
||||
},
|
||||
{
|
||||
"@type": "ImageObject",
|
||||
"contentUrl": "assets\/image\/times2.jpg",
|
||||
"thumbnailUrl": "assets\/thumb\/times2.jpg",
|
||||
"caption": "The Spectacular Times"
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -528,12 +528,20 @@ var setDetails = function(nodeDatum, nodeIdx) {
|
|||
} else if(typeof nodeAttr[i]['@id'] !== 'undefined') {
|
||||
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>`;
|
||||
} 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') {
|
||||
// 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 += `<dd class='dd-contentobject'><object data='${nodeAttr[i]}'></object></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>`;
|
||||
}
|
||||
} else {
|
||||
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>`;
|
||||
|
|
@ -576,7 +584,13 @@ var setDetails = function(nodeDatum, nodeIdx) {
|
|||
if(typeof rel['https://schema.org/contentUrl'] != 'undefined') {
|
||||
let ddEl = document.createElement('dd')
|
||||
ddEl.classList.add('dd-contentobject');
|
||||
ddEl.innerHTML = `<object data='${rel['https://schema.org/contentUrl']}'></object>`
|
||||
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>`
|
||||
}
|
||||
relsEl.appendChild(ddEl);
|
||||
}
|
||||
}
|
||||
|
|
@ -790,12 +804,22 @@ node.call(d3.drag()
|
|||
.on("end", dragended))
|
||||
.on("click", function(d, idx, nodes){
|
||||
let node = nodes[idx];
|
||||
// if(typeof nodePositions[idx] == 'undefined') {
|
||||
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()
|
||||
// .on("start", function(d){
|
||||
|
|
@ -848,6 +872,46 @@ node.append('text')
|
|||
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')
|
||||
.attr("class", "nodeTitle")
|
||||
.attr("y", "5")
|
||||
|
|
@ -860,25 +924,24 @@ nodeTitle
|
|||
let textLength;
|
||||
let self = d3.select(this);
|
||||
let titleText = getNodeLabel(node);
|
||||
if(titleText.length > 20 && titleText.indexOf(" ") > -1) {
|
||||
let mid = Math.floor(titleText.length / 2);
|
||||
mid = titleText.substr(0,mid).lastIndexOf(" ");
|
||||
if(mid === -1) {
|
||||
mid = titleText.indexOf(" ");
|
||||
}
|
||||
let titleText1 = titleText.substr(0, mid).trim();
|
||||
let titleText2 = titleText.substr(mid).trim();
|
||||
self.append("tspan")
|
||||
.text(titleText1)
|
||||
let titleTexts = false;
|
||||
if(titleText.length > 20) {
|
||||
titleTexts = splitText(titleText);
|
||||
}
|
||||
if(titleTexts !== false) {
|
||||
let tspan1 = self.append("tspan")
|
||||
.text(titleTexts[0])
|
||||
.attr("y", "-10")
|
||||
.attr("x", "0")
|
||||
;
|
||||
let tspan = self.append("tspan")
|
||||
.text(titleText2)
|
||||
.text(titleTexts[1])
|
||||
.attr("y", "10")
|
||||
.attr("x", "0")
|
||||
;
|
||||
textLength = tspan.node().getComputedTextLength();
|
||||
let textLength1 = tspan.node().getComputedTextLength();
|
||||
let textLength2 = tspan.node().getComputedTextLength();
|
||||
textLength = Math.max(textLength1, textLength2);
|
||||
} else {
|
||||
self.text(titleText);
|
||||
textLength = self.node().getComputedTextLength();
|
||||
|
|
@ -892,11 +955,11 @@ nodeTitle
|
|||
;
|
||||
|
||||
node.each(function(d) {
|
||||
if(!d['https://schema.org/contentUrl']) {
|
||||
if(!d['https://schema.org/thumbnailUrl']) {
|
||||
return;
|
||||
}
|
||||
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("height", nodeSize*2)
|
||||
.attr("transform","translate(-"+nodeSize+" -"+nodeSize+")")
|
||||
|
|
@ -974,8 +1037,8 @@ function ticked() {
|
|||
srcSize = (typeof nodePositions[d.source.index] != 'undefined') ? selectedNodeSize : nodeSize;
|
||||
tgtSize = (typeof nodePositions[d.target.index] != 'undefined') ? selectedNodeSize : nodeSize;
|
||||
*/
|
||||
let srcSize = nodeSize;
|
||||
let tgtSize = nodeSize;
|
||||
let srcSize = nodeSize+3.2;
|
||||
let tgtSize = nodeSize+3.2;
|
||||
|
||||
// Compute the line endpoint such that the arrow
|
||||
// is touching the edge of the node rectangle perfectly.
|
||||
|
|
|
|||
|
|
@ -3,11 +3,22 @@ $detailsWidth: 740px;
|
|||
$detailSlide: -1 * ($detailsWidth);
|
||||
$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{
|
||||
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;
|
||||
background: black;
|
||||
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{
|
||||
width:100%;
|
||||
height: 100%;
|
||||
|
|
@ -132,10 +138,13 @@ g.node{
|
|||
}
|
||||
|
||||
// &.visibleLink{
|
||||
&.activeLink{
|
||||
&.activeLink, &.hoverLink{
|
||||
display:block;
|
||||
// opacity: 1;
|
||||
|
||||
text{
|
||||
display:block;
|
||||
fill: #999;
|
||||
}
|
||||
}
|
||||
|
||||
line{
|
||||
|
|
@ -329,12 +338,22 @@ text{
|
|||
dd.dd-description{
|
||||
margin-left:0;
|
||||
}
|
||||
dd.dd-contentobject{
|
||||
dd.dd-contentobject, dd.dd-embed{
|
||||
margin-left:0;
|
||||
}
|
||||
dd.dd-contentobject object{
|
||||
width: 100%;
|
||||
dd.dd-contentobject{
|
||||
object{
|
||||
width: 100%;
|
||||
}
|
||||
video{
|
||||
width: 100%;
|
||||
// min-height: 600px;
|
||||
}
|
||||
}
|
||||
dd.dd-embed embed{
|
||||
width: 100%;
|
||||
min-height: 500px;
|
||||
}
|
||||
}
|
||||
|
||||
body.detailsOpen{
|
||||
|
|
|
|||
Loading…
Reference in a new issue