-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.local.html
158 lines (143 loc) · 11.7 KB
/
index.local.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<title>Shell AGM</title>
<!-- Infographic includes -->
<!-- For Odometer on slide 1. -->
<link rel="stylesheet" href="css/odometer-theme-minimal.css" />
<script src="scripts/odometer.js"></script>
<script data-main="scripts/main" src="scripts/require.js"></script>
<link rel="stylesheet" href="css/app.css" />
<link rel="stylesheet" href="css/owl.carousel.css" />
<link rel="stylesheet" href="css/owl.theme.css" />
<!-- Typekit -->
<script type="text/javascript" src="//use.typekit.net/fpm6kax.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
</head>
<body>
<div id="viz-carousel" class="owl-carousel">
<div class="item" id="panel-1">
<div class="inner-text">
<p>Guess how much <span class="highlight">Shell and Eni</span> paid for one of West Africa's biggest oil blocks?</p>
<div class="punchline" id="intro-counter">$<span class="odometer">0</span></div>
<p class="punchline" id="intro-punchline-1">The $1.1bn went to a company owned by the <span class="highlight">former Nigerian oil minister</span>.</p>
<p class="punchline" id="intro-punchline-2">The Nigerian people saw <span class="highlight">none of it</span>. Just think what it could have paid for…</p>
</div>
</div>
<div class="item" id="panel-2">
<div class="graphic">
<svg id="education-graphic">
<defs>
<g id="education"><path d="M99.19,43.982L72.139,60.661c0.043,0.678,0.081,1.363,0.102,2.064h0.022v11.528h-0.001c0,7.574-10.57,13.714-23.611,13.714 c-13.039,0-23.611-6.14-23.611-13.714c0-0.006,0.001-0.012,0.001-0.016V62.726h0.021c0.036-1.26,0.122-2.484,0.221-3.654 l-11.793-7.272v6.329c0.328,0.333,0.536,0.738,0.558,1.183h0.013l1.709,25.672c0,1.649-2.016,2.985-4.504,2.985 c-2.49,0-4.506-1.336-4.506-2.985l1.625-24.212c0.015-0.544,0.085-1.047,0.085-1.382c0-0.496,0.236-0.946,0.616-1.307v-8.533 c0-0.146,0.049-0.278,0.076-0.417L0.81,43.982c-1.822-1.124,0-2.248,0-2.248l47.369-29.203c0.607-0.375,1.214-0.499,1.755-0.499 c1.079,0,1.889,0.499,1.889,0.499L99.19,41.734C101.012,42.858,99.19,43.982,99.19,43.982z M49.836,43.508 c-0.189-1.201-1.314-2.022-2.516-1.833l-36.374,5.699c-0.926,0.145-1.608,0.867-1.785,1.758l4.328,2.667v-0.366l34.512-5.407 C49.202,45.836,50.023,44.709,49.836,43.508z"/></g>
</defs>
</svg>
</div>
<div class="sidetext">
<div class="sidetext-middle">
<p>An estimated <span class="education">5.5 million girls</span> are out of school in Nigeria.</p>
<p class="punchline" id="punchline-education">$1.1 billion could have paid for <span class="education">1.7 million</span> of them to go to school for 5 years each.
</div>
<div class="sidetext-bottom">
<div class="key">
<p>55,000 children = </p>
<svg style="width:20px;height:25px;float:right;margin-left:3px;">
<use transform="scale(0.20)"
xlink:href="#education"
style="fill:grey"></use>
</svg>
</div>
</div>
</div>
</div>
<div class="item" id="panel-3">
<div class="graphic">
<svg id="health-graphic">
<defs>
<g id="health">
<path d="M34.263,19.254c0,4.375-3.552,7.922-7.934,7.922c-4.375,0-7.921-3.546-7.921-7.922
c0-4.376,3.548-7.922,7.921-7.922C30.711,11.332,34.263,14.878,34.263,19.254z"/>
<path d="M26.343,0c3.517,0,9.272,1.477,12.482,4.986l-4.32,8.294c-1.882-2.44-4.839-4.009-8.161-4.009
c-3.283,0-6.208,1.534-8.092,3.925L13.844,5.17C17.555,1.462,22.676,0,26.343,0z M25.093,7.944h2.465v-2.05h2.049V3.431h-2.049
V1.375h-2.465v2.057h-2.051v2.463h2.051V7.944z"/>
<g>
<path d="M15.921,40.83h2.029l-2.897,9.931H37.7l-2.888-9.931h2.032l2.901,9.931h6.664l-4.548-15.05
c-0.714-2.484-3.826-6.858-9.202-6.99L20.299,28.71c-5.498,0.027-8.677,4.486-9.396,7l-4.636,15.05h6.757L15.921,40.83z"/>
</g>
<path d="M51.001,54.038c0,0.062,0.008,0.121,0.01,0.184H0v10.785v34.901V100h8.459V87.681l53.202,0.047l0.023,12.2
l8.387-0.021l0.062-65.418C59.547,34.616,51.001,43.313,51.001,54.038z M41.913,76.649c0,0.4-0.078,0.756-0.213,1.059
c-0.614,2.052-2.538,3.588-4.771,3.588c-4.034,0-8.068,0-12.108,0c-2.71,0-4.973-2.264-4.973-4.978c0-1.848,1.344-3.469,1.424-3.594
c1.104-1.658,2.205-3.317,3.304-4.979c-1.819-1.056-3.644-2.107-5.461-3.164c-2.776-1.604-0.273-5.903,2.509-4.291
c2.7,1.564,5.401,3.124,8.101,4.689c0.562,0.32,1.125,0.785,1.356,1.23c0.454,0.875,0.414,1.888-0.32,2.986
c-0.474,0.716-0.947,1.43-1.42,2.143c2.528,0,5.061,0,7.587,0c0,0,0.007,0,0.009,0c0-1.404,0-2.81,0-4.213
c0-3.213,4.974-3.213,4.974,0C41.913,70.302,41.913,73.477,41.913,76.649z M48.944,81.909c-3.099,0-5.617-2.519-5.617-5.613
c0-3.102,2.52-5.613,5.617-5.613c3.103,0,5.613,2.513,5.613,5.613C54.557,79.391,52.044,81.909,48.944,81.909z"/>
</g>
</defs>
</svg>
</div>
<div class="sidetext">
<div class="sidetext-middle">
<p>142 women die from childbirth every day in Nigeria, which has about <span class="health">100,000 midwives</span>.</p>
<p class="punchline" id="punchline-health">Nearly <span class="health">400,000 midwives</span> could have been trained for $1.1 billion.</p>
</div>
<div class="sidetext-bottom">
<div class="key">
<p>5,000 midwives = </p>
<svg style="width:20px;height:25px;float:right;margin-left:5px;">
<use transform="scale(0.18)"
xlink:href="#health"
style="fill:grey"></use>
</svg>
</div>
</div>
</div>
</div>
<div class="item" id="panel-4">
<div class="graphic">
<svg id="money-graphic">
<defs>
<g id="moneybag">
<path d="M36.66,29.53l-11.542-9.327c0,0-2.667-8.213,5.771-5.771c0,0,5.105,1.777,8.213-2.442c0,0,3.55-12.878,13.988-3.552 c0,0,3.332,10.822,8.218,8.851c0,0,5.105-9.294,12.21-4.188c0,0,4.664,5.993-9.769,16.43H36.66z"/>
<path d="M79.851,60.836c0,0-1.337-7.891-17.538-21.093H35.892c0,0-16.656,15.54-19.316,23.979c0,0-3.111,18.872,20.646,24.202 c0,0,15.986,3.773,30.64-2.667C67.861,85.257,87.181,80.815,79.851,60.836z M50.669,74.243v4.342h-2.634v-4.177 c-2.423-0.043-4.89-0.796-6.353-1.84l1.004-2.799c1.462,0.961,3.635,1.797,5.973,1.797c2.969,0,4.975-1.718,4.975-4.098 c0-2.296-1.629-3.721-4.722-4.97c-4.264-1.67-6.898-3.638-6.898-7.275c0-3.468,2.467-6.101,6.27-6.728v-4.179h2.634v4.055 c2.466,0.083,4.177,0.751,5.431,1.462l-1.043,2.758c-0.879-0.503-2.59-1.463-5.269-1.463c-3.214,0-4.426,1.924-4.426,3.638 c0,2.13,1.544,3.215,5.181,4.762c4.303,1.759,6.479,3.888,6.479,7.605C57.271,70.479,54.972,73.569,50.669,74.243z"/>
<rect x="33.141" y="31.997" width="33.401" height="5.171"/>
</g>
<g id="businessman">
<path d="M49.239,47.815"/>
<path d="M14.906,72.148c0,0,0.561-21.135,20.771-25c0,0,8.979,10.298,10.979,15.964v-8.143l-2.125,0.1l0.049-2.922h9.793 l-0.029,2.922l-1.787-0.064l-0.115,8.461c0,0,11.246-15.85,12.623-15.895c1.5,0.417,18.129,4.581,18.963,24.581 c0,0-9.768,21.332-34.561,20.332C24.675,91.484,14.906,72.148,14.906,72.148z"/>
<path d="M32.657,27.649c0,11.138,10.125,20.166,16.583,20.166c6.542,0,16.583-9.028,16.583-20.166v0.156 c0-11.225-7.426-20.323-16.583-20.323c-9.158,0-16.583,9.098-16.583,20.323L32.657,27.649z"/>
</g>
<g id="question">
<path d="M41,69h15v14H41V69z M68.658,29.173c-0.676-1.96-1.795-3.761-3.331-5.354 c-1.532-1.589-3.568-2.896-6.056-3.886c-2.467-0.979-5.519-1.476-9.068-1.476c-2.343,0-4.566,0.265-6.617,0.787 c-2.03,0.525-3.888,1.206-5.522,2.024c-1.655,0.829-3.139,1.768-4.407,2.788c-1.275,1.027-2.361,2.045-3.184,3.064 c-0.826,1.025-2.263,2.891-2.263,4.757c0,3.346,2.713,6.061,6.061,6.061c0.914,0,1.822-0.124,2.555-0.57 c0.728-0.441,1.646-1.268,2.559-2.245c1.137-1.217,2.691-1.974,4.22-2.703c1.917-0.914,3.956-1.377,6.06-1.377 c1.877,0,3.269,0.449,4.136,1.333c0.891,0.91,1.322,1.854,1.322,2.889c0,0.511-0.107,0.987-0.328,1.446 c-0.277,0.571-0.631,1.115-1.054,1.623c-0.449,0.542-0.97,1.073-1.55,1.582c-0.631,0.557-1.248,1.088-1.863,1.598 c-1.334,1.12-2.538,2.244-3.578,3.339c-1.091,1.146-2.03,2.385-2.794,3.684C43.173,49.871,41,56.469,41,58.611V61h15v-2.389 c0-1.293,0.434-5.123,0.975-5.855c0.562-0.771,1.203-1.469,1.906-2.078c0.747-0.652,1.547-1.279,2.389-1.872 c0.963-0.696,1.938-1.468,2.898-2.296c1.02-0.879,1.938-1.87,2.734-2.95c0.82-1.111,1.488-2.398,1.981-3.824 c0.5-1.436,0.753-3.123,0.753-5.013C69.639,32.944,69.309,31.078,68.658,29.173z"/>
</g>
</defs>
</svg>
</div>
<div class="sidetext">
<div class="sidetext-middle" id="money-text">
<p>But where did the money actually go?</p>
<p><span class="punchline" id="money-punchline-1">$800m went to <span style="color:#00B454">six companies with hidden owners</span>.</span>
<span class="punchline" id="money-punchline-2">$110m went to <span style="color:#FFBB00">a middleman</span>.</span></p>
<p><span class="punchline" id="money-punchline-3"><span style="color:#FF3900">No one knows</span> where the rest went.</span></p>
</div>
<div class="sidetext-bottom">
<div class="key">
<p>$10 million = </p>
<svg style="width:20px;height:25px;float:right;margin-left:3px;">
<use transform="scale(0.20)"
xlink:href="#moneybag"
style="fill:grey"></use>
</svg>
</div>
</div>
</div>
</div>
<div class="item" id="panel-5">
<div class="inner-text">
<p>This is <span class="highlight">wrong</span>.</p>
<p class="punchline" id="conclusion-punchline-1">Payments for natural resources need to be made <span class="highlight">in the open</span>.</p>
<p class="punchline" id="conclusion-punchline-2">So why is <span class="highlight">Shell blocking laws</span> which would make that happen?</p>
<p class="punchline" id="conclusion-punchline-3">For more, see <a href="http://www.globalwitness.org/opl245">www.globalwitness.org/opl245</a>.</p>
</div>
</div>
</div>
</body>