r/portfolio
1
0
Fork 0
Code Issues Pull requests Releases Activity
portfolio/test3.html

1895 lines
120 KiB
HTML
Raw Normal View History

Initial commit
2018-08-13 17:39:11 +02:00
<!DOCTYPE html>
<html xmlns:xlink="http://www.w3.org/1999/xlink">
<head>
<title></title>
<style type="text/css">
body{
margin:0;overflow: hidden;
font-family: sans-serif;
/* background: #fceabb;
background: -moz-linear-gradient(-45deg, #fceabb 0%, #fccd4d 50%, #f8b500 51%, #fbdf93 100%);
background: -webkit-linear-gradient(-45deg, #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%);
background: linear-gradient(135deg, #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fceabb', endColorstr='#fbdf93',GradientType=1 ); */
/*background: #f7fbfc;
background: -moz-linear-gradient(45deg, #f7fbfc 0%, #d9edf2 40%, #add9e4 100%);
background: -webkit-linear-gradient(45deg, #f7fbfc 0%,#d9edf2 40%,#add9e4 100%);
background: linear-gradient(45deg, #f7fbfc 0%,#d9edf2 40%,#add9e4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7fbfc', endColorstr='#add9e4',GradientType=1 );*/
/*background: #e2e2e2;
background: -moz-linear-gradient(45deg, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%);
background: -webkit-linear-gradient(45deg, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
background: linear-gradient(45deg, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=1 );*/
/*background: #d2dfed;
background: -moz-linear-gradient(45deg, #d2dfed 0%, #c8d7eb 26%, #bed0ea 51%, #a6c0e3 51%, #afc7e8 62%, #bad0ef 75%, #99b5db 88%, #799bc8 100%);
background: -webkit-linear-gradient(45deg, #d2dfed 0%,#c8d7eb 26%,#bed0ea 51%,#a6c0e3 51%,#afc7e8 62%,#bad0ef 75%,#99b5db 88%,#799bc8 100%);
background: linear-gradient(45deg, #d2dfed 0%,#c8d7eb 26%,#bed0ea 51%,#a6c0e3 51%,#afc7e8 62%,#bad0ef 75%,#99b5db 88%,#799bc8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d2dfed', endColorstr='#799bc8',GradientType=1 );*/
background: #d2dfed;
background: -moz-linear-gradient(45deg, #d2dfed 0%, #afc1d8 13%, #d5e0ef 28%, #bed0ea 51%, #a8c0dd 51%, #c0d0e5 63%, #bad0ef 75%, #a2bad8 88%, #799bc8 100%);
background: -webkit-linear-gradient(45deg, #d2dfed 0%,#afc1d8 13%,#d5e0ef 28%,#bed0ea 51%,#a8c0dd 51%,#c0d0e5 63%,#bad0ef 75%,#a2bad8 88%,#799bc8 100%);
background: linear-gradient(45deg, #d2dfed 0%,#afc1d8 13%,#d5e0ef 28%,#bed0ea 51%,#a8c0dd 51%,#c0d0e5 63%,#bad0ef 75%,#a2bad8 88%,#799bc8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d2dfed', endColorstr='#799bc8',GradientType=1 );
/*-moz-animation: bgShift 5s infinite;
background-size: 400% 400%;*/
}
/*@-moz-keyframes bgShift{
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}*/
svg{
width:100vw;
height: 100vh;
cursor: dragging;
}
svg.dragging{
cursor: grabbing;
}
g.node{
cursor: pointer;
stroke:blue;
stroke-width:0;
transition:stroke-width .5s;
}
g.node:hover circle{
stroke-width:.2em;
}
g.node.drag{
cursor:grabbing;
}
.node text{
text-anchor: start;
}
.relationship line{
fill:none;
stroke: #000;
stroke-width: .2em;
}
.relationship text{
fill:black;
text-transform: lowercase;
font-size: 75%;
}
.relationship:hover line{
/*TODO: fancy color animation*/
stroke:red;
}
.relationship:hover text{
fill:red;
}
.relationship.activeLink text{
color:red;
}
.relationship.activeLink line{
stroke: red;
}
circle{
fill: white;
/*stroke-width:.2em;*/
fill:url(#blueGrad);
}
text{
text-anchor: middle;
}
.drag{
fill:#00f;
}
.MediaObject circle{
fill:url(#orangeGrad);
}
/* .ImageObject circle{
stroke:lightgreen;
}*/
.Person circle{
fill:url(#redGrad);
}
.PublicationEvent circle{
fill:url(#limeGrad);
}
/*.Place circle{
stroke:darkgreen;
}
.Country circle{
stroke:yellow;
}*/
.relationship.address line{
stroke:#90F7FE;
}
.relationship.location line{
stroke:darkgreen;
}
.relationship.contributor line{
/* stroke:orange; */
stroke-width:.4em;
}
</style>
</head>
<body>
<svg width="800" height="600" reserveAspectRatio="xMidYMid" viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="orangeGrad" gradientTransform="rotate(66 .5 .5)" objectBoundingBox="gradientUnits">
<stop offset=".05" stop-color="#fceabb" />
<stop offset=".5" stop-color="#fccd4d" />
<stop offset=".51" stop-color="#f8b500" />
<stop offset=".99" stop-color="#fbdf93" />
</linearGradient>
<linearGradient id="redGrad" gradientTransform="rotate(66 .5 .5)" objectBoundingBox="gradientUnits">
<stop offset=".05" stop-color="#FCBFBB" />
<stop offset=".5" stop-color="#FC4D51" />
<stop offset=".51" stop-color="#F8001F" />
<stop offset=".99" stop-color="#FB93A0" />
</linearGradient>
<linearGradient id="limeGrad" gradientTransform="rotate(66 .5 .5)" objectBoundingBox="gradientUnits">
<stop offset=".05" stop-color="#FAFCBB" />
<stop offset=".5" stop-color="#E4FC4D" />
<stop offset=".51" stop-color="#D3F800" />
<stop offset=".99" stop-color="#E8FB93" />
</linearGradient>
<linearGradient id="blueGrad" gradientTransform="rotate(66 .5 .5)" objectBoundingBox="gradientUnits">
<stop offset=".05" stop-color="#BBDDFC" />
<stop offset=".5" stop-color="#4DA9FC" />
<stop offset=".51" stop-color="#008AF8" />
<stop offset=".99" stop-color="#93C2FB" />
</linearGradient>
<marker markerHeight="4" markerWidth="4" refY="0" refX="6" viewBox="0 -3 6 6" preserveAspectRatio="none" orient="auto" id="arrowHead"><path d="M0,-3L8,0L0,3"></path></marker>
<clipPath id="clipNodeImage">
<circle cx="40" cy="40" r="40" />
</clipPath>
</defs>
</svg>
<script type="text/javascript">
var graph = {
"nodes": [
{
"@type": "WebSite",
"name":"https:\/\/rubenvandeven.com",
"url": "https:\/\/rubenvandeven.com",
},
{
"@type": "Person",
"name": "Ruben van de Ven",
"email": "info@rubenvandeven.com",
"nationality": {
"@type": "Country",
"name": "Netherlands"
},
"@reverse": {
"author": [
{
"@type": "Series",
"name": "Digital Reflections",
"about": "lorem ipsum etc.",
"hasPart": [
{
"@type": "MediaObject",
"name": "Emotion Hero",
"description": "Emotion recognition software is being used both as a tool for \u2018objective\u2019 measurements as well as a tool for training one\u2019s facial expressions, eg. for job interviews. Emotion Hero is a literal translation of the paradoxical relation between these applications of the technology.\n\nEmotion Hero is a two-part artwork. On the one hand is a video-game that is freely downloadable for everybody with an Android device (see <a href=\"https:\/\/play.google.com\/store\/apps\/details?id=com.rubenvandeven.emotion_hero\">Google Play<\/a>). Inspired by Guitar Hero, the user scores points by following given cues. It provides detailed feedback on the mechanics of the face (eg. \u201cYou showed on 10% Joy when you had to show 100%, smile 99.32% more.\u201d), revealing that rather than being a window into the brain, the face is a controllable surface.\n\nThe second part is a projection that shows the aggregated scores of the game. In order to substantiate their discourse, companies in facial expression measurement employ a huge amount of data collection and processing. The results are displayed in a fixed grid, recalling historical practices that, trough extensive measurement and administration, also aimed to delineate something which is conceptually undelineated: think of Duchenne de Boulogne, Lombroso, and Charcot.\n\nEmotion Hero is a playful invitation to open up the box of expression analysis to reveal the assumptions that underlie this technology.\n\nThe game's emotional intelligence is powered by Affectiva (I was also <a href=\"http:\/\/blog.affectiva.com\/sdk-on-the-spot-emotion-hero-app-encourages-play-with-facial-expressions\">interviewed<\/a> by them). This project is produced as part of the <a href=\"http:\/\/summersessions.net\/17-projects\/projects-2016\/55-emotion-hero\">Summer Sessions Network for Talent Development<\/a> in a co-production of Arquivo 237 and V2_ Lab for the Unstable Media, with support of the Creative Industries Fund NL.\nIt has been exhibited at the <a href=\"http:\/\/www.statefestival.org\/2016\/program-entry\/2016\/emotion-hero-2016\">State Festival 2016<\/a> (Berlin, DE) and Digital &lt;Dis&gt;orders (Frankfurt, DE).",
"url": "https:\/\/emotionhero.com",
"@reverse": {
"published": [
{
"@type": "PublicationEvent",
"name": "Mood Swings",
"location": {
"@type": "Place",
"name": "Q21",
"address": {
"@type": "PostalAddress",
"name": "Museums Quartier",
"addressCountry": {
"@type": "Country",
"name": "Austria"
},
"addressLocality": "Vienna"
}
},
"startDate": "2017-03-28",
"endDate": "2017-05-28",
"workFeatured": []
}
]
},
"image": [
{
"@type": "ImageObject",
"contentUrl": "assets\/image\/emotionhero1-2.jpg"
},
{
"@type": "ImageObject",
"contentUrl": "assets\/image\/emotionhero2.jpg"
}
]
},
{
"@type": "MediaObject",
"name": "We know how you feel",
"dateCreated": "2015-01-01",
"description": "A two-part artwork and my first work on software that derives emotional parameters from facial expressions. The first part displays the <em>Mind Reading Emotions Library<\/em>, an interactive collection of videos, audio fragments and scenes depicting 412 distinct emotions &mdash;ranging from `angry' to `unsure'&mdash; grouped in 24 categories. The second part of the project is a tablet with a modified demo app by Affectiva, a major player in the field of emotion analysis software. This app acts as an interactive mirror which displays the various parameters that the Affectiva software derives from someone's facial expression, while a voice over reads a text extracted from the Dutch classic <em>Beyond Sleep<\/em> by W.F. Hermans (1966), concerning the impact of the mirror, photography and video on the human self-image.\n\nIt was part of the exhibition <em><a href='http:\/\/v2.nl\/events\/an-encyclopedia-of-media-objects'>Encyclopedia Of Media Objects<\/a><\/em>, organised by the Piet Zwart Institute and held at the V2_ Institute for unstable media in June 2015.",
"image": [
{
"@type": "ImageObject",
"contentUrl": "assets\/image\/fragments-6-2.jpg",
"caption": "Fragments of reality"
},
{
"@type": "ImageObject",
"contentUrl": "assets\/image\/fragments-9-2.jpg",
"caption": "Fragments of reality"
},
{
"@type": "ImageObject",
"contentUrl": "assets\/image\/fragments-7-2.jpg",
"caption": "Fragments of reality"
}
]
}
]
},
{
"@type": "Series",
"name": "Real Media (working title)",
"about": "lorem ipsum etc.",
"hasPart": [
{
"@type": "MediaObject",
"name": "The Spectacular Times",
"dateCreated": "2013-12-04",
"contributor": {
"@type": "Person",
"name": "Ward Goes",
"url": "http:\/\/www.wardgoes.nl"
},
"description": "Originally initiated as a graduation project (cum laude) by Ward Goes, <a href=\"http:\/\/spectacularspectacular.news\">The Spectacular Times<\/a> is an ongoing visual inquiry into the presentation of news. It investigates how news, rather than being subjective, is representational of its social, cultural, (geo)political and ideological contexts. The project sets out to lay bare these representations in currently circulating news.\n\nBy layering and contrasting different news elements The Spectacular Times re-contextualises news and makes explicit the intangible notions that lie beyond an increasingly universal guise of news reporting. Not in an effort to tell apart true from false, left from right, or right from wrong, but in order to accentuate a variety of articulations of news.\n\nThis web based project uses user defined variables to animate news headers, texts and images, which are directly sourced from different news websites world wide. By adjusting these parameters (among which region, scope and speed) the spectator actively perceives how news content is de- and reformed through its aesthetics.",
"url": "http:\/\/spectacularspectacular.news",
"image": [
{
"@type": "ImageObject",
"contentUrl": "assets\/image\/times1.jpg",
"caption": "The Spectacular Times"
}
]
},
{
"@type": "MediaObject",
"name": "Fragments of reality",
"dateCreated": "2015-01-01",
"description": "In western society, images are generally perceived as objective traces of events. As evidence that things happened as how they are captured in the frame.\n\nAs Susan Sontag elaborates, this counts for photographic images in particular. They are seen, not as subjective statements about the world, but rather as pieces of it &mdash;as fragments of a reality. Photographic images are often seen as unbiased; they carry in them the \"burden of truth\". We use them to give meaning, to asses and to judge. It exactly is in this passivity of the image, that its aggression lurks.\nFragments of Reality is a newspaper that assembles descriptions of five images of one event: a press conference with Jeroen Dijsselbloem and Yanis Varoufakis. Each interviewee was shown one of the images, in an attempt to highlight how we read events trough photographs.\n\nIt considers an event not as a single factual moment, but as the cumulative of subjective experiences, inherently proposing that an image is always lacking in its representation of that which it presents.",
"image": [
{
"@type": "ImageObject",
"contentUrl": "assets\/image\/fragments-6-2.jpg",
"caption": "Fragments of reality"
},
{
"@type": "ImageObject",
"contentUrl": "assets\/image\/fragments-9-2.jpg",
"caption": "Fragments of reality"
},
{
"@type": "ImageObject",
"contentUrl": "assets\/image\/fragments-7-2.jpg",
"caption": "Fragments of reality"
}
]
}
]
},
{
"@type": "WebSite",
"url": "https:\/\/rubenvandeven.com",
"@context": "http:\/\/schema.org\/"
}
]
}
},
{
"@type": "Country",
"name": "Netherlands"
},
{
"@type": "Series",
"name": "Digital Reflections",
"about": "lorem ipsum etc.",
"author": {
"@type": "Person",
"name": "Ruben van de Ven",
"email": "info@rubenvandeven.com",
"nationality": {
"@type": "Country",
"name": "Netherlands"
},
"@reverse": {
"author": [
{
"@type": "Series",
"name": "Real Media (working title)",
"about": "lorem ipsum etc.",
"hasPart": [
{
"@type": "MediaObject",
"name": "The Spectacular Times",
"dateCreated": "2013-12-04",
"contributor": {
"@type": "Person",
"name": "Ward Goes",
"url": "http:\/\/www.wardgoes.nl"
},
"description": "Originally initiated as a graduation project (cum laude) by Ward Goes, <a href=\"http:\/\/spectacularspectacular.news\">The Spectacular Times<\/a> is an ongoing visual inquiry into the presentation of news. It investigates how news, rather than being subjective, is representational of its social, cultural, (geo)political and ideological contexts. The project sets out to lay bare these representations in currently circulating news.\n\nBy layering and contrasting different news elements The Spectacular Times re-contextualises news and makes explicit the intangible notions that lie beyond an increasingly universal guise of news reporting. Not in an effort to tell apart true from false, left from right, or right from wrong, but in order to accentuate a variety of articulations of news.\n\nThis web based project uses user defined variables to animate news headers, texts and images, which are directly sourced from different news websites world wide. By adjusting these parameters (among which region, scope and speed) the spectator actively perceives how news content is de- and reformed through its aesthetics.",
"url": "http:\/\/spectacularspectacular.news",
"image": [
{
"@type": "ImageObject",
"contentUrl": "assets\/image\/times1.jpg",
"caption": "The Spectacular Times"
}
]
},
{
"@type": "MediaObject",
"name": "Fragments of reality",
"dateCreated": "2015-01-01",
"description": "In western society, images are generally perceived as objective traces of events. As evidence that things happened as how they are captured in the frame.\n\nAs Susan Sontag elaborates, this counts for photographic images in particular. They are seen, not as subjective statements about the world, but rather as pieces of it &mdash;as fragments of a reality. Photographic images are often seen as unbiased; they carry in them the \"burden of truth\". We use them to give meaning, to asses and to judge. It exactly is in this passivity of the image, that its aggression lurks.\nFragments of Reality is a newspaper that assembles descriptions of five images of one event: a press conference with Jeroen Dijsselbloem and Yanis Varoufakis. Each interviewee was shown one of the images, in an attempt to highlight how we read events trough photographs.\n\nIt considers an event not as a single factual moment, but as the cumulative of subjective experiences, inherently proposing that an image is always lacking in its representation of that which it presents.",
"image": [
{
"@type": "ImageObject",
"contentUrl": "assets\/image\/fragments-6-2.jpg",
"caption": "Fragments of reality"
},
{
"@type": "ImageObject",
"contentUrl": "assets\/image\/fragments-9-2.jpg",
"caption": "Fragments of reality"
},
{
"@type": "ImageObject",
"contentUrl": "assets\/image\/fragments-7-2.jpg",
"caption": "Fragments of reality"
}
]
}
]
},
{
"@type": "WebSite",
"url": "https:\/\/rubenvandeven.com",
"@context": "http:\/\/schema.org\/"
}
]
}
},
"hasPart": [
{
"@type": "MediaObject",
"name": "Emotion Hero",
"description": "Emotion recognition software is being used both as a tool for \u2018objective\u2019 measurements as well as a tool for training one\u2019s facial expressions, eg. for job interviews. Emotion Hero is a literal translation of the paradoxical relation between these applications of the technology.\n\nEmotion Hero is a two-part artwork. On the one hand is a video-game that is freely downloadable for everybody with an Android device (see <a href=\"https:\/\/play.google.com\/store\/apps\/details?id=com.rubenvandeven.emotion_hero\">Google Play<\/a>). Inspired by Guitar Hero, the user scores points by following given cues. It provides detailed feedback on the mechanics of the face (eg. \u201cYou showed on 10% Joy when you had to show 100%, smile 99.32% more.\u201d), revealing that rather than being a window into the brain, the face is a controllable surface.\n\nThe second part is a projection that shows the aggregated scores of the game. In order to substantiate their discourse, companies in facial expression measurement employ a huge amount of data collection and processing. The results are displayed in a fixed grid, recalling historical practices that, trough extensive measurement and administration, also aimed to delineate something which is conceptually undelineated: think of Duchenne de Boulogne, Lombroso, and Charcot.\n\nEmotion Hero is a playful invitation to open up the box of expression analysis to reveal the assumptions that underlie this technology.\n\nThe game's emotional intelligence is powered by Affectiva (I was also <a href=\"http:\/\/blog.affectiva.com\/sdk-on-the-spot-emotion-hero-app-encourages-play-with-facial-expressions\">interviewed<\/a> by them). This project is produced as part of the <a href=\"http:\/\/summersessions.net\/17-projects\/projects-2016\/55-emotion-hero\">Summer Sessions Network for Talent Development<\/a> in a co-production of Arquivo 237 and V2_ Lab for the Unstable Media, with support of the Creative Industries Fund NL.\nIt has been exhibited at the <a href=\"http:\/\/www.statefestival.org\/2016\/program-entry\/2016\/emotion-hero-2016\">State Festival 2016<\/a> (Berlin, DE) and Digital &lt;Dis&gt;orders (Frankfurt, DE).",
"url": "https:\/\/emotionhero.com",
"@reverse": {
"published": [
{
"@type": "PublicationEvent",
"name": "Mood Swings",
"location": {
"@type": "Place",
"name": "Q21",
"address": {
"@type": "PostalAddress",
"name": "Museums Quartier",
"addressCountry": {
"@type": "Country",
"name": "Austria"
},
"addressLocality": "Vienna"
}
},
"startDate": "2017-03-28",
"endDate": "2017-05-28",
"workFeatured": []
}
]
},
"image": [
{
"@type": "ImageObject",
"contentUrl": "assets\/image\/emotionhero1-2.jpg"
},
{
"@type": "ImageObject",
"contentUrl": "assets\/image\/emotionhero2.jpg"
}
]
},
{
"@type": "MediaObject",
"name": "We know how you feel",
"dateCreated": "2015-01-01",
"description": "A two-part artwork and my first work on software that derives emotional parameters from facial expressions. The first part displays the <em>Mind Reading Emotions Library<\/em>, an interactive collection of videos, audio fragments and scenes depicting 412 distinct emotions &mdash;ranging from `angry' to `unsure'&mdash; grouped in 24 categories. The second part of the project is a tablet with a modified demo app by Affectiva, a major player in the field of emotion analysis software. This app acts as an interactive mirror which displays the various parameters that the Affectiva software derives from someone's facial expression, while a voice over reads a text extracted from the Dutch classic <em>Beyond Sleep<\/em> by W.F. Hermans (1966), concerning the impact of the mirror, photography and video on the human self-image.\n\nIt was part of the exhibition <em><a href='http:\/\/v2.nl\/events\/an-encyclopedia-of-media-objects'>Encyclopedia Of Media Objects<\/a><\/em>, organised by the Piet Zwart Institute and held at the V2_ Institute for unstable media in June 2015.",
"image": [
{
"@type": "ImageObject",
"contentUrl": "assets\/image\/fragments-6-2.jpg",
"caption": "Fragments of reality"
},
{
"@type": "ImageObject",
"contentUrl": "assets\/image\/fragments-9-2.jpg",
"caption": "Fragments of reality"
},
{
"@type": "ImageObject",
"contentUrl": "assets\/image\/fragments-7-2.jpg",
"caption": "Fragments of reality"
}
]
}
]
},
{
"@type": "Series",
"name": "Real Media (working title)",
"about": "lorem ipsum etc.",
"author": {
"@type": "Person",
"name": "Ruben van de Ven",
"email": "info@rubenvandeven.com",
"nationality": {
"@type": "Country",
"name": "Netherlands"
},
"@reverse": {
"author": [
{
"@type": "Series",
"name": "Digital Reflections",
"about": "lorem ipsum etc.",
"hasPart": [
{
"@type": "MediaObject",
"name": "Emotion Hero",
"description": "Emotion recognition software is being used both as a tool for \u2018objective\u2019 measurements as well as a tool for training one\u2019s facial expressions, eg. for job interviews. Emotion Hero is a literal translation of the paradoxical relation between these applications of the technology.\n\nEmotion Hero is a two-part artwork. On the one hand is a video-game that is freely downloadable for everybody with an Android device (see <a href=\"https:\/\/play.google.com\/store\/apps\/details?id=com.rubenvandeven.emotion_hero\">Google Play<\/a>). Inspired by Guitar Hero, the user scores points by following given cues. It provides detailed feedback on the mechanics of the face (eg. \u201cYou showed on 10% Joy when you had to show 100%, smile 99.32% more.\u201d), revealing that rather than being a window into the brain, the face is a controllable surface.\n\nThe second part is a projection that shows the aggregated scores of the game. In order to substantiate their discourse, companies in facial expression measurement employ a huge amount of data collection and processing. The results are displayed in a fixed grid, recalling historical practices that, trough extensive measurement and administration, also aimed to delineate something which is conceptually undelineated: think of Duchenne de Boulogne, Lombroso, and Charcot.\n\nEmotion Hero is a playful invitation to open up the box of expression analysis to reveal the assumptions that underlie this technology.\n\nThe game's emotional intelligence is powered by Affectiva (I was also <a href=\"http:\/\/blog.affectiva.com\/sdk-on-the-spot-emotion-hero-app-encourages-play-with-facial-expressions\">interviewed<\/a> by them). This project is produced as part of the <a href=\"http:\/\/summersessions.net\/17-projects\/projects-2016\/55-emotion-hero\">Summer Sessions Network for Talent Development<\/a> in a co-production of Arquivo 237 and V2_ Lab for the Unstable Media, with support of the Creative Industries Fund NL.\nIt has been exhibited at the <a href=\"http:\/\/www.statefestival.org\/2016\/program-entry\/2016\/emotion-hero-2016\">State Festival 2016<\/a> (Berlin, DE) and Digital &lt;Dis&gt;orders (Frankfurt, DE).",
"url": "https:\/\/emotionhero.com",
"@reverse": {
"published": [
{
"@type": "PublicationEvent",
"name": "Mood Swings",
"location": {
"@type": "Place",
"name": "Q21",
"address": {
"@type": "PostalAddress",
"name": "Museums Quartier",
"addressCountry": {
"@type": "Country",
"name": "Austria"
},
"addressLocality": "Vienna"
}
},
"startDate": "2017-03-28",
"endDate": "2017-05-28",
"workFeatured": []
}
]
},
"image": [
{
"@type": "ImageObject",
"contentUrl": "assets\/image\/emotionhero1-2.jpg"
},
{
"@type": "ImageObject",
"contentUrl": "assets\/image\/emotionhero2.jpg"
}
]
},
{
"@type": "MediaObject",
"name": "We know how you feel",
"dateCreated": "2015-01-01",
"description": "A two-part artwork and my first work on software that derives emotional parameters from facial expressions. The first part displays the <em>Mind Reading Emotions Library<\/em>, an interactive collection of videos, audio fragments and scenes depicting 412 distinct emotions &mdash;ranging from `angry' to `unsure'&mdash; grouped in 24 categories. The second part of the project is a tablet with a modified demo app by Affectiva, a major player in the field of emotion analysis software. This app acts as an interactive mirror which displays the various parameters that the Affectiva software derives from someone's facial expression, while a voice over reads a text extracted from the Dutch classic <em>Beyond Sleep<\/em> by W.F. Hermans (1966), concerning the impact of the mirror, photography and video on the human self-image.\n\nIt was part of the exhibition <em><a href='http:\/\/v2.nl\/events\/an-encyclopedia-of-media-objects'>Encyclopedia Of Media Objects<\/a><\/em>, organised by the Piet Zwart Institute and held at the V2_ Institute for unstable media in June 2015.",
"image": [
{
"@type": "ImageObject",
"contentUrl": "assets\/image\/fragments-6-2.jpg",
"caption": "Fragments of reality"
},
{
"@type": "ImageObject",
"contentUrl": "assets\/image\/fragments-9-2.jpg",
"caption": "Fragments of reality"
},
{
"@type": "ImageObject",
"contentUrl": "assets\/image\/fragments-7-2.jpg",
"caption": "Fragments of reality"
}
]
}
]
},
{
"@type": "WebSite",
"url": "https:\/\/rubenvandeven.com",
"@context": "http:\/\/schema.org\/"
}
]
}
},
"hasPart": [
{
"@type": "MediaObject",
"name": "The Spectacular Times",
"dateCreated": "2013-12-04",
"contributor": {
"@type": "Person",
"name": "Ward Goes",
"url": "http:\/\/www.wardgoes.nl"
},
"description": "Originally initiated as a graduation project (cum laude) by Ward Goes, <a href=\"http:\/\/spectacularspectacular.news\">The Spectacular Times<\/a> is an ongoing visual inquiry into the presentation of news. It investigates how news, rather than being subjective, is representational of its social, cultural, (geo)political and ideological contexts. The project sets out to lay bare these representations in currently circulating news.\n\nBy layering and contrasting different news elements The Spectacular Times re-contextualises news and makes explicit the intangible notions that lie beyond an increasingly universal guise of news reporting. Not in an effort to tell apart true from false, left from right, or right from wrong, but in order to accentuate a variety of articulations of news.\n\nThis web based project uses user defined variables to animate news headers, texts and images, which are directly sourced from different news websites world wide. By adjusting these parameters (among which region, scope and speed) the spectator actively perceives how news content is de- and reformed through its aesthetics.",
"url": "http:\/\/spectacularspectacular.news",
"image": [
{
"@type": "ImageObject",
"contentUrl": "assets\/image\/times1.jpg",
"caption": "The Spectacular Times"
}
]
},
{
"@type": "MediaObject",
"name": "Fragments of reality",
"dateCreated": "2015-01-01",
"description": "In western society, images are generally perceived as objective traces of events. As evidence that things happened as how they are captured in the frame.\n\nAs Susan Sontag elaborates, this counts for photographic images in particular. They are seen, not as subjective statements about the world, but rather as pieces of it &mdash;as fragments of a reality. Photographic images are often seen as unbiased; they carry in them the \"burden of truth\". We use them to give meaning, to asses and to judge. It exactly is in this passivity of the image, that its aggression lurks.\nFragments of Reality is a newspaper that assembles descriptions of five images of one event: a press conference with Jeroen Dijsselbloem and Yanis Varoufakis. Each interviewee was shown one of the images, in an attempt to highlight how we read events trough photographs.\n\nIt considers an event not as a single factual moment, but as the cumulative of subjective experiences, inherently proposing that an image is always lacking in its representation of that which it presents.",
"image": [
{
"@type": "ImageObject",
"contentUrl": "assets\/image\/fragments-6-2.jpg",
"caption": "Fragments of reality"
},
{
"@type": "ImageObject",
"contentUrl": "assets\/image\/fragments-9-2.jpg",
"caption": "Fragments of reality"
},
{
"@type": "ImageObject",
"contentUrl": "assets\/image\/fragments-7-2.jpg",
"caption": "Fragments of reality"
}
]
}
]
},
{
"@type": "MediaObject",
"name": "Emotion Hero",
"description": "Emotion recognition software is being used both as a tool for \u2018objective\u2019 measurements as well as a tool for training one\u2019s facial expressions, eg. for job interviews. Emotion Hero is a literal translation of the paradoxical relation between these applications of the technology.\n\nEmotion Hero is a two-part artwork. On the one hand is a video-game that is freely downloadable for everybody with an Android device (see <a href=\"https:\/\/play.google.com\/store\/apps\/details?id=com.rubenvandeven.emotion_hero\">Google Play<\/a>). Inspired by Guitar Hero, the user scores points by following given cues. It provides detailed feedback on the mechanics of the face (eg. \u201cYou showed on 10% Joy when you had to show 100%, smile 99.32% more.\u201d), revealing that rather than being a window into the brain, the face is a controllable surface.\n\nThe second part is a projection that shows the aggregated scores of the game. In order to substantiate their discourse, companies in facial expression measurement employ a huge amount of data collection and processing. The results are displayed in a fixed grid, recalling historical practices that, trough extensive measurement and administration, also aimed to delineate something which is conceptually undelineated: think of Duchenne de Boulogne, Lombroso, and Charcot.\n\nEmotion Hero is a playful invitation to open up the box of expression analysis to reveal the assumptions that underlie this technology.\n\nThe game's emotional intelligence is powered by Affectiva (I was also <a href=\"http:\/\/blog.affectiva.com\/sdk-on-the-spot-emotion-hero-app-encourages-play-with-facial-expressions\">interviewed<\/a> by them). This project is produced as part of the <a href=\"http:\/\/summersessions.net\/17-projects\/projects-2016\/55-emotion-hero\">Summer Sessions Network for Talent Development<\/a> in a co-production of Arquivo 237 and V2_ Lab for the Unstable Media, with support of the Creative Industries Fund NL.\nIt has been exhibited at the <a href=\"http:\/\/www.statefestival.org\/2016\/program-entry\/2016\/emotion-hero-2016\">State Festival 2016<\/a> (Berlin, DE) and Digital &lt;Dis&gt;orders (Frankfurt, DE).",
"url": "https:\/\/emotionhero.com",
"@reverse": {
"published": [
{
"@type": "PublicationEvent",
"name": "Mood Swings",
"location": {
"@type": "Place",
"name": "Q21",
"address": {
"@type": "PostalAddress",
"name": "Museums Quartier",
"addressCountry": {
"@type": "Country",
"name": "Austria"
},
"addressLocality": "Vienna"
}
},
"startDate": "2017-03-28",
"endDate": "2017-05-28",
"workFeatured": []
}
]
},
"image": [
{
"@type": "ImageObject",
"contentUrl": "assets\/image\/emotionhero1-2.jpg"
},
{
"@type": "ImageObject",
"contentUrl": "assets\/image\/emotionhero2.jpg"
}
],
"isPartOf": {
"@type": "Series",
"name": "Digital Reflections",
"about": "lorem ipsum etc.",
"author": {
"@type": "Person",
"name": "Ruben van de Ven",
"email": "info@rubenvandeven.com",
"nationality": {
"@type": "Country",
"name": "Netherlands"
},
"@reverse": {
"author": [
{
"@type": "Series",
"name": "Real Media (working title)",
"about": "lorem ipsum etc.",
"hasPart": [
{
"@type": "MediaObject",
"name": "The Spectacular Times",
"dateCreated": "2013-12-04",
"contributor": {
"@type": "Person",
"name": "Ward Goes",
"url": "http:\/\/www.wardgoes.nl"
},
"description": "Originally initiated as a graduation project (cum laude) by Ward Goes, <a href=\"http:\/\/spectacularspectacular.news\">The Spectacular Times<\/a> is an ongoing visual inquiry into the presentation of news. It investigates how news, rather than being subjective, is representational of its social, cultural, (geo)political and ideological contexts. The project sets out to lay bare these representations in currently circulating news.\n\nBy layering and contrasting different news elements The Spectacular Times re-contextualises news and makes explicit the intangible notions that lie beyond an increasingly universal guise of news reporting. Not in an effort to tell apart true from false, left from right, or right from wrong, but in order to accentuate a variety of articulations of news.\n\nThis web based project uses user defined variables to animate news headers, texts and images, which are directly sourced from different news websites world wide. By adjusting these parameters (among which region, scope and speed) the spectator actively perceives how news content is de- and reformed through its aesthetics.",
"url": "http:\/\/spectacularspectacular.news",
"image": [
{
"@type": "ImageObject",
"contentUrl": "assets\/image\/times1.jpg",
"caption": "The Spectacular Times"
}
]
},
{
"@type": "MediaObject",
"name": "Fragments of reality",
"dateCreated": "2015-01-01",
"description": "In western society, images are generally perceived as objective traces of events. As evidence that things happened as how they are captured in the frame.\n\nAs Susan Sontag elaborates, this counts for photographic images in particular. They are seen, not as subjective statements about the world, but rather as pieces of it &mdash;as fragments of a reality. Photographic images are often seen as unbiased; they carry in them the \"burden of truth\". We use them to give meaning, to asses and to judge. It exactly is in this passivity of the image, that its aggression lurks.\nFragments of Reality is a newspaper that assembles descriptions of five images of one event: a press conference with Jeroen Dijsselbloem and Yanis Varoufakis. Each interviewee was shown one of the images, in an attempt to highlight how we read events trough photographs.\n\nIt considers an event not as a single factual moment, but as the cumulative of subjective experiences, inherently proposing that an image is always lacking in its representation of that which it presents.",
"image": [
{
"@type": "ImageObject",
"contentUrl": "assets\/image\/fragments-6-2.jpg",
"caption": "Fragments of reality"
},
{
"@type": "ImageObject",
"contentUrl": "assets\/image\/fragments-9-2.jpg",
"caption": "Fragments of reality"
},
{
"@type": "ImageObject",
"contentUrl": "assets\/image\/fragments-7-2.jpg",
"caption": "Fragments of reality"
}
]
}
]
},
{
"@type": "WebSite",
"url": "https:\/\/rubenvandeven.com",
"@context": "http:\/\/schema.org\/"
}
]
}
},
"hasPart": {
"1": {
"@type": "MediaObject",
"name": "We know how you feel",
"dateCreated": "2015-01-01",
"description": "A two-part artwork and my first work on software that derives emotional parameters from facial expressions. The first part displays the <em>Mind Reading Emotions Library<\/em>, an interactive collection of videos, audio fragments and scenes depicting 412 distinct emotions &mdash;ranging from `angry' to `unsure'&mdash; grouped in 24 categories. The second part of the project is a tablet with a modified demo app by Affectiva, a major player in the field of emotion analysis software. This app acts as an interactive mirror which displays the various parameters that the Affectiva software derives from someone's facial expression, while a voice over reads a text extracted from the Dutch classic <em>Beyond Sleep<\/em> by W.F. Hermans (1966), concerning the impact of the mirror, photography and video on the human self-image.\n\nIt was part of the exhibition <em><a href='http:\/\/v2.nl\/events\/an-encyclopedia-of-media-objects'>Encyclopedia Of Media Objects<\/a><\/em>, organised by the Piet Zwart Institute and held at the V2_ Institute for unstable media in June 2015.",
"image": [
{
"@type": "ImageObject",
"contentUrl": "assets\/image\/fragments-6-2.jpg",
"caption": "Fragments of reality"
},
{
"@type": "ImageObject",
"contentUrl": "assets\/image\/fragments-9-2.jpg",
"caption": "Fragments of reality"
},
{
"@type": "ImageObject",
"contentUrl": "assets\/image\/fragments-7-2.jpg",
"caption": "Fragments of reality"
}
]
}
}
}
},
{
"@type": "ImageObject",
"name": "EhImg1",
"contentUrl": "assets\/image\/emotionhero1-2.jpg"
},
{
"@type": "ImageObject",
"name": "EhImg2",
"contentUrl": "assets\/image\/emotionhero2.jpg"
},
{
"@type": "MediaObject",
"name": "The Spectacular Times",
"dateCreated": "2013-12-04",
"contributor": {
"@type": "Person",
"name": "Ward Goes",
"url": "http:\/\/www.wardgoes.nl"
},
"description": "Originally initiated as a graduation project (cum laude) by Ward Goes, <a href=\"http:\/\/spectacularspectacular.news\">The Spectacular Times<\/a> is an ongoing visual inquiry into the presentation of news. It investigates how news, rather than being subjective, is representational of its social, cultural, (geo)political and ideological contexts. The project sets out to lay bare these representations in currently circulating news.\n\nBy layering and contrasting different news elements The Spectacular Times re-contextualises news and makes explicit the intangible notions that lie beyond an increasingly universal guise of news reporting. Not in an effort to tell apart true from false, left from right, or right from wrong, but in order to accentuate a variety of articulations of news.\n\nThis web based project uses user defined variables to animate news headers, texts and images, which are directly sourced from different news websites world wide. By adjusting these parameters (among which region, scope and speed) the spectator actively perceives how news content is de- and reformed through its aesthetics.",
"url": "http:\/\/spectacularspectacular.news",
"image": [
{
"@type": "ImageObject",
"contentUrl": "assets\/image\/times1.jpg",
"caption": "The Spectacular Times"
}
],
"isPartOf": {
"@type": "Series",
"name": "Real Media (working title)",
"about": "lorem ipsum etc.",
"author": {
"@type": "Person",
"name": "Ruben van de Ven",
"email": "info@rubenvandeven.com",
"nationality": {
"@type": "Country",
"name": "Netherlands"
},
"@reverse": {
"author": [
{
"@type": "Series",
"name": "Digital Reflections",
"about": "lorem ipsum etc.",
"hasPart": [
{
"@type": "MediaObject",
"name": "Emotion Hero",
"description": "Emotion recognition software is being used both as a tool for \u2018objective\u2019 measurements as well as a tool for training one\u2019s facial expressions, eg. for job interviews. Emotion Hero is a literal translation of the paradoxical relation between these applications of the technology.\n\nEmotion Hero is a two-part artwork. On the one hand is a video-game that is freely downloadable for everybody with an Android device (see <a href=\"https:\/\/play.google.com\/store\/apps\/details?id=com.rubenvandeven.emotion_hero\">Google Play<\/a>). Inspired by Guitar Hero, the user scores points by following given cues. It provides detailed feedback on the mechanics of the face (eg. \u201cYou showed on 10% Joy when you had to show 100%, smile 99.32% more.\u201d), revealing that rather than being a window into the brain, the face is a controllable surface.\n\nThe second part is a projection that shows the aggregated scores of the game. In order to substantiate their discourse, companies in facial expression measurement employ a huge amount of data collection and processing. The results are displayed in a fixed grid, recalling historical practices that, trough extensive measurement and administration, also aimed to delineate something which is conceptually undelineated: think of Duchenne de Boulogne, Lombroso, and Charcot.\n\nEmotion Hero is a playful invitation to open up the box of expression analysis to reveal the assumptions that underlie this technology.\n\nThe game's emotional intelligence is powered by Affectiva (I was also <a href=\"http:\/\/blog.affectiva.com\/sdk-on-the-spot-emotion-hero-app-encourages-play-with-facial-expressions\">interviewed<\/a> by them). This project is produced as part of the <a href=\"http:\/\/summersessions.net\/17-projects\/projects-2016\/55-emotion-hero\">Summer Sessions Network for Talent Development<\/a> in a co-production of Arquivo 237 and V2_ Lab for the Unstable Media, with support of the Creative Industries Fund NL.\nIt has been exhibited at the <a href=\"http:\/\/www.statefestival.org\/2016\/program-entry\/2016\/emotion-hero-2016\">State Festival 2016<\/a> (Berlin, DE) and Digital &lt;Dis&gt;orders (Frankfurt, DE).",
"url": "https:\/\/emotionhero.com",
"@reverse": {
"published": [
{
"@type": "PublicationEvent",
"name": "Mood Swings",
"location": {
"@type": "Place",
"name": "Q21",
"address": {
"@type": "PostalAddress",
"name": "Museums Quartier",
"addressCountry": {
"@type": "Country",
"name": "Austria"
},
"addressLocality": "Vienna"
}
},
"startDate": "2017-03-28",
"endDate": "2017-05-28",
"workFeatured": []
}
]
},
"image": [
{
"@type": "ImageObject",
"contentUrl": "assets\/image\/emotionhero1-2.jpg"
},
{
"@type": "ImageObject",
"contentUrl": "assets\/image\/emotionhero2.jpg"
}
]
},
{
"@type": "MediaObject",
"name": "We know how you feel",
"dateCreated": "2015-01-01",
"description": "A two-part artwork and my first work on software that derives emotional parameters from facial expressions. The first part displays the <em>Mind Reading Emotions Library<\/em>, an interactive collection of videos, audio fragments and scenes depicting 412 distinct emotions &mdash;ranging from `angry' to `unsure'&mdash; grouped in 24 categories. The second part of the project is a tablet with a modified demo app by Affectiva, a major player in the field of emotion analysis software. This app acts as an interactive mirror which displays the various parameters that the Affectiva software derives from someone's facial expression, while a voice over reads a text extracted from the Dutch classic <em>Beyond Sleep<\/em> by W.F. Hermans (1966), concerning the impact of the mirror, photography and video on the human self-image.\n\nIt was part of the exhibition <em><a href='http:\/\/v2.nl\/events\/an-encyclopedia-of-media-objects'>Encyclopedia Of Media Objects<\/a><\/em>, organised by the Piet Zwart Institute and held at the V2_ Institute for unstable media in June 2015.",
"image": [
{
"@type": "ImageObject",
"contentUrl": "assets\/image\/fragments-6-2.jpg",
"caption": "Fragments of reality"
},
{
"@type": "ImageObject",
"contentUrl": "assets\/image\/fragments-9-2.jpg",
"caption": "Fragments of reality"
},
{
"@type": "ImageObject",
"contentUrl": "assets\/image\/fragments-7-2.jpg",
"caption": "Fragments of reality"
}
]
}
]
},
{
"@type": "WebSite",
"url": "https:\/\/rubenvandeven.com",
"@context": "http:\/\/schema.org\/"
}
]
}
},
"hasPart": {
"1": {
"@type": "MediaObject",
"name": "Fragments of reality",
"dateCreated": "2015-01-01",
"description": "In western society, images are generally perceived as objective traces of events. As evidence that things happened as how they are captured in the frame.\n\nAs Susan Sontag elaborates, this counts for photographic images in particular. They are seen, not as subjective statements about the world, but rather as pieces of it &mdash;as fragments of a reality. Photographic images are often seen as unbiased; they carry in them the \"burden of truth\". We use them to give meaning, to asses and to judge. It exactly is in this passivity of the image, that its aggression lurks.\nFragments of Reality is a newspaper that assembles descriptions of five images of one event: a press conference with Jeroen Dijsselbloem and Yanis Varoufakis. Each interviewee was shown one of the images, in an attempt to highlight how we read events trough photographs.\n\nIt considers an event not as a single factual moment, but as the cumulative of subjective experiences, inherently proposing that an image is always lacking in its representation of that which it presents.",
"image": [
{
"@type": "ImageObject",
"contentUrl": "assets\/image\/fragments-6-2.jpg",
"caption": "Fragments of reality"
},
{
"@type": "ImageObject",
"contentUrl": "assets\/image\/fragments-9-2.jpg",
"caption": "Fragments of reality"
},
{
"@type": "ImageObject",
"contentUrl": "assets\/image\/fragments-7-2.jpg",
"caption": "Fragments of reality"
}
]
}
}
}
},
{
"@type": "Person",
"name": "Ward Goes",
"url": "http:\/\/www.wardgoes.nl"
},
{
"@type": "ImageObject",
"contentUrl": "assets\/image\/times1.jpg",
"caption": "The Spectacular Times"
},
{
"@type": "MediaObject",
"name": "Fragments of reality",
"dateCreated": "2015-01-01",
"description": "In western society, images are generally perceived as objective traces of events. As evidence that things happened as how they are captured in the frame.\n\nAs Susan Sontag elaborates, this counts for photographic images in particular. They are seen, not as subjective statements about the world, but rather as pieces of it &mdash;as fragments of a reality. Photographic images are often seen as unbiased; they carry in them the \"burden of truth\". We use them to give meaning, to asses and to judge. It exactly is in this passivity of the image, that its aggression lurks.\nFragments of Reality is a newspaper that assembles descriptions of five images of one event: a press conference with Jeroen Dijsselbloem and Yanis Varoufakis. Each interviewee was shown one of the images, in an attempt to highlight how we read events trough photographs.\n\nIt considers an event not as a single factual moment, but as the cumulative of subjective experiences, inherently proposing that an image is always lacking in its representation of that which it presents.",
"image": [
{
"@type": "ImageObject",
"contentUrl": "assets\/image\/fragments-6-2.jpg",
"caption": "Fragments of reality"
},
{
"@type": "ImageObject",
"contentUrl": "assets\/image\/fragments-9-2.jpg",
"caption": "Fragments of reality"
},
{
"@type": "ImageObject",
"contentUrl": "assets\/image\/fragments-7-2.jpg",
"caption": "Fragments of reality"
}
],
"isPartOf": {
"@type": "Series",
"name": "Real Media (working title)",
"about": "lorem ipsum etc.",
"author": {
"@type": "Person",
"name": "Ruben van de Ven",
"email": "info@rubenvandeven.com",
"nationality": {
"@type": "Country",
"name": "Netherlands"
},
"@reverse": {
"author": [
{
"@type": "Series",
"name": "Digital Reflections",
"about": "lorem ipsum etc.",
"hasPart": [
{
"@type": "MediaObject",
"name": "Emotion Hero",
"description": "Emotion recognition software is being used both as a tool for \u2018objective\u2019 measurements as well as a tool for training one\u2019s facial expressions, eg. for job interviews. Emotion Hero is a literal translation of the paradoxical relation between these applications of the technology.\n\nEmotion Hero is a two-part artwork. On the one hand is a video-game that is freely downloadable for everybody with an Android device (see <a href=\"https:\/\/play.google.com\/store\/apps\/details?id=com.rubenvandeven.emotion_hero\">Google Play<\/a>). Inspired by Guitar Hero, the user scores points by following given cues. It provides detailed feedback on the mechanics of the face (eg. \u201cYou showed on 10% Joy when you had to show 100%, smile 99.32% more.\u201d), revealing that rather than being a window into the brain, the face is a controllable surface.\n\nThe second part is a projection that shows the aggregated scores of the game. In order to substantiate their discourse, companies in facial expression measurement employ a huge amount of data collection and processing. The results are displayed in a fixed grid, recalling historical practices that, trough extensive measurement and administration, also aimed to delineate something which is conceptually undelineated: think of Duchenne de Boulogne, Lombroso, and Charcot.\n\nEmotion Hero is a playful invitation to open up the box of expression analysis to reveal the assumptions that underlie this technology.\n\nThe game's emotional intelligence is powered by Affectiva (I was also <a href=\"http:\/\/blog.affectiva.com\/sdk-on-the-spot-emotion-hero-app-encourages-play-with-facial-expressions\">interviewed<\/a> by them). This project is produced as part of the <a href=\"http:\/\/summersessions.net\/17-projects\/projects-2016\/55-emotion-hero\">Summer Sessions Network for Talent Development<\/a> in a co-production of Arquivo 237 and V2_ Lab for the Unstable Media, with support of the Creative Industries Fund NL.\nIt has been exhibited at the <a href=\"http:\/\/www.statefestival.org\/2016\/program-entry\/2016\/emotion-hero-2016\">State Festival 2016<\/a> (Berlin, DE) and Digital &lt;Dis&gt;orders (Frankfurt, DE).",
"url": "https:\/\/emotionhero.com",
"@reverse": {
"published": [
{
"@type": "PublicationEvent",
"name": "Mood Swings",
"location": {
"@type": "Place",
"name": "Q21",
"address": {
"@type": "PostalAddress",
"name": "Museums Quartier",
"addressCountry": {
"@type": "Country",
"name": "Austria"
},
"addressLocality": "Vienna"
}
},
"startDate": "2017-03-28",
"endDate": "2017-05-28",
"workFeatured": []
}
]
},
"image": [
{
"@type": "ImageObject",
"contentUrl": "assets\/image\/emotionhero1-2.jpg"
},
{
"@type": "ImageObject",
"contentUrl": "assets\/image\/emotionhero2.jpg"
}
]
},
{
"@type": "MediaObject",
"name": "We know how you feel",
"dateCreated": "2015-01-01",
"description": "A two-part artwork and my first work on software that derives emotional parameters from facial expressions. The first part displays the <em>Mind Reading Emotions Library<\/em>, an interactive collection of videos, audio fragments and scenes depicting 412 distinct emotions &mdash;ranging from `angry' to `unsure'&mdash; grouped in 24 categories. The second part of the project is a tablet with a modified demo app by Affectiva, a major player in the field of emotion analysis software. This app acts as an interactive mirror which displays the various parameters that the Affectiva software derives from someone's facial expression, while a voice over reads a text extracted from the Dutch classic <em>Beyond Sleep<\/em> by W.F. Hermans (1966), concerning the impact of the mirror, photography and video on the human self-image.\n\nIt was part of the exhibition <em><a href='http:\/\/v2.nl\/events\/an-encyclopedia-of-media-objects'>Encyclopedia Of Media Objects<\/a><\/em>, organised by the Piet Zwart Institute and held at the V2_ Institute for unstable media in June 2015.",
"image": [
{
"@type": "ImageObject",
"contentUrl": "assets\/image\/fragments-6-2.jpg",
"caption": "Fragments of reality"
},
{
"@type": "ImageObject",
"contentUrl": "assets\/image\/fragments-9-2.jpg",
"caption": "Fragments of reality"
},
{
"@type": "ImageObject",
"contentUrl": "assets\/image\/fragments-7-2.jpg",
"caption": "Fragments of reality"
}
]
}
]
},
{
"@type": "WebSite",
"url": "https:\/\/rubenvandeven.com",
"@context": "http:\/\/schema.org\/"
}
]
}
},
"hasPart": [
{
"@type": "MediaObject",
"name": "The Spectacular Times",
"dateCreated": "2013-12-04",
"contributor": {
"@type": "Person",
"name": "Ward Goes",
"url": "http:\/\/www.wardgoes.nl"
},
"description": "Originally initiated as a graduation project (cum laude) by Ward Goes, <a href=\"http:\/\/spectacularspectacular.news\">The Spectacular Times<\/a> is an ongoing visual inquiry into the presentation of news. It investigates how news, rather than being subjective, is representational of its social, cultural, (geo)political and ideological contexts. The project sets out to lay bare these representations in currently circulating news.\n\nBy layering and contrasting different news elements The Spectacular Times re-contextualises news and makes explicit the intangible notions that lie beyond an increasingly universal guise of news reporting. Not in an effort to tell apart true from false, left from right, or right from wrong, but in order to accentuate a variety of articulations of news.\n\nThis web based project uses user defined variables to animate news headers, texts and images, which are directly sourced from different news websites world wide. By adjusting these parameters (among which region, scope and speed) the spectator actively perceives how news content is de- and reformed through its aesthetics.",
"url": "http:\/\/spectacularspectacular.news",
"image": [
{
"@type": "ImageObject",
"contentUrl": "assets\/image\/times1.jpg",
"caption": "The Spectacular Times"
}
]
}
]
}
},
{
"@type": "ImageObject",
"name": "FragImg1",
"contentUrl": "assets\/image\/fragments-6-2.jpg",
"caption": "Fragments of reality"
},
{
"@type": "ImageObject",
"name": "FragImg2",
"contentUrl": "assets\/image\/fragments-9-2.jpg",
"caption": "Fragments of reality"
},
{
"@type": "ImageObject",
"name": "FragImg3",
"contentUrl": "assets\/image\/fragments-7-2.jpg",
"caption": "Fragments of reality"
},
{
"@type": "MediaObject",
"name": "We know how you feel",
"dateCreated": "2015-01-01",
"description": "A two-part artwork and my first work on software that derives emotional parameters from facial expressions. The first part displays the <em>Mind Reading Emotions Library<\/em>, an interactive collection of videos, audio fragments and scenes depicting 412 distinct emotions &mdash;ranging from `angry' to `unsure'&mdash; grouped in 24 categories. The second part of the project is a tablet with a modified demo app by Affectiva, a major player in the field of emotion analysis software. This app acts as an interactive mirror which displays the various parameters that the Affectiva software derives from someone's facial expression, while a voice over reads a text extracted from the Dutch classic <em>Beyond Sleep<\/em> by W.F. Hermans (1966), concerning the impact of the mirror, photography and video on the human self-image.\n\nIt was part of the exhibition <em><a href='http:\/\/v2.nl\/events\/an-encyclopedia-of-media-objects'>Encyclopedia Of Media Objects<\/a><\/em>, organised by the Piet Zwart Institute and held at the V2_ Institute for unstable media in June 2015.",
"image": [
{
"@type": "ImageObject",
"contentUrl": "assets\/image\/fragments-6-2.jpg",
"caption": "Fragments of reality"
},
{
"@type": "ImageObject",
"contentUrl": "assets\/image\/fragments-9-2.jpg",
"caption": "Fragments of reality"
},
{
"@type": "ImageObject",
"contentUrl": "assets\/image\/fragments-7-2.jpg",
"caption": "Fragments of reality"
}
],
"isPartOf": {
"@type": "Series",
"name": "Digital Reflections",
"about": "lorem ipsum etc.",
"author": {
"@type": "Person",
"name": "Ruben van de Ven",
"email": "info@rubenvandeven.com",
"nationality": {
"@type": "Country",
"name": "Netherlands"
},
"@reverse": {
"author": [
{
"@type": "Series",
"name": "Real Media (working title)",
"about": "lorem ipsum etc.",
"hasPart": [
{
"@type": "MediaObject",
"name": "The Spectacular Times",
"dateCreated": "2013-12-04",
"contributor": {
"@type": "Person",
"name": "Ward Goes",
"url": "http:\/\/www.wardgoes.nl"
},
"description": "Originally initiated as a graduation project (cum laude) by Ward Goes, <a href=\"http:\/\/spectacularspectacular.news\">The Spectacular Times<\/a> is an ongoing visual inquiry into the presentation of news. It investigates how news, rather than being subjective, is representational of its social, cultural, (geo)political and ideological contexts. The project sets out to lay bare these representations in currently circulating news.\n\nBy layering and contrasting different news elements The Spectacular Times re-contextualises news and makes explicit the intangible notions that lie beyond an increasingly universal guise of news reporting. Not in an effort to tell apart true from false, left from right, or right from wrong, but in order to accentuate a variety of articulations of news.\n\nThis web based project uses user defined variables to animate news headers, texts and images, which are directly sourced from different news websites world wide. By adjusting these parameters (among which region, scope and speed) the spectator actively perceives how news content is de- and reformed through its aesthetics.",
"url": "http:\/\/spectacularspectacular.news",
"image": [
{
"@type": "ImageObject",
"contentUrl": "assets\/image\/times1.jpg",
"caption": "The Spectacular Times"
}
]
},
{
"@type": "MediaObject",
"name": "Fragments of reality",
"dateCreated": "2015-01-01",
"description": "In western society, images are generally perceived as objective traces of events. As evidence that things happened as how they are captured in the frame.\n\nAs Susan Sontag elaborates, this counts for photographic images in particular. They are seen, not as subjective statements about the world, but rather as pieces of it &mdash;as fragments of a reality. Photographic images are often seen as unbiased; they carry in them the \"burden of truth\". We use them to give meaning, to asses and to judge. It exactly is in this passivity of the image, that its aggression lurks.\nFragments of Reality is a newspaper that assembles descriptions of five images of one event: a press conference with Jeroen Dijsselbloem and Yanis Varoufakis. Each interviewee was shown one of the images, in an attempt to highlight how we read events trough photographs.\n\nIt considers an event not as a single factual moment, but as the cumulative of subjective experiences, inherently proposing that an image is always lacking in its representation of that which it presents.",
"image": [
{
"@type": "ImageObject",
"contentUrl": "assets\/image\/fragments-6-2.jpg",
"caption": "Fragments of reality"
},
{
"@type": "ImageObject",
"contentUrl": "assets\/image\/fragments-9-2.jpg",
"caption": "Fragments of reality"
},
{
"@type": "ImageObject",
"contentUrl": "assets\/image\/fragments-7-2.jpg",
"caption": "Fragments of reality"
}
]
}
]
},
{
"@type": "WebSite",
"url": "https:\/\/rubenvandeven.com",
"@context": "http:\/\/schema.org\/"
}
]
}
},
"hasPart": [
{
"@type": "MediaObject",
"name": "Emotion Hero",
"description": "Emotion recognition software is being used both as a tool for \u2018objective\u2019 measurements as well as a tool for training one\u2019s facial expressions, eg. for job interviews. Emotion Hero is a literal translation of the paradoxical relation between these applications of the technology.\n\nEmotion Hero is a two-part artwork. On the one hand is a video-game that is freely downloadable for everybody with an Android device (see <a href=\"https:\/\/play.google.com\/store\/apps\/details?id=com.rubenvandeven.emotion_hero\">Google Play<\/a>). Inspired by Guitar Hero, the user scores points by following given cues. It provides detailed feedback on the mechanics of the face (eg. \u201cYou showed on 10% Joy when you had to show 100%, smile 99.32% more.\u201d), revealing that rather than being a window into the brain, the face is a controllable surface.\n\nThe second part is a projection that shows the aggregated scores of the game. In order to substantiate their discourse, companies in facial expression measurement employ a huge amount of data collection and processing. The results are displayed in a fixed grid, recalling historical practices that, trough extensive measurement and administration, also aimed to delineate something which is conceptually undelineated: think of Duchenne de Boulogne, Lombroso, and Charcot.\n\nEmotion Hero is a playful invitation to open up the box of expression analysis to reveal the assumptions that underlie this technology.\n\nThe game's emotional intelligence is powered by Affectiva (I was also <a href=\"http:\/\/blog.affectiva.com\/sdk-on-the-spot-emotion-hero-app-encourages-play-with-facial-expressions\">interviewed<\/a> by them). This project is produced as part of the <a href=\"http:\/\/summersessions.net\/17-projects\/projects-2016\/55-emotion-hero\">Summer Sessions Network for Talent Development<\/a> in a co-production of Arquivo 237 and V2_ Lab for the Unstable Media, with support of the Creative Industries Fund NL.\nIt has been exhibited at the <a href=\"http:\/\/www.statefestival.org\/2016\/program-entry\/2016\/emotion-hero-2016\">State Festival 2016<\/a> (Berlin, DE) and Digital &lt;Dis&gt;orders (Frankfurt, DE).",
"url": "https:\/\/emotionhero.com",
"@reverse": {
"published": [
{
"@type": "PublicationEvent",
"name": "Mood Swings",
"location": {
"@type": "Place",
"name": "Q21",
"address": {
"@type": "PostalAddress",
"name": "Museums Quartier",
"addressCountry": {
"@type": "Country",
"name": "Austria"
},
"addressLocality": "Vienna"
}
},
"startDate": "2017-03-28",
"endDate": "2017-05-28",
"workFeatured": []
}
]
},
"image": [
{
"@type": "ImageObject",
"contentUrl": "assets\/image\/emotionhero1-2.jpg"
},
{
"@type": "ImageObject",
"contentUrl": "assets\/image\/emotionhero2.jpg"
}
]
}
]
}
},
{
"@type": "ImageObject",
"contentUrl": "assets\/image\/fragments-6-2.jpg",
"caption": "Fragments of reality"
},
{
"@type": "ImageObject",
"contentUrl": "assets\/image\/fragments-9-2.jpg",
"caption": "Fragments of reality"
},
{
"@type": "ImageObject",
"contentUrl": "assets\/image\/fragments-7-2.jpg",
"caption": "Fragments of reality"
},
{
"@type": "PublicationEvent",
"name": "Codes & Modes II",
"location": {
"@type": "Place",
"name": "Q21",
"address": {
"@type": "PostalAddress",
"name": "Museums Quartier",
"addressCountry": {
"@type": "Country",
"name": "Austria"
},
"addressLocality": "Vienna"
}
},
"startDate": "2017-03-16",
"endDate": "2017-03-18",
},
{
"@type": "PublicationEvent",
"name": "Mood Swings",
"location": {
"@type": "Place",
"name": "Q21",
"address": {
"@type": "PostalAddress",
"name": "Museums Quartier",
"addressCountry": {
"@type": "Country",
"name": "Austria"
},
"addressLocality": "Vienna"
}
},
"startDate": "2017-03-28",
"endDate": "2017-05-28",
"workFeatured": [
{
"@type": "MediaObject",
"name": "Emotion Hero",
"description": "Emotion recognition software is being used both as a tool for \u2018objective\u2019 measurements as well as a tool for training one\u2019s facial expressions, eg. for job interviews. Emotion Hero is a literal translation of the paradoxical relation between these applications of the technology.\n\nEmotion Hero is a two-part artwork. On the one hand is a video-game that is freely downloadable for everybody with an Android device (see <a href=\"https:\/\/play.google.com\/store\/apps\/details?id=com.rubenvandeven.emotion_hero\">Google Play<\/a>). Inspired by Guitar Hero, the user scores points by following given cues. It provides detailed feedback on the mechanics of the face (eg. \u201cYou showed on 10% Joy when you had to show 100%, smile 99.32% more.\u201d), revealing that rather than being a window into the brain, the face is a controllable surface.\n\nThe second part is a projection that shows the aggregated scores of the game. In order to substantiate their discourse, companies in facial expression measurement employ a huge amount of data collection and processing. The results are displayed in a fixed grid, recalling historical practices that, trough extensive measurement and administration, also aimed to delineate something which is conceptually undelineated: think of Duchenne de Boulogne, Lombroso, and Charcot.\n\nEmotion Hero is a playful invitation to open up the box of expression analysis to reveal the assumptions that underlie this technology.\n\nThe game's emotional intelligence is powered by Affectiva (I was also <a href=\"http:\/\/blog.affectiva.com\/sdk-on-the-spot-emotion-hero-app-encourages-play-with-facial-expressions\">interviewed<\/a> by them). This project is produced as part of the <a href=\"http:\/\/summersessions.net\/17-projects\/projects-2016\/55-emotion-hero\">Summer Sessions Network for Talent Development<\/a> in a co-production of Arquivo 237 and V2_ Lab for the Unstable Media, with support of the Creative Industries Fund NL.\nIt has been exhibited at the <a href=\"http:\/\/www.statefestival.org\/2016\/program-entry\/2016\/emotion-hero-2016\">State Festival 2016<\/a> (Berlin, DE) and Digital &lt;Dis&gt;orders (Frankfurt, DE).",
"url": "https:\/\/emotionhero.com",
"@reverse": {
"published": []
},
"image": [
{
"@type": "ImageObject",
"contentUrl": "assets\/image\/emotionhero1-2.jpg"
},
{
"@type": "ImageObject",
"contentUrl": "assets\/image\/emotionhero2.jpg"
}
],
"isPartOf": {
"@type": "Series",
"name": "Digital Reflections",
"about": "lorem ipsum etc.",
"author": {
"@type": "Person",
"name": "Ruben van de Ven",
"email": "info@rubenvandeven.com",
"nationality": {
"@type": "Country",
"name": "Netherlands"
},
"@reverse": {
"author": [
{
"@type": "Series",
"name": "Real Media (working title)",
"about": "lorem ipsum etc.",
"hasPart": [
{
"@type": "MediaObject",
"name": "The Spectacular Times",
"dateCreated": "2013-12-04",
"contributor": {
"@type": "Person",
"name": "Ward Goes",
"url": "http:\/\/www.wardgoes.nl"
},
"description": "Originally initiated as a graduation project (cum laude) by Ward Goes, <a href=\"http:\/\/spectacularspectacular.news\">The Spectacular Times<\/a> is an ongoing visual inquiry into the presentation of news. It investigates how news, rather than being subjective, is representational of its social, cultural, (geo)political and ideological contexts. The project sets out to lay bare these representations in currently circulating news.\n\nBy layering and contrasting different news elements The Spectacular Times re-contextualises news and makes explicit the intangible notions that lie beyond an increasingly universal guise of news reporting. Not in an effort to tell apart true from false, left from right, or right from wrong, but in order to accentuate a variety of articulations of news.\n\nThis web based project uses user defined variables to animate news headers, texts and images, which are directly sourced from different news websites world wide. By adjusting these parameters (among which region, scope and speed) the spectator actively perceives how news content is de- and reformed through its aesthetics.",
"url": "http:\/\/spectacularspectacular.news",
"image": [
{
"@type": "ImageObject",
"contentUrl": "assets\/image\/times1.jpg",
"caption": "The Spectacular Times"
}
]
},
{
"@type": "MediaObject",
"name": "Fragments of reality",
"dateCreated": "2015-01-01",
"description": "In western society, images are generally perceived as objective traces of events. As evidence that things happened as how they are captured in the frame.\n\nAs Susan Sontag elaborates, this counts for photographic images in particular. They are seen, not as subjective statements about the world, but rather as pieces of it &mdash;as fragments of a reality. Photographic images are often seen as unbiased; they carry in them the \"burden of truth\". We use them to give meaning, to asses and to judge. It exactly is in this passivity of the image, that its aggression lurks.\nFragments of Reality is a newspaper that assembles descriptions of five images of one event: a press conference with Jeroen Dijsselbloem and Yanis Varoufakis. Each interviewee was shown one of the images, in an attempt to highlight how we read events trough photographs.\n\nIt considers an event not as a single factual moment, but as the cumulative of subjective experiences, inherently proposing that an image is always lacking in its representation of that which it presents.",
"image": [
{
"@type": "ImageObject",
"contentUrl": "assets\/image\/fragments-6-2.jpg",
"caption": "Fragments of reality"
},
{
"@type": "ImageObject",
"contentUrl": "assets\/image\/fragments-9-2.jpg",
"caption": "Fragments of reality"
},
{
"@type": "ImageObject",
"contentUrl": "assets\/image\/fragments-7-2.jpg",
"caption": "Fragments of reality"
}
]
}
]
},
{
"@type": "WebSite",
"url": "https:\/\/rubenvandeven.com",
"@context": "http:\/\/schema.org\/"
}
]
}
},
"hasPart": {
"1": {
"@type": "MediaObject",
"name": "We know how you feel",
"dateCreated": "2015-01-01",
"description": "A two-part artwork and my first work on software that derives emotional parameters from facial expressions. The first part displays the <em>Mind Reading Emotions Library<\/em>, an interactive collection of videos, audio fragments and scenes depicting 412 distinct emotions &mdash;ranging from `angry' to `unsure'&mdash; grouped in 24 categories. The second part of the project is a tablet with a modified demo app by Affectiva, a major player in the field of emotion analysis software. This app acts as an interactive mirror which displays the various parameters that the Affectiva software derives from someone's facial expression, while a voice over reads a text extracted from the Dutch classic <em>Beyond Sleep<\/em> by W.F. Hermans (1966), concerning the impact of the mirror, photography and video on the human self-image.\n\nIt was part of the exhibition <em><a href='http:\/\/v2.nl\/events\/an-encyclopedia-of-media-objects'>Encyclopedia Of Media Objects<\/a><\/em>, organised by the Piet Zwart Institute and held at the V2_ Institute for unstable media in June 2015.",
"image": [
{
"@type": "ImageObject",
"contentUrl": "assets\/image\/fragments-6-2.jpg",
"caption": "Fragments of reality"
},
{
"@type": "ImageObject",
"contentUrl": "assets\/image\/fragments-9-2.jpg",
"caption": "Fragments of reality"
},
{
"@type": "ImageObject",
"contentUrl": "assets\/image\/fragments-7-2.jpg",
"caption": "Fragments of reality"
}
]
}
}
}
}
]
},
{
"@type": "Place",
"name": "Q21",
"address": {
"@type": "PostalAddress",
"name": "Museums Quartier",
"addressCountry": {
"@type": "Country",
"name": "Austria"
},
"addressLocality": "Vienna"
}
},
{
"@type": "PostalAddress",
"name": "Museums Quartier",
"addressCountry": {
"@type": "Country",
"name": "Austria"
},
"addressLocality": "Vienna"
},
{
"@type": "Country",
"name": "Austria"
}
],
"links": [
{
"source": "Ruben van de Ven",
"target": "Netherlands",
"name": "nationality"
},
// {
// "source": "Ruben van de Ven",
// "target": "Digital Reflections",
// "name": "authorOf"
// },
// {
// "source": "Ruben van de Ven",
// "target": "Real Media (working title)",
// "name": "authorOf"
// },
{
"source": "https:\/\/rubenvandeven.com",
"target": "Ruben van de Ven",
"name": "author"
},
{
"source": "Digital Reflections",
"target": "Ruben van de Ven",
"name": "author"
},
// {
// "source": "Digital Reflections",
// "target": "Emotion Hero",
// "name": "hasPart"
// },
// {
// "source": "Digital Reflections",
// "target": "We know how you feel",
// "name": "hasPart"
// },
{
"source": "Real Media (working title)",
"target": "Ruben van de Ven",
"name": "author"
},
// {
// "source": "Real Media (working title)",
// "target": "The Spectacular Times",
// "name": "hasPart"
// },
// {
// "source": "Real Media (working title)",
// "target": "Fragments of reality",
// "name": "hasPart"
// },
{
"source": "Emotion Hero",
"target": "Digital Reflections",
"name": "isPartOf"
},
{
"source": "Emotion Hero",
"target": "Mood Swings",
"name": "publishedAt"
},
{
"source": "Emotion Hero",
"target": "Codes & Modes II",
"name": "publishedAt"
},
{
"source": "We know how you feel",
"target": "Codes & Modes II",
"name": "publishedAt"
},
{
"source": "The Spectacular Times",
"target": "Ward Goes",
"name": "contributor"
},
{
"source": "Fragments of reality",
"target": "FragImg1",
"name": "image"
},
{
"source": "Fragments of reality",
"target": "FragImg2",
"name": "image"
},
{
"source": "Fragments of reality",
"target": "FragImg3",
"name": "image"
},
{
"source": "Emotion Hero",
"target": "EhImg1",
"name": "image"
},
{
"source": "Emotion Hero",
"target": "EhImg2",
"name": "image"
},
{
"source": "The Spectacular Times",
"target": "Real Media (working title)",
"name": "isPartOf"
},
{
"source": "Fragments of reality",
"target": "Real Media (working title)",
"name": "isPartOf"
},
{
"source": "We know how you feel",
"target": "Digital Reflections",
"name": "isPartOf"
},
{
"source": "Mood Swings",
"target": "Q21",
"name": "location"
},
// {
// "source": "Mood Swings",
// "target": "Emotion Hero",
// "name": "workFeatured"
// },
{
"source": "Q21",
"target": "Museums Quartier",
"name": "address"
},
{
"source": "Museums Quartier",
"target": "Austria",
"name": "addressCountry"
}
]
};
</script>
<script type="text/javascript" src="d3.min.js"></script>
<script>
var nodeSize = 40;
var selectedNodeSize = 140;
var currentNodeIdx = 0;
var nodePositions = {};
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
var simulation = d3.forceSimulation()
.force("link", d3.forceLink().id(function(d) { return d.name; }).strength(1))
.force("charge", d3.forceManyBody()) // doesn't seem necessary?
.force("collision", d3.forceCollide(nodeSize * 1.1)) // avoid overlapping nodes
// .force("center", d3.forceCenter(width / 2, height / 2)) // position around center
// .force("x", d3.forceX())
// .force("y", d3.forceY())
// .force("y", d3.forceY())
;
var link = svg.append("g")
.attr("class", "links")
.selectAll(".relationship")
.data(graph.links)
.enter().append("g")
.attr("class", function(d){return "relationship "+d.name;})
;
linkLine = link
// .append("line");
.append("line").attr("marker-end", "url(#arrowHead)")
;
linkText = link
.append("text")
.text(function(d){return d.name.replace(/(?:^|\.?)([A-Z])/g, function (x,y){return "_" + y.toLowerCase()}).replace(/^_/, "");})
;
var node = svg.append("g")
.attr("class", "nodes")
.selectAll(".node")
.data(graph.nodes)
.enter().append("g")
.attr("class", function(d) { return 'node ' + d['@type']; })
;
var positionNodesInCenter = function(idxs) {
let viewBox = svg.attr("viewBox").split(" ").map(parseFloat);
let cx = viewBox[0] + viewBox[2]/2;
let cy = viewBox[1] + viewBox[3]/2;
nodePositions = {}; // reset
if(typeof idxs == "object") {
// array or object -> each
}
else{
nodePositions[idxs] = [
cx,
cy
];
}
}
d3Selection="";
var selectedNodeTransition = d3.transition()
.duration(750)
.ease(d3.easeLinear);
/**
* Select a node, and center it + show details
* @param int idx The index of the node in the graph.nodes array
* @param Element|null nodeEl Optional, provide node element, so loop doesn't have to be used to change the Element
* @return void
*/
var selectNode = function(idx){
let nodeEl = null;
let nodeDatum = null;
node.each(function(d,nIdx,nodeEls){
if(nIdx == idx) {
nodeEl = nodeEls[idx];
nodeDatum = d;
}
});
if(!nodeEl) {
return;
}
// set global var
positionNodesInCenter(idx);
// restart animation (they call that 'alpha' in d3 force)
simulation.alpha(1);
// update collision: the selected node should get plenty of space.
simulation.force("collision").radius(function(d, idx){
if(typeof nodePositions[idx] != 'undefined'){
return selectedNodeSize * 1.2;
}
return nodeSize * 1.1;
});
node.each(function(d, idx, nodeEls){
let nodeEl = nodeEls[idx];
let nodeD3 = d3.select(nodeEl);
let circleD3 = nodeD3.select('circle');
if(typeof nodePositions[idx] !== 'undefined') {
circleD3.transition(selectedNodeTransition).attr('r', selectedNodeSize);
// nodeEl.getElementsByTagName("circle")[0].attributes.r.value = selectedNodeSize;
} else {
circleD3.transition(selectedNodeTransition).attr('r', nodeSize);
// nodeEl.getElementsByTagName("circle")[0].attributes.r.value = nodeSize;
}
});
link.each(function(d,idx,linkEls){
// console.log(a,b,c);
if(d.source == nodeDatum || d.target == nodeDatum) {
linkEls[idx].classList.add('activeLink');
} else {
linkEls[idx].classList.remove('activeLink');
}
});
}
simulation.force('centerActive', function force(alpha) {
// let currentNode = node.selectAll('.detail');
// console.log(currentNode);
node.each(function(d, idx, nodes){
if(typeof nodePositions[idx] != 'undefined') {
let n = d;
let k = alpha * 0.1;
n.vx -= (n.x - nodePositions[idx][0]) * k * 4;
n.vy -= (n.y - nodePositions[idx][1]) * k * 4;
}
});
});
//path to curve the tile
nodePath = node.append("path")
.attr("id", function(d,idx){return "nodePath"+idx;})
.attr("d", function(){
var r = nodeSize * 0.9;
var startX = nodeSize;
// M cx cy
// m -r, 0
// a r,r 0 1,0 (r * 2),0
// a r,r 0 1,0 -(r * 2),0
// return 'M' + nodeSize/2 + ' ' + nodeSize/2 + ' ' +
return 'M' + 0 + ' ' + 0 + ' ' +
'm -' + r + ', 0'+' ' +
'a ' + r +','+r+' 0 1,0 '+ (r*2) +',0 '+
'a ' + r +','+r+' 0 1,0 -'+ (r*2) +',0'
;
// return 'm' + startX + ',' + nodeSize + ' ' +
// 'a' + r + ',' + r + ' 0 0 0 ' + (2*r) + ',0';
})
;
node.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.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');
}
});
svg.call(d3.drag()
.on("start", function(){
svg.node().classList.add("dragging");
})
.on("drag", function(){
moveViewboxPx(d3.event.dx, d3.event.dy);
})
.on("end", function(){
svg.node().classList.remove("dragging");
}));
node.append('circle')
.attr("r", nodeSize)
;
node.append('text')
.append("textPath")
.attr( "xlink:href",function(d, idx){return '#nodePath'+idx;})
.text(function(d){return d['name'];});
node.each(function(d) {
console.log(d.contentUrl)
if(!d.contentUrl) {
return;
}
d3.select(this).append('svg:image')
.attr("xlink:href", d.contentUrl)
.attr("width", nodeSize*2)
.attr("height", nodeSize*2)
.attr("transform","translate(-"+nodeSize+" -"+nodeSize+")")
.attr("clip-path","url(#clipNodeImage)")
.attr("preserveAspectRatio","xMidYMid slice")
;
});
// node.append("title")
// .text(function(d) { return d.id; });
simulation
.nodes(graph.nodes)
.on("tick", ticked);
simulation.force("link")
.links(graph.links)
.distance(function(l){
switch (l.name) {
case 'publishedAt':
return 400;
case 'image':
return 100;
default:
return 200;
}
}) // distance between the nodes / link length
// .charge(-100)
;
// run on each draw
function ticked() {
graph.nodes.forEach(function (d, idx) {
d.leftX = d.rightX = d.x;
// fix first node on center
// if(idx === 0) {
// d.fx = width/2;
// d.fy = height/2;
// return;
// }
});
linkLine.each(function (d) {
var sourceX, targetX, midX, dy, dy, angle;
// This mess makes the arrows exactly perfect.
// thanks to http://bl.ocks.org/curran/9b73eb564c1c8a3d8f3ab207de364bf4
if( d.source.rightX < d.target.leftX ){
sourceX = d.source.rightX;
targetX = d.target.leftX;
} else if( d.target.rightX < d.source.leftX ){
targetX = d.target.rightX;
sourceX = d.source.leftX;
} else if (d.target.isCircle) {
targetX = sourceX = d.target.x;
} else if (d.source.isCircle) {
targetX = sourceX = d.source.x;
} else {
midX = (d.source.x + d.target.x) / 2;
if(midX > d.target.rightX){
midX = d.target.rightX;
} else if(midX > d.source.rightX){
midX = d.source.rightX;
} else if(midX < d.target.leftX){
midX = d.target.leftX;
} else if(midX < d.source.leftX){
midX = d.source.leftX;
}
targetX = sourceX = midX;
}
dx = targetX - sourceX;
dy = d.target.y - d.source.y;
angle = Math.atan2(dx, dy);
srcSize = (typeof nodePositions[d.source.index] != 'undefined') ? selectedNodeSize : nodeSize;
tgtSize = (typeof nodePositions[d.target.index] != 'undefined') ? selectedNodeSize : nodeSize;
// Compute the line endpoint such that the arrow
// is touching the edge of the node rectangle perfectly.
d.sourceX = sourceX + Math.sin(angle) * srcSize;
d.targetX = targetX - Math.sin(angle) * tgtSize;
d.sourceY = d.source.y + Math.cos(angle) * srcSize;
d.targetY = d.target.y - Math.cos(angle) * tgtSize;
})
.attr("x1", function(d) { return d.sourceX; })
.attr("y1", function(d) { return d.sourceY; })
.attr("x2", function(d) { return d.targetX; })
.attr("y2", function(d) { return d.targetY; });
linkText.attr("transform", function(d){
let dx = (d.target.x - d.source.x) /2;
let dy = (d.target.y - d.source.y) /2;
let x = d.source.x + dx;
let y = d.source.y + dy;
let deg = Math.atan(dy / dx) * 180 / Math.PI;
return "translate("+x+" "+y+") rotate("+deg+") translate(0, -10)";
});
// linkPath.attr("d", function(d) {
// var x1 = d.source.x,
// y1 = d.source.y,
// x2 = d.target.x,
// y2 = d.target.y,
// dx = x2 - x1,
// dy = y2 - y1,
// dr = Math.sqrt(dx * dx + dy * dy),
// // Defaults for normal edge.
// drx = dr,
// dry = dr,
// xRotation = 0, // degrees
// largeArc = 0, // 1 or 0
// sweep = 1; // 1 or 0
// // Self edge.
// if ( x1 === x2 && y1 === y2 ) {
// // Fiddle with this angle to get loop oriented.
// xRotation = -45;
// // Needs to be 1.
// largeArc = 1;
// // Change sweep to change orientation of loop.
// //sweep = 0;
// // Make drx and dry different to get an ellipse
// // instead of a circle.
// drx = 30;
// dry = 20;
// // For whatever reason the arc collapses to a point if the beginning
// // and ending points of the arc are the same, so kludge it.
// x2 = x2 + 1;
// y2 = y2 + 1;
// }
// return "M" + x1 + "," + y1 + "A" + drx + "," + dry + " " + xRotation + "," + largeArc + "," + sweep + " " + x2 + "," + y2;
// });
node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
}
function dragstarted(d,idx,nodes) {
if (!d3.event.active) simulation.alphaTarget(0.3).restart();
let nodeEl = nodes[idx];
d.fx = d.x;
d.fy = d.y;
// nodeEl.style.fill = '#00f';
nodeEl.classList.add('drag');
}
// use to validate drag
// function validate(x, a, b) {
// if (x =< a) return a;
// return b;
// }
function dragged(d, idx) {
d.fx = d3.event.x;
d.fy = d3.event.y;
}
function dragended(d, idx, nodes) {
if (!d3.event.active) simulation.alphaTarget(0);
let nodeEl = nodes[idx];
d.fx = null;
d.fy = null;
nodeEl.classList.remove('drag');
}
function moveViewboxPx(dx, dy){
let viewBox = svg.attr("viewBox").split(" ").map(parseFloat);
viewBox[0] -= dx * 1;
viewBox[1] -= dy * 1;
svg.attr("viewBox", viewBox.join(" "));
}
// start by selecting the first node :-)
selectNode(currentNodeIdx+1);
selectNode(currentNodeIdx);
</script>
</body>
</html>
Reference in a new issue Copy permalink