-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·301 lines (267 loc) · 17.9 KB
/
index.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
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Daan Louter — portfolio</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/fonts.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div id="wrapper">
<header>
<div class="content-wrapper">
<h1>I'm Daan Louter, a Dutch designer and developer based in London. I'm part of The Guardian Visuals team, where I work together with journalists to find new ways of telling stories. I will soon join Kiln to work on <a href="https://flourish.studio/">Flourish</a>, a tool to create data visualisations and interactives. Get in touch via <a href="mailto:[email protected]">e-mail</a> or <a href="https://twitter.com/daanlouter">Twitter</a>.</h1>
<h2>Here's a selection of my work 👇</h2>
</div>
</header>
<section class="project-wrapper" id="project-turkey">
<div class="content-wrapper">
<div class="project-content">
<h4><a href="http://www.theguardian.com/world/2015/jun/01/turkey-the-worlds-most-unfair-election-system">The most unfair election in the world<span class="arrow"></span></a></h4>
<h5>An interactive datavisualisation that shows you why the Turkish elections are so unfair, by letting you play with the rules.</h5>
<h6>Story, concept, design and code, for The Guardian</h6>
</div>
</div>
</section>
<section class="project-wrapper" id="project-refugees">
<div class="map-container"></div>
<div class="content-wrapper">
<div class="project-content">
<h4><a href="http://www.theguardian.com/global-development/ng-interactive/2014/jan/refugee-choices-interactive">Refugee Challenge, can you enter Fort Europe?<span class="arrow"></span></a></h4>
<h5>A choose-your-own-adventure story about how refugees enter Europe. Instead of reading the stories, you make the decisions a refugee has to make.</h5>
<h6>Design and concept, for the Guardian <span>with Seán Clarke and Andrew Mason</span></h6>
</div>
</div>
<canvas width="100%" height="100%" class="draw-container"></canvas>
<div class="startDot animating"></div>
<div class="endDot"></div>
</section>
<section class="project-wrapper" id="project-euro2016">
<div class="chalkboard-container"></div>
<div class="content-wrapper">
<div class="project-content">
<h4><a href="http://www.theguardian.com/football/ng-interactive/2016/jun/01/euro-2016-the-complete-guide-to-every-squad-and-every-player-in-france">The complete guide to Euro 2016<span class="arrow"></span></a></h4>
<h5>Everything about everyone at the Euro 2016. From player ratings to team tactics to favorite tattoos. It's literally all you need during the tournament.</h5>
<h6>Design, concept and code, for the Guardian</h6>
</div>
</div>
<canvas width="100%" height="100%" class="shapes-container"></canvas>
<canvas width="100%" height="100%" class="draw-container"></canvas>
</section>
<section class="project-wrapper" id="project-daanfm">
<div class="background-container">
</div>
<div class="content-wrapper">
<div class="project-content">
<h4><a href="http://www.daanlouter.com/daanfm">daan.fm<span class="arrow"></span></a></h4>
<h5>A visual overview of my favorite musical discoveries</h5>
<h6>-</h6>
</div>
</div>
</section>
<section class="project-wrapper" id="project-comments">
<svg id="comments-viz"><path id="viz-path-1"></path><path id="viz-path-2"></path><path id="viz-path-3"></path></svg>
<div class="content-wrapper">
<div class="project-content">
<h4><a href="https://www.theguardian.com/technology/2016/apr/12/the-dark-side-of-guardian-comments">The dark side of Guardian comments<span class="arrow"></span></a></h4>
<h5>A huge analysis about abuse on The Guardian, where we try to find out which writers and subjects attract the most abuse.</h5>
<h6>Data visualisation, for the Guardian <span>with Monica Ulmanu, Josh Holder, Becky Gardiner, Mahana Mansfield</span></h6>
</div>
</div>
</section>
<section class="project-wrapper" id="project-mekong">
<div class="background-container">
<div class="background-river">
<img src="imgs/mekong/header_mobile.png" />
</div>
</div>
<div class="content-wrapper">
<div class="project-content">
<h4><a href="http://www.theguardian.com/environment/ng-interactive/2015/nov/26/the-mekong-river-stories-from-the-heart-of-the-climate-crisis-interactive">Mekong: a river rising<span class="arrow"></span></a></h4>
<h5>An in-depth, visual look at how climate change is affecting the countries around the Mekong river in Asia.</h5>
<h6>Design and code, for the Guardian <span>with Lindsay Poulton, Feilding Cage, Ekaterina Ochagavia</span></h6>
</div>
</div>
</section>
<section class="project-wrapper" id="project-transfers">
<div class="background-container">
</div>
<div class="content-wrapper">
<div class="project-content">
<h4><a href="https://www.theguardian.com/football/ng-interactive/2016/dec/21/transfer-window-january-2017-all-the-latest-moves-and-news-interactive">Transfer window watch<span class="arrow"></span></a></h4>
<h5>Find all the latest transfers and notifications for the top 5 European leagues. You can even receive notifications for your fabvorite team!</h5>
<h6>Design and code, for the Guardian <span>with Marcus Christenson</span></h6>
</div>
</div>
</section>
<section class="project-wrapper" id="project-popes">
<div id="pope-container">
</div>
<div class="content-wrapper">
<div class="project-content">
<h4><a href="http://www.theguardian.com/world/interactive/2013/mar/12/choose-your-own-pope-pontifficator">Pontifficator: choose your own pope<span class="arrow"></span></a></h4>
<h5>A game where you can explore all the different candidates for new pope. And in the end you can choose your own favourite pope.</h5>
<h6>Concept and design, for the Guardian <span>with Jonathan Richards and Robin Beitra</span></h6>
</div>
</div>
</section>
<section class="project-wrapper" id="project-civilwar">
<div class="fader-container">
<div class="fader-image-container fader-image-1">
<div class="fader-one"></div>
<div class="fader-two"></div>
</div>
<div class="fader-image-container fader-image-2">
<div class="fader-one"></div>
<div class="fader-two"></div>
</div>
<div class="fader-image-container fader-image-3">
<div class="fader-one"></div>
<div class="fader-two"></div>
</div>
<div class="fader-image-container fader-image-4">
<div class="fader-one"></div>
<div class="fader-two"></div>
</div>
</div>
<div class="content-wrapper">
<div class="project-content">
<h4><a href="http://www.theguardian.com/artanddesign/ng-interactive/2015/jun/22/american-civil-war-photography-interactive">Civil War<br /> <span class="then">then</span> and <span class="now">now</span><span class="arrow"></span></a></h4>
<h5>A gallery that shows the scenes of the American civil war then, and now. I later created an internal <a href="https://interactive.guim.co.uk/2016/01/now-and-then-generator/">tool</a> to make the photo sliders.</h5>
<h6>Design and code, for the Guardian <span>with Troy Griggs</span></h6>
</div>
</div>
</section>
<section class="project-wrapper" id="project-worldcup">
<div class="worldcup-ballscontainer">
</div>
<div class="content-wrapper">
<div class="project-content">
<h4><a href="http://www.theguardian.com/football/ng-interactive/2015/dec/08/euro-2016-draw-create-your-own-group-stage">Create your own Euros 2016 Draw<span class="arrow"></span></a></h4>
<h5>A tool that lets you create your own draw for the UEFA Euros 2016. Let the pre-fun begin!</h5>
<h6>Concept, design and code, for the Guardian</h6>
</div>
</div>
</section>
<section class="project-wrapper" id="project-guardianvr">
<div class="background-container">
</div>
<div class="content-wrapper">
<div class="project-content">
<h4><a href="http://www.daanlouter.com/daanfm">The Guardian VR<span class="arrow"></span></a></h4>
<h5>Worked on The Guardian's second VR piece Underworld, as well as working on the broader Guardian VR brand.</h5>
<h6>With Andrew Mason, Francesca Panetta, Nicole Jackson, Anetta Jones. VR brand page with Chris Clarke and Alex Breuer</h6>
</div>
</div>
</section>
<section class="project-wrapper" id="project-nhs">
<div class="content-wrapper">
<div class="project-content">
<span class="calculator-container">
<span class="letter">
<span>N<br /> N<br /> N<br /> N<br /> N<br />N<br /> N<br /> N<br /> N<br /> N<br /></span>
</span>
<span class="letter">
<span>H<br /> H<br /> H<br /> H<br /> H<br />H<br /> H<br /> H<br /> H<br /> H<br /></span>
</span>
<span class="letter">
<span>S<br /> S<br /> S<br /> S<br /> S<br />S<br /> S<br /> S<br /> S<br /> S<br /></span>
</span>
<span class="space"></span>
<span class="letter">
<span>C<br /> C<br /> C<br /> C<br /> C<br />C<br /> C<br /> C<br /> C<br /> C<br /></span>
</span>
<span class="letter">
<span>A<br /> A<br /> A<br /> A<br /> A<br />A<br /> A<br /> A<br /> A<br /> A<br /></span>
</span>
<span class="letter">
<span>L<br /> L<br /> L<br /> L<br /> L<br />L<br /> L<br /> L<br /> L<br /> L<br /></span>
</span>
<span class="letter">
<span>C<br /> C<br /> C<br /> C<br /> C<br />C<br /> C<br /> C<br /> C<br /> C<br /></span>
</span>
<span class="letter">
<span>U<br /> U<br /> U<br /> U<br /> U<br />U<br /> U<br /> U<br /> U<br /> U<br /></span>
</span>
<span class="letter">
<span>L<br /> L<br /> L<br /> L<br /> L<br />L<br /> L<br /> L<br /> L<br /> L<br /></span>
</span>
<span class="letter">
<span>A<br /> A<br /> A<br /> A<br /> A<br />A<br /> A<br /> A<br /> A<br /> A<br /></span>
</span>
<span class="letter">
<span>T<br /> T<br /> T<br /> T<br /> T<br />T<br /> T<br /> T<br /> T<br /> T<br /></span>
</span>
<span class="letter">
<span>O<br /> O<br /> O<br /> O<br /> O<br />O<br /> O<br /> O<br /> O<br /> O<br /></span>
</span>
<span class="letter">
<span>R<br /> R<br /> R<br /> R<br /> R<br />R<br /> R<br /> R<br /> R<br /> R<br /></span>
</span>
</span>
<h4><a href="http://www.theguardian.com/society/ng-interactive/2016/feb/08/how-much-have-i-cost-the-nhs">How much have you cost the NHS?<span class="arrow"></span></a></h4>
<h5>A tool that lets you discover all the different NHS treatments and their costs.</h5>
<h6>Design and code, for the Guardian <span>with Delphine Robineau</span></h6>
</div>
</div>
</section>
<section class="project-wrapper" id="project-vangaal">
<div class="content-wrapper">
<div class="project-content">
<h4><a href="http://www.theguardian.com/football/ng-interactive/2015/apr/10/louis-van-gaal-phrase-generator-manchester-united">Louis van Gaal phrase generator<span class="arrow"></span></a></h4>
<h5>Not many people appreciate the bright, slightly mispronounced Dutch-English, quotes of Louis Van Gaal. So I made a phrase generator to spread the word of king Louis.</h5>
<h6>For The Guardian</h6>
</div>
</div>
</section>
<section class="project-wrapper" id="project-scotland">
<div id="donut-container">
<div id="donut-wrapper">
<div id="donut-circle"></div>
</div>
</div>
<div class="content-wrapper">
<div class="project-content">
<h4><a href="http://www.theguardian.com/politics/ng-interactive/2014/sep/18/-sp-scottish-independence-referendum-results-in-full">Scottish referendum<span class="arrow"></span></a></h4>
<h5>A dashboard with live results for the Scottish referendum in 2015.</h5>
<h6>Design and frontend code, for the Guardian <span>with Andrew Mason, Garry Blight, Sean Clarke, Aron Pilhofer</span></h6>
</div>
</div>
</section>
<section class="project-wrapper" id="project-bangla">
<div class="video-container">
<video type="video/mp4" loop muted></video>
</div>
<div class="content-wrapper">
<div class="project-content">
<h4><a href="http://www.theguardian.com/world/ng-interactive/2014/apr/bangladesh-shirt-on-your-back">The shirt on your back<span class="arrow"></span></a></h4>
<h5>In the time you've been looking at my portfolio, clothing retailers have sold for <span class="counter-retailers">£0</span>, while factory workers in Bangladesh only made <span class="counter-wage">£0</span>. This is a story about those people, that make the shirt on your back.</h5>
<h6>Design, for the Guardian <span>with Seán Clarke, Francesca Panetta, Andrew Mason, Lindsay Poulton</span></h6>
</div>
</div>
</section>
<footer>
<div class="content-wrapper">
<h2>If you'd like to see more work, check out all my Guardian projects <a href="http://www.theguardian.com/profile/daan-louter">here</a>, or follow me on <a href="http://twitter.com/daanlouter">Twitter</a>. If you have any questions or just want to reach out, send me an <a href="mailto:[email protected]">e-mail</a></h2>
</div>
</footer>
</div>
<script src="js/d3-path.min.js"></script>
<script src="js/full-tilt.min.js"></script>
<script src="js/d3-shape.min.js"></script>
<script src="js/main.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-12417842-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>