2019-02-03 17:43:32 +01:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en" dir="ltr">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8">
|
2019-02-04 13:49:30 +01:00
|
|
|
<title>Specimens of (discriminatory) composite portraiture</title>
|
|
|
|
|
<link rel="stylesheet" href="styles.css">
|
2019-02-03 17:43:32 +01:00
|
|
|
</head>
|
|
|
|
|
<body>
|
2019-02-04 13:49:30 +01:00
|
|
|
<h1>Specimens <span class='of'>of</span> Discriminatory Composite Portraiture</h1>
|
2019-02-03 17:43:32 +01:00
|
|
|
<section id='gender'>
|
|
|
|
|
<h2>Gender Differentiation<span class='star'>*</span></h2>
|
2019-02-04 18:37:55 +01:00
|
|
|
<div class='gender-wrap'>
|
2019-02-03 17:43:32 +01:00
|
|
|
<div class='genders'>
|
2019-02-04 18:37:55 +01:00
|
|
|
<div id="front">
|
|
|
|
|
<div class='composite' id="front--f">
|
|
|
|
|
<img data-face="female_front" src="unknown_side-1000x1000-3.png">
|
|
|
|
|
<div class='cases'><span class='type'>female</span> <span class='cases--nr' data-face="female_front">12.320</span> cases</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class='composite' id="front--u">
|
|
|
|
|
<img data-face="unknown_front" src="unknown_side-1000x1000-3.png">
|
|
|
|
|
<div class='cases'><span class='type'>unknown</span> <span class='cases--nr' data-face="unknown_front">100</span> cases</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class='composite' id="front--m">
|
|
|
|
|
<img data-face="male_front" src="unknown_side-1000x1000-3.png">
|
|
|
|
|
<div class='cases'><span class='type'>male</span> <span class='cases--nr' data-face="male_front">120</span> cases</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="general">
|
|
|
|
|
<div class='composite' id="side--composite">
|
|
|
|
|
<img data-face="side" src="unknown_side-1000x1000-3.png">
|
|
|
|
|
<div class='cases'><span class='cases--nr' data-face="side">100</span> side faces</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class='composite' id="front--composite">
|
|
|
|
|
<img data-face="front" src="unknown_side-1000x1000-3.png">
|
|
|
|
|
<div class='cases'><span class='cases--nr' data-face="front">100</span> front faces</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="side">
|
|
|
|
|
<div class='composite' id="side--m">
|
|
|
|
|
<img data-face="male_side" src="unknown_side-1000x1000-3.png">
|
|
|
|
|
<div class='cases'><span class='type'>male</span> <span class='cases--nr' data-face="male_side">120</span> cases</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class='composite' id="side--u">
|
|
|
|
|
<img data-face="unknown_side" src="unknown_side-1000x1000-3.png">
|
|
|
|
|
<div class='cases'><span class='type'>unknown</span> <span class='cases--nr' data-face="unknown_side">100</span> cases</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class='composite' id="side--f">
|
|
|
|
|
<img data-face="female_side" src="unknown_side-1000x1000-3.png">
|
|
|
|
|
<div class='cases'><span class='type'>female</span> <span class='cases--nr' data-face="female_side">12.320</span> cases</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2019-02-03 17:43:32 +01:00
|
|
|
</div>
|
2019-02-04 18:37:55 +01:00
|
|
|
<svg
|
|
|
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
|
|
|
id="lines--front"
|
|
|
|
|
version="1.1"
|
|
|
|
|
viewBox="0 0 59.548019 116.38292"
|
|
|
|
|
height="116.38292mm"
|
|
|
|
|
width="59.548019mm">
|
|
|
|
|
<g
|
|
|
|
|
transform="translate(679.89306,124.0486)"
|
|
|
|
|
id="layer1">
|
|
|
|
|
<path
|
|
|
|
|
id="path836"
|
|
|
|
|
d="m -679.89306,-123.53551 c 70.83005,0 26.35353,98.175937 59.54802,98.175937"
|
|
|
|
|
style="fill:none;stroke:var(--primary-color);stroke-width:1.02617979;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
|
|
|
|
|
<path
|
|
|
|
|
style="fill:none;stroke:var(--primary-color);stroke-width:1.02617979;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
|
|
|
|
d="m -679.89306,-8.1787728 c 39.08005,0 26.35353,-17.1808002 59.54802,-17.1808002"
|
|
|
|
|
id="path838" />
|
|
|
|
|
<path
|
|
|
|
|
id="path840"
|
|
|
|
|
d="m -679.89306,-67.505107 c 39.08005,0 26.35353,42.145534 59.54802,42.145534"
|
|
|
|
|
style="fill:none;stroke:var(--primary-color);stroke-width:1.02617979;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
|
|
|
|
|
</g>
|
|
|
|
|
</svg>
|
|
|
|
|
|
|
|
|
|
<svg
|
|
|
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
|
|
|
id="lines--side"
|
|
|
|
|
version="1.1"
|
|
|
|
|
viewBox="0 0 59.548019 116.38292"
|
|
|
|
|
height="116.38292mm"
|
|
|
|
|
width="59.548019mm">
|
|
|
|
|
<g
|
|
|
|
|
transform="translate(679.89306,124.0486)"
|
|
|
|
|
id="layer1">
|
|
|
|
|
<path
|
|
|
|
|
id="path836"
|
|
|
|
|
d="m -679.89306,-123.53551 c 70.83005,0 26.35353,98.175937 59.54802,98.175937"
|
|
|
|
|
style="fill:none;stroke:var(--primary-color);stroke-width:1.02617979;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
|
|
|
|
|
<path
|
|
|
|
|
style="fill:none;stroke:var(--primary-color);stroke-width:1.02617979;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
|
|
|
|
d="m -679.89306,-8.1787728 c 39.08005,0 26.35353,-17.1808002 59.54802,-17.1808002"
|
|
|
|
|
id="path838" />
|
|
|
|
|
<path
|
|
|
|
|
id="path840"
|
|
|
|
|
d="m -679.89306,-67.505107 c 39.08005,0 26.35353,42.145534 59.54802,42.145534"
|
|
|
|
|
style="fill:none;stroke:var(--primary-color);stroke-width:1.02617979;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
|
|
|
|
|
</g>
|
|
|
|
|
</svg>
|
|
|
|
|
</div>
|
2019-02-03 17:43:32 +01:00
|
|
|
</section>
|
2019-02-04 13:49:30 +01:00
|
|
|
<section id='differences'>
|
2019-02-04 18:37:55 +01:00
|
|
|
<div>
|
|
|
|
|
<div class='gender explanation'>
|
|
|
|
|
<!-- <p>Distinctive traits</p> -->
|
|
|
|
|
<h3>composite subtraction</h3>
|
|
|
|
|
<p>An examination of discriminatory traits in gender differentation.</p>
|
2019-02-04 13:49:30 +01:00
|
|
|
</div>
|
|
|
|
|
<div class='gender'>
|
2019-02-04 18:37:55 +01:00
|
|
|
<div class='diff-layer'>
|
2019-02-08 17:31:46 +01:00
|
|
|
<img id="composite-male_front" src="unknown_side-1000x1000-3.png"><img id="composite-male_side" src="unknown_side-1000x1000-3.png">
|
2019-02-04 18:37:55 +01:00
|
|
|
</div>
|
|
|
|
|
<div class='label'>Male</div>
|
2019-02-04 13:49:30 +01:00
|
|
|
</div>
|
2019-02-04 18:37:55 +01:00
|
|
|
</div>
|
|
|
|
|
<div>
|
2019-02-04 13:49:30 +01:00
|
|
|
<div class='gender'>
|
2019-02-04 18:37:55 +01:00
|
|
|
<div class='diff-layer'>
|
2019-02-08 17:31:46 +01:00
|
|
|
<img id="composite-unknown_front" src="unknown_side-1000x1000-3.png"><img id="composite-unknown_side" src="unknown_side-1000x1000-3.png">
|
2019-02-04 18:37:55 +01:00
|
|
|
</div>
|
|
|
|
|
<div class='label'>Unknown</div>
|
2019-02-04 13:49:30 +01:00
|
|
|
</div>
|
|
|
|
|
<div class='gender'>
|
2019-02-04 18:37:55 +01:00
|
|
|
<div class='diff-layer'>
|
2019-02-08 17:31:46 +01:00
|
|
|
<img id="composite-female_front" src="unknown_side-1000x1000-3.png"><img id="composite-female_side" src="unknown_side-1000x1000-3.png">
|
2019-02-04 18:37:55 +01:00
|
|
|
</div>
|
|
|
|
|
<div class='label'>Female</div>
|
2019-02-04 13:49:30 +01:00
|
|
|
</div>
|
2019-02-04 18:37:55 +01:00
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
<div id='bar-wrap'>
|
|
|
|
|
<section id='legend'>
|
|
|
|
|
<div class='legend legend--female'>Female</div>
|
|
|
|
|
<div class='legend legend--unknown'>Unknown</div>
|
|
|
|
|
<div class='legend legend--male'>Male</div>
|
2019-02-04 13:49:30 +01:00
|
|
|
</section>
|
|
|
|
|
<section id='graph'>
|
2019-02-04 18:37:55 +01:00
|
|
|
<div id='graph--female'>
|
2019-02-04 13:49:30 +01:00
|
|
|
<div class='wrap'><div class='background'></div></div>
|
|
|
|
|
<div class='cases'><span class='nr'>0</span> <span class='txt'>cases</span></div>
|
|
|
|
|
</div>
|
2019-02-04 18:37:55 +01:00
|
|
|
<div id='graph--unknown'>
|
2019-02-04 13:49:30 +01:00
|
|
|
<div class='wrap'><div class='background'></div></div>
|
|
|
|
|
<div class='cases'><span class='nr'>0</span> <span class='txt'>cases</span></div>
|
|
|
|
|
</div>
|
2019-02-04 18:37:55 +01:00
|
|
|
<div id='graph--male'>
|
2019-02-04 13:49:30 +01:00
|
|
|
<div class='wrap'><div class='background'></div></div>
|
|
|
|
|
<div class='cases'><span class='nr'>0</span> <span class='txt'>cases</span></div>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
2019-02-04 18:37:55 +01:00
|
|
|
</div>
|
2019-02-04 13:49:30 +01:00
|
|
|
<div id='affdex'>* according to the 2018 edition of Affectiva's gender detection toolkit</div>
|
|
|
|
|
<div id='signature'>
|
|
|
|
|
<!-- — -->
|
|
|
|
|
Ruben van de Ven
|
|
|
|
|
<!-- — -->
|
|
|
|
|
</div>
|
2019-02-04 18:37:55 +01:00
|
|
|
<script type="text/javascript" src="reconnecting-websocket.min.js"></script>
|
|
|
|
|
<script type="text/javascript" src="composite_loader.js"></script>
|
2019-02-03 17:43:32 +01:00
|
|
|
</body>
|
|
|
|
|
</html>
|
