specimens-of-composite-port.../www/index.html

300 lines
22 KiB
HTML
Raw Normal View History

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>
<div class='genders'>
2019-02-04 13:49:30 +01:00
<svg
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
id="svg954"
version="1.1"
viewBox="0 0 269.68921 171.03902"
height="171.03902mm"
width="249.68921mm">
<defs
id="defs948" />
<g
transform="translate(-479.74467,99.971886)"
id="layer1">
<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 707.56274,47.386401 c -39.08004,0 -26.35353,-98.175942 -59.54802,-98.175942"
id="path919" />
<path
id="path921"
d="m 707.56274,-67.970339 c -39.08004,0 -26.35353,17.180798 -59.54802,17.180798"
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 707.56274,-8.6440273 c -39.08004,0 -26.35353,-42.1455137 -59.54802,-42.1455137"
id="path923" />
<path
id="path836"
d="m 540.57238,-79.730199 c 70.83004,0 26.35353,98.17594 59.54801,98.17594"
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 540.57238,35.626541 c 39.08004,0 26.35352,-17.1808 59.54801,-17.1808"
id="path838" />
<path
id="path840"
d="m 540.57238,-23.699793 c 39.08004,0 26.35352,42.145534 59.54801,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" />
<image
y="-98.78492"
x="488.05942"
id="image826"
xlink:href="unknown_side-1000x1000-3.png"
preserveAspectRatio="none"
height="51.730377"
width="51.730377" />
<use
height="100%"
width="100%"
transform="translate(-4.5528998e-7,57.022051)"
id="use828"
xlink:href="#image826"
y="0"
x="0" />
<use
height="100%"
width="100%"
transform="translate(-4.5528998e-7,58.005791)"
id="use830"
xlink:href="#use828"
y="0"
x="0" />
<image
width="49.769428"
height="49.769428"
preserveAspectRatio="none"
xlink:href="unknown_side-1000x1000-3.png"
id="use834"
x="597.66241"
y="-20.339062" />
<image
width="53.440414"
height="53.440414"
preserveAspectRatio="none"
xlink:href="unknown_side-1000x1000-3.png"
id="image910"
x="687.51868"
y="-99.971886" />
<image
y="-41.172611"
x="687.51868"
id="image913"
xlink:href="unknown_side-1000x1000-3.png"
preserveAspectRatio="none"
height="53.440414"
width="53.440414" />
<image
width="53.440414"
height="53.440414"
preserveAspectRatio="none"
xlink:href="unknown_side-1000x1000-3.png"
id="image915"
x="687.51868"
y="17.626713" />
<image
width="49.769428"
height="51.32375"
preserveAspectRatio="none"
xlink:href="unknown_side-1000x1000-3.png"
id="image917"
x="597.66241"
y="-82.246162" />
<text
id="text927"
y="63.765812"
x="542.91345"
style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:5.96850729px;line-height:1.25;font-family:'CMU Serif';-inkscape-font-specification:'CMU Serif, Medium';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:var(--primary-color);fill-opacity:1;stroke:none;stroke-width:0.14921269"
xml:space="preserve"><tspan
style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:5.96850729px;font-family:'CMU Serif';-inkscape-font-specification:'CMU Serif, Medium';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;stroke-width:0.14921269"
y="63.765812"
x="542.91345"
id="tspan925">20 cases</tspan></text>
<text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:7.32276964px;line-height:0.80000001;font-family:'CMU Serif';-inkscape-font-specification:'CMU Serif, Medium';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:var(--primary-color);fill-opacity:1;stroke:none;stroke-width:0.18306924"
x="541.38544"
y="1.2943537"
id="text931"><tspan
id="tspan929"
x="541.38544"
y="1.2943537"
style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:7.32276964px;line-height:0.80000001;font-family:'CMU Serif';-inkscape-font-specification:'CMU Serif, Medium';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;stroke-width:0.18306924">1.200</tspan><tspan
id="tspan939"
x="541.38544"
y="7.1525693"
style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:7.32276964px;line-height:0.80000001;font-family:'CMU Serif';-inkscape-font-specification:'CMU Serif, Medium';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;stroke-width:0.18306924">cases</tspan></text>
<text
id="text935"
y="-48.44733"
x="540.32709"
style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:7.32276964px;line-height:1.25;font-family:'CMU Serif';-inkscape-font-specification:'CMU Serif, Medium';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:var(--primary-color);fill-opacity:1;stroke:none;stroke-width:0.18306924"
xml:space="preserve"><tspan
style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:7.32276964px;font-family:'CMU Serif';-inkscape-font-specification:'CMU Serif, Medium';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;stroke-width:0.18306924"
y="-48.44733"
x="540.32709"
id="tspan933">120 cases</tspan></text>
<path
id="path937"
d="M 540.57238,-79.730199 Z"
style="fill:none;stroke:var(--primary-color);stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:7.32276964px;line-height:1.25;font-family:'CMU Serif';-inkscape-font-specification:'CMU Serif, Medium';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:var(--primary-color);fill-opacity:1;stroke:none;stroke-width:0.18306924"
x="603.58911"
y="37.606449"
id="text972"><tspan
id="tspan970"
x="603.58911"
y="37.606449"
style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:7.32276964px;font-family:'CMU Serif';-inkscape-font-specification:'CMU Serif, Medium';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;stroke-width:0.18306924">1.340 cases</tspan></text>
<text
id="text976"
y="-24.546719"
x="608.34381"
style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:7.32276964px;line-height:1.25;font-family:'CMU Serif';-inkscape-font-specification:'CMU Serif, Medium';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:var(--primary-color);fill-opacity:1;stroke:none;stroke-width:0.18306924"
xml:space="preserve"><tspan
style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:7.32276964px;font-family:'CMU Serif';-inkscape-font-specification:'CMU Serif, Medium';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;stroke-width:0.18306924"
y="-24.546719"
x="608.34381"
id="tspan974">800 cases</tspan></text>
<text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:7.32276964px;line-height:1.25;font-family:'CMU Serif';-inkscape-font-specification:'CMU Serif, Medium';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:var(--primary-color);fill-opacity:1;stroke:none;stroke-width:0.18306924"
x="479.47293"
y="-66.438972"
id="text1006"><tspan
id="tspan1004"
x="479.47293"
y="-66.438972"
style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:7.32276964px;font-family:'CMU Serif';-inkscape-font-specification:'CMU Serif, Medium';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;stroke-width:0.18306924">M</tspan></text>
<text
id="text1010"
y="-13.522312"
x="480.53125"
style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:7.32276964px;line-height:1.25;font-family:'CMU Serif';-inkscape-font-specification:'CMU Serif, Medium';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:var(--primary-color);fill-opacity:1;stroke:none;stroke-width:0.18306924"
xml:space="preserve"><tspan
style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:7.32276964px;font-family:'CMU Serif';-inkscape-font-specification:'CMU Serif, Medium';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;stroke-width:0.18306924"
y="-13.522312"
x="480.53125"
id="tspan1008">F</tspan></text>
<text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:7.32276964px;line-height:1.25;font-family:'CMU Serif';-inkscape-font-specification:'CMU Serif, Medium';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:var(--primary-color);fill-opacity:1;stroke:none;stroke-width:0.18306924"
x="481.06042"
y="44.686024"
id="text1014"><tspan
id="tspan1012"
x="481.06042"
y="44.686024"
style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:7.32276964px;font-family:'CMU Serif';-inkscape-font-specification:'CMU Serif, Medium';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;stroke-width:0.18306924">?</tspan></text>
<text
id="text1018"
y="-66.438972"
x="742.99786"
style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:7.32276964px;line-height:1.25;font-family:'CMU Serif';-inkscape-font-specification:'CMU Serif, Medium';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:var(--primary-color);fill-opacity:1;stroke:none;stroke-width:0.18306924"
xml:space="preserve"><tspan
style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:7.32276964px;font-family:'CMU Serif';-inkscape-font-specification:'CMU Serif, Medium';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;stroke-width:0.18306924"
y="-66.438972"
x="742.99786"
id="tspan1016">M</tspan></text>
<text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:7.32276964px;line-height:1.25;font-family:'CMU Serif';-inkscape-font-specification:'CMU Serif, Medium';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:var(--primary-color);fill-opacity:1;stroke:none;stroke-width:0.18306924"
x="744.05621"
y="-13.522312"
id="text1022"><tspan
id="tspan1020"
x="744.05621"
y="-13.522312"
style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:7.32276964px;font-family:'CMU Serif';-inkscape-font-specification:'CMU Serif, Medium';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;stroke-width:0.18306924">F</tspan></text>
<text
id="text1026"
y="44.686024"
x="744.58539"
style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:7.32276964px;line-height:1.25;font-family:'CMU Serif';-inkscape-font-specification:'CMU Serif, Medium';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:var(--primary-color);fill-opacity:1;stroke:none;stroke-width:0.18306924"
xml:space="preserve"><tspan
style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:7.32276964px;font-family:'CMU Serif';-inkscape-font-specification:'CMU Serif, Medium';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;stroke-width:0.18306924"
y="44.686024"
x="744.58539"
id="tspan1024">?</tspan></text>
</g>
</svg>
2019-02-03 17:43:32 +01:00
</div>
</section>
2019-02-04 13:49:30 +01:00
<section id='differences'>
<div class='gender'>
<h2>Distinctive traits</h2>
</div>
<div class='gender'>
<img src="unknown_side-1000x1000-3.png"><img src="unknown_side-1000x1000-3.png">
</div>
<div class='gender'>
<img src="unknown_side-1000x1000-3.png"><img src="unknown_side-1000x1000-3.png">
</div>
<div class='gender'>
<img src="unknown_side-1000x1000-3.png"><img src="unknown_side-1000x1000-3.png">
</div>
2019-02-03 17:43:32 +01:00
2019-02-04 13:49:30 +01:00
</section>
<section id='graph'>
<div id='graph--male' data-width="30%">
<div class='wrap'><div class='background'></div></div>
<div class='cases'><span class='nr'>0</span> <span class='txt'>cases</span></div>
</div>
<div id='graph--female' data-width="30%">
<div class='wrap'><div class='background'></div></div>
<div class='cases'><span class='nr'>0</span> <span class='txt'>cases</span></div>
</div>
<div id='graph--unknown' data-width="30%">
<div class='wrap'><div class='background'></div></div>
<div class='cases'><span class='nr'>0</span> <span class='txt'>cases</span></div>
</div>
</section>
<!-- <section id='ethnicity'>
2019-02-03 17:43:32 +01:00
<h2>Reinforced Ethnical Stereotypes</h2>
<div id='graph'>
<div id='graph--black-african'>
<div class='background'></div>
<div class='cases'><span class='nr'>0</span> <span class='txt'>cases</span></div>
</div>
<div id='graph--caucasian'>
<div class='background'></div>
<div class='cases'><span class='nr'>0</span> <span class='txt'>cases</span></div>
</div>
<div id='graph--east-asian'>
<div class='background'></div>
<div class='cases'><span class='nr'>0</span> <span class='txt'>cases</span></div>
</div>
<div id='graph--hispanic'>
<div class='background'></div>
<div class='cases'><span class='nr'>0</span> <span class='txt'>cases</span></div>
</div>
<div id='graph--south-asian'>
<div class='background'></div>
<div class='cases'><span class='nr'>0</span> <span class='txt'>cases</span></div>
</div>
</div>
2019-02-04 13:49:30 +01:00
</section> -->
<div id='affdex'>* according to the 2018 edition of Affectiva's gender detection toolkit</div>
<div id='signature'>
<!-- &mdash; -->
Ruben van de Ven
<!-- &mdash; -->
</div>
2019-02-03 17:43:32 +01:00
</body>
</html>