-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdesktop.html
498 lines (383 loc) · 38.6 KB
/
desktop.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
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
<!DOCTYPE html>
<html>
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-N8BFZSFFR1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-N8BFZSFFR1');
</script>
<title>Struggle for dignity in Cape Town's informal settlements: the facts</title>
<meta charset="UTF-8" name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<!-- tutorial docs -->
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/lity.min.css">
</head>
<body>
<div id="load"><i class="spinloader fa fa-spinner fa-pulse fa-3x fa-fw"></i></div>
<div id="mapOverlay">
<br><br>
<h1>Struggle for dignity in Cape Town's informal settlements: the facts</h1>
<p class="introtext">There are around 146,000 households in 437 informal settlement pockets in Cape Town. Many were established before democracy but are still not recognised as permanent and their residents lack occupation rights and security of tenure. We need an honest conversation about what is possible and effective budgets, policy and plans to tackle the constraints that do exist so that the City can provide progressive access to shelter and equitable services. We've made an interactive map that helps start this conversation. Please click start to learn how the map works and to understand the context of the data. If you've already followed the tutorial you can skip straight to the map.</p>
<p class="homeBtn"><a href="#" class="btn btn-default startStory">Start <i class="fa fa-arrow-right" aria-hidden="true"></i></a></p>
<p class="homeBtn"><a href="#" class="explore-map skiptomap">Skip to map</a></p>
<div id="logos-intro">
<div class="col-md-2 col-md-offset-2 col-sm-6">
<a href="http://nu.org.za" target="_blank"><img class="center-block" src="img/logo-nu-mobile.png" style="border-radius: 3px;"></a>
</div>
<div class="col-md-2 col-sm-6">
<a href="http://sjc.org.za" target="_blank"><img class="center-block" src="img/logo-sjc-mobile.png"></a>
</div>
<div class="col-md-2 col-sm-6">
<a href="http://internationalbudget.org" target="_blank"><img class="center-block" src="img/logo-ibp-mobile.png"></a>
</div>
<div class="col-md-2 col-sm-6">
<a href="http://code4sa.org" target="_blank"><img class="center-block" src="img/logo-c4sa-mobile.png"></a>
</div>
</div>
</div>
</div>
<div class="row hidden layer-info">
<div class="col-lg-8 col-lg-offset-2" id="infoDisplay"> <!-- Contextual SubLayer Information Start -->
<div class="btn btn-default close-layertext hidden-xs hidden-sm hidden-md"><i class="fa fa-times" aria-hidden="true"></i> Close</div>
<div id="infoDefault">
<h3>Boundary</h3>
<p class="minimize">There are 204 recognised informal settlements in Cape Town. In fact there are 437 individual pockets. Sometimes the pocket is a large block of hundreds of homes. In other cases the pockets are small clusters of only a few homes scattered on land in between formal houses. Some are individual homes on plots surrounded by food gardens. Use the satellite view to explore how each pocket is unique. You can find more information below by clicking on the pocket.</p>
</div>
<div id="infoHousing" class="hidden">
<h3>Households</h3>
<p class="minimize">Each household is one individual home that has been built. There is a wide variation in the number of households in a pocket. Some, like Chris Hani Park have as little as 3 households. Some, like Enkanini, have nearly 8000 households! Altogether there are 146,626 households living in informal settlements. The average pocket has around 340 households but this is skewed by a few large informal settlements - the majority of pockets have less than 800 households.</p>
</div>
<div id="infoAge" class="hidden">
<h3>Age of Informal Settlements</h3>
<p class="minimize">The age of an informal settlement tells you how long it has been since it was first established. It does not show how a particular pocket has grown over time or whether the same people have been living there. Many people believe informal settlements are a new phenomenon, but most pockets are very old. Only 17 pockets (4%) are less than 5 years old. In fact around 286 pockets (65%) were established 15 or more years ago (before the year 2000) and 103 (24%) were established before our democracy. The oldest informal settlements are clustered around northern Khayelitsha, Crossroads and Nyanga but are still not recognised and still have temporary toilets.</p>
</div>
<div id="infoTempSani" class="hidden">
<h3>Temporary toilets</h3>
<p class="minimize">The City of Cape Town provides a range of toilet types to residents living in informal settlements. Around 13,577 full flush toilets have been installed. These are a free standing toilets built into prefabricated cement shelters and connected to a sewer system. This means that around a third (33%) of all toilets are permanent infrastructure. The rest are temporary toilets that are provided and cleaned by private companies. The City provides many different types. We show the data for chemical, container and porta potti, which are the most common and combine the rest into an ‘other’ category. 5,027 (12%) are chemical toilets - a toilet with a chemical container that can be removed or cleaned via suction. These are often called ‘mshengu’ toilets. 5,077 (12.5%) are container toilets - a cement shelter with a container that has to be removed. The vast majority, around 15,928 (39%), are Porta Pottis. These are portable toilets with a small container that can be disconnected and must be collected and cleaned. This is the number of toilets that have been purchased - it is unclear how many actually exist or where they are currently. Most pockets across the city only have access to temporary toilets.</p>
</div>
<div id="infoUpgrade" class="hidden">
<h3>Upgrade Category</h3>
<p class="minimize">How many informal settlements are really on unsuitable land? The City of Cape Town has categorised informal settlements in terms of size, age and development priority. There are 48 (12%) informal settlements in Category A. These have been approved for full upgrade or are suitable for future upgrades where 'pre-planning' can commence. Why are these not being prioritised immediately for upgrading; infrastructure and sanitation? There are 22 (5%) informal settlements in Category B1. These are on City land with adverse physical conditions that require programmes and budgets for upgrading. The vast majority, around 252 (58%), of informal settlements are in Category B2. These are informal settlements on Provincial or National government land that require programmes and budgets for transfer to the City, de-densification, and upgrading. There are challenges here but it is still possible to upgrade and install infrastructure despite the challenges. Why is it taking so long? There are 115 (26%) informal settlements in Category C. These are informal settlements that are located on land which either needs to be purchased or there are constraints that require total relocation. Dealing with these challenges will not be easy. It requires decisive action, not indifference and denials. Please note that no constraint information exists at the pocket level - this is only provided for all the pockets within a recognised the settlement. As each pocket is unique, it is likely that significantly more informal settlements could be recognised and upgraded if the City determined the specific constraints for each pocket.</p>
</div>
<div id="infoDensity" class="hidden">
<h3>Density</h3>
<p class="minimize">The Density of a pocket is measured in dwelling per hectare or DHa. We have calculated this by dividing the number of households by the size of the land. The density of a pocket is an important consideration because it determines how easily basic services can be installed. Density ranges between 3 DHa at Kroonendal in Houtbay to about 463 DHa at Langa Sportsfield. To put this into perspective, the target density for formal affordable housing of between 1 and 4 stories is between 80 and 300 DHa.</p>
</div>
<div id="infoBoundary" class="hidden">
<h3>Boundary</h3>
<p class="minimize">There are 204 recognised informal settlements in Cape Town. In fact there are 437 individual pockets. Sometimes the pocket is a large block of hundreds of homes. In other cases the pockets are small clusters of only a few homes scattered on land in between formal houses. Some are individual homes on plots surrounded by food gardens. Use the satellite view to explore how each pocket is unique. You can find more information below by clicking on the pocket.</p>
</div>
</div> <!-- Contextual SubLayer Information End -->
</div>
<ul id="layer-select-tiny" class="hidden-md hidden-lg hidden-sm hidden">
<li class="btn btn-block btn-default select-sublayer0"><i class="fa fa-home fa-fw" aria-hidden="true"></i> Households</li>
<li class="btn btn-block btn-default select-sublayer1"><i class="fa fa-history fa-fw" aria-hidden="true"></i> Age</li>
<li class="btn btn-block btn-default select-sublayer2"><i class="fa fa-tint" aria-hidden="true"></i> Temporary toilets</li>
<li class="btn btn-block btn-default select-sublayer3"><i class="fa fa-wrench fa-fw" aria-hidden="true"></i> Upgrade category</li>
<li class="btn btn-block btn-default select-sublayer4"><i class="fa fa-building-o fa-fw" aria-hidden="true"></i> Density</li>
<li class="btn btn-block btn-default active select-sublayer5"><i class="fa fa-circle-thin fa-fw" aria-hidden="true"></i> Boundary</li>
</ul>
<div class="position:relative">
<ul id="layer-select-mobile" class="hidden-md hidden-lg hidden-xs hidden">
<li class="btn btn-default select-sublayer0"><i class="fa fa-home fa-fw" aria-hidden="true"></i> Households</li>
<li id="story-layer" class="btn btn-default select-sublayer1"><i class="fa fa-history fa-fw" aria-hidden="true"></i> Age</li>
<li class="btn btn-default select-sublayer2"><i class="fa fa-tint" aria-hidden="true"></i> Temporary toilets</li>
<li class="btn btn-default select-sublayer3"><i class="fa fa-wrench fa-fw" aria-hidden="true"></i> Upgrade category</li>
<li class="btn btn-default select-sublayer4"><i class="fa fa-building-o fa-fw" aria-hidden="true"></i> Density</li>
<li class="btn btn-default active select-sublayer5"><i class="fa fa-circle-thin fa-fw" aria-hidden="true"></i> Boundary</li>
</ul>
</div>
<!-- Map Start -->
<div id="mapcontainer" class="row mapstart">
<div id="map" class="col-xs-8">
<a id="skip-stories" class="btn btn-default explore-map skiptomap"><i class="fa fa-fw fa-globe" aria-hidden="true"></i> Skip to map</a>
<a href="#"><div class="open-layertext hidden"></div></a>
<button class="btn btn-default tooltip-name tt-small hidden hidden-lg hidden-md" style="font-weight: 800"></button>
<img class="hidden" src="img/tap.svg" id="click-layer-asithandile"></img>
<img class="hidden" src="img/tap.svg" id="click-layer-zukiswa"></img>
<img class="hidden" src="img/tap.svg" id="click-layer-zukiswa-age"></img>
<img class="hidden" src="img/tap.svg" id="click-pocket"></img>
<a href="#dashboard"><div class="arrow-down hidden"></div></a>
<ul id="layer-select" class="hidden-sm hidden-xs hidden">
<li class="btn btn-default tooltip-name hidden" style="font-weight: 800"></li>
<li class="btn btn-default disabled ssub select-sublayer0"><i class="fa fa-home fa-fw" aria-hidden="true"></i> Households</li>
<li class="btn btn-default disabled ssub select-sublayer1"><i class="fa fa-history fa-fw" aria-hidden="true"></i> Age</li>
<li class="btn btn-default disabled ssub select-sublayer2"><i class="fa fa-tint" aria-hidden="true"></i> Temporary toilets</li>
<li class="btn btn-default disabled ssub select-sublayer3"><i class="fa fa-wrench fa-fw" aria-hidden="true"></i> Upgrade category</li>
<li class="btn btn-default disabled ssub select-sublayer4"><i class="fa fa-building-o fa-fw" aria-hidden="true"></i> Density</li>
<li class="btn btn-default disabled ssub active select-sublayer5"><i class="fa fa-circle-thin fa-fw" aria-hidden="true"></i> Boundary</li>
</ul>
<div id="desktop-legend" class="legend hidden-xs hidden-sm"></div>
<!-- Basemap toggle menu -->
<div class="basemap-select hidden-xs hidden">
<div id="bm-map" class="btn btn-default active base-map"><i class="fa fa-map-o fa-fw" aria-hidden="true"></i> Map</div>
<div id="bm-sat" class="btn btn-default base-satellite"><i class="fa fa-globe fa-fw" aria-hidden="true"></i> Satellite</div>
</div>
<div class="basemap-select hidden-sm hidden-md hidden-lg hidden">
<div class="btn btn-default active base-map"><i class="fa fa-map-o fa-fw" aria-hidden="true"></i></div>
<div class="btn btn-default base-satellite"><i class="fa fa-globe fa-fw" aria-hidden="true"></i></div>
</div>
</div>
<!-- Map End -->
<div id="storyboard" class="col-xs-4">
<div class="scene1-text text"><h2 class="sceneTitle">INTERACTIVE TUTORIAL </h2>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0"
aria-valuemin="0" aria-valuemax="100" style="width:0%">
</div>
</div>
<p>Click the next button to explore the interactive options on the map.</p>
</div>
<div class="scene2-text text hidden"><h2 class="sceneTitle">CITY OF CAPE TOWN’S INFORMAL SETTLEMENTS </h2>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0"
aria-valuemin="0" aria-valuemax="100" style="width:0%">
</div>
</div>
<p>The black boundaries on the map are the borders of the informal settlements within the City of Cape Town. A informal settlement pocket is a cluster or grouping of tin shack housing which can vary in size from a few shacks to a few thousand. Pockets are grouped by the City of Cape Town to make up Informal Settlements.</p><p>Click next to follow the stories of two informal settlement residents. It will guide you on how you can use the tool to explore the data on the map.</p></div>
<div class="scene3-text text hidden"><h2 class="sceneTitle">FOLLOW THEIR STORIES </h2>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0"
aria-valuemin="0" aria-valuemax="100" style="width:0%">
</div>
</div>
<p>Asithandile and Zukiswa are two of the 3,000 residents of informal settlements who made submissions to the City of Cape Town’s 2016/2017 draft budget.</p></div>
<div class="scene4a-text-asithandile text hidden"><h2 class="sceneTitle"><a href="//www.youtube.com/watch?v=6gz05AQfPiU" data-lity class="btn btn-default video-btn"><i class="fa fa-video-camera" aria-hidden="true"></i> Watch video</a> ASITHANDILE’S STORY </h2>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="15"
aria-valuemin="0" aria-valuemax="100" style="width:15%">
</div>
</div>
<img style="cursor:pointer" href="//www.youtube.com/watch?v=6gz05AQfPiU" data-lity class="sceneImg" src="img/asithandile1.jpg" width="100%"><p>Asithandile lives in Kosovo Informal Settlement. He is wheelchair-bound after being shot by thugs in the Eastern Cape. This makes it difficult for him to navigate the poorly-maintained streets in Kosovo.</p>
</div>
<div class="scene4b-text-asithandile text hidden"><h2 class="sceneTitle"><a href="//www.youtube.com/watch?v=6gz05AQfPiU" data-lity class="btn btn-default video-btn"><i class="fa fa-video-camera" aria-hidden="true"></i> Watch video</a> ASITHANDILE’S STORY </h2>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="30"
aria-valuemin="0" aria-valuemax="100" style="width:30%">
</div>
</div>
<img class="sceneImg" src="img/asithandile2.jpg" width="100%"><p>He needs help to get to the toilet and to get on and off his wheelchair once he’s there. So he must ask his brother to help, which he says makes him feel "useless and uncomfortable".</p></div>
<div class="scene4c-text-asithandile text hidden"><h2 class="sceneTitle"><a href="//www.youtube.com/watch?v=6gz05AQfPiU" data-lity class="btn btn-default video-btn"><i class="fa fa-video-camera" aria-hidden="true"></i> Watch video</a> ASITHANDILE’S STORY </h2>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="45"
aria-valuemin="0" aria-valuemax="100" style="width:45%">
</div>
</div>
<img class="sceneImg" src="img/asithandile3.jpg" width="100%"><p>He feels vulnerable when he is alone at home, as there is no one to help him use the toilet and to assist him if he has a problem in his shack.</p><p>There are no toilets for the disabled in Kosovo and Asithandile’s plea to the City is to provide for them in the budget so that he - and others like him - can feel equal to able bodied people.</p></div>
<div class="scene4a-text-zukiswa text hidden"><h2 class="sceneTitle"><a href="//www.youtube.com/watch?v=8q2bH71IFNM" data-lity class="btn btn-default video-btn"><i class="fa fa-video-camera" aria-hidden="true"></i> Watch video</a> ZUKISWA’S STORY </h2>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="13"
aria-valuemin="0" aria-valuemax="100" style="width:13%">
</div>
</div>
<img style="cursor:pointer" href="//www.youtube.com/watch?v=8q2bH71IFNM" data-lity class="sceneImg" src="img/zukiswa.jpg" width="100%"><p>Zukiswa has been living in RR Section in Khayelitsha since 1999. When she first moved into the area there were no toilets at all. In 2015 the municipality built communal flush toilets, but she says it's not safe to use these flush toilets as they are far from her home. Also, these toilets are often blocked or broken.</p></div>
<div class="scene4b-text-zukiswa text hidden"><h2 class="sceneTitle"><a href="//www.youtube.com/watch?v=8q2bH71IFNM" data-lity class="btn btn-default video-btn"><i class="fa fa-video-camera" aria-hidden="true"></i> Watch video</a> ZUKISWA’S STORY </h2>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="25"
aria-valuemin="0" aria-valuemax="100" style="width:25%">
</div>
</div>
<img class="sceneImg" src="img/zukiswa3.jpg" width="100%"><p>"There is nothing that I hate more, or that makes me more angry, than the Mshengu toilet.</p><p>They are unbearable and ... are prone to maggots and stink".</p></div>
<div class="scene4c-text-zukiswa text hidden"><h2 class="sceneTitle"><a href="//www.youtube.com/watch?v=8q2bH71IFNM" data-lity class="btn btn-default video-btn"><i class="fa fa-video-camera" aria-hidden="true"></i> Watch video</a> ZUKISWA’S STORY </h2>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="38"
aria-valuemin="0" aria-valuemax="100" style="width:38%">
</div>
</div>
<img class="sceneImg" src="img/zukiswa4.jpg" width="100%"><p>Portable chemical flush toilets - known as Porta Potties - are common in informal settlements. But they are unhygienic and women who use them are prone to vaginal infections.</p></div>
<div class="scene4d-text-zukiswa text hidden"><h2 class="sceneTitle"><a href="//www.youtube.com/watch?v=8q2bH71IFNM" data-lity class="btn btn-default video-btn"><i class="fa fa-video-camera" aria-hidden="true"></i> Watch video</a> ZUKISWA’S STORY </h2>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="50"
aria-valuemin="0" aria-valuemax="100" style="width:50%">
</div>
</div>
<img class="sceneImg" src="img/zukiswa2.jpg" width="100%"><p>"As a person, whether young or old, who uses a bucket during the day or night, you can’t claim the City of Cape Town respects the dignity of black people."</p><p>Zukiswa has called on the City to take responsibility for implementing a plan with actionable time frames to provide permanent full flush toilets in informal settlements.</p><p>Challenges in RR Section:</p><ul><li>Using communal toilets puts residents at risk</li><li>There are too few toilets and they are often far away from some residents’ homes;</li><li>Zanele Xaki from RR Section in Khayelitsha was recently hit by a car while trying to cross a busy road to relieve herself in an open space next to the N2 highway</li><li>Her husband was attacked by thugs while walking to an open space next to the N2, which many people use as a "toilet"</li><li>Another resident, identified only as "Nosakhe" lived for six years with an overflowing drain in front of her house for home. Raw sewage from the drain often overflowed into her house. Her children had to be treated for diarrhoea by the Red Cross as a result of exposure to sewage, she says.</li></ul></div>
<div class="scene5-text-asithandile text hidden"><h2 class="sceneTitle">MAP LAYERS </h2>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60"
aria-valuemin="0" aria-valuemax="100" style="width:60%">
</div>
</div>
<p>The six boxes at the top of the map allow you to turn various data layers on the map on and off. You can also toggle between the boxes to explore further after completing this tutorial.</p><p>For now, click the “Temporary Toilets” button to switch from the “Boundary View” to see the toilets that are temporary, which are graded by colour. Of all the toilet types that the City of Cape Town has installed in informal Settlements only the full flush ones are considered to be permanent. The colour grading indicates the percentage of the toilet types that are permanent and/or full flush.</p></div>
<div class="scene5-text-zukiswa text hidden"><h2 class="sceneTitle">MAP LAYERS </h2>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="63"
aria-valuemin="0" aria-valuemax="100" style="width:63%">
</div>
</div>
<p>The six boxes at the top of the map allow you to turn various data layers on the map on and off. You can also toggle between the boxes to explore further after completing this tutorial.</p><p>For now though just click the "Upgrade Category" button to switch from the "Boundary View", to see the category map on the City of Cape Town’s upgrade rating of the pockets. We can see that RR Section is categorised as having "Many constraints. May need to be relocated".</p></div>
<div class="scene6-text-asithandile text hidden"><h2 class="sceneTitle">MAP LAYERS </h2>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="74"
aria-valuemin="0" aria-valuemax="100" style="width:74%">
</div>
</div>
<p>We can see that Kosovo has a fairly high level of temporary sanitation. Between 60 to 80% of the toilets provided by the City are not permanent full flush toilets but instead fall into the category of temporary solutions - i.e. portable, container, chemical, or bucket types.</p></div>
<div class="scene6-text-zukiswa text hidden"><h2 class="sceneTitle">MAP LAYERS </h2>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="75"
aria-valuemin="0" aria-valuemax="100" style="width:75%">
</div>
</div>
<p>Now click on the "Age" button to see the colour grading that indicates the age of an informal settlement. RR Section, for example, although categorised for relocation, is over 20 years old.</p></div>
<div class="scene7-text-asithandile text hidden"><h2 class="sceneTitle">DATA DASHBOARD </h2>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="87"
aria-valuemin="0" aria-valuemax="100" style="width:87%">
</div>
</div>
<p>Click on Kosovo Informal Settlement to see the data dashboard for this pocket.</p></div>
<div class="scene7-text-zukiswa text hidden"><h2 class="sceneTitle">DATA DASHBOARD </h2>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="87"
aria-valuemin="0" aria-valuemax="100" style="width:87%">
</div>
</div>
<p>Click on RR Section to see the data dashboard for this pocket.</p></div>
<div class="scene8-text-asithandile text hidden"><h2 class="sceneTitle">DATA DASHBOARD </h2>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="100"
aria-valuemin="0" aria-valuemax="100" style="width:100%">
</div>
</div>
<p>This gives a breakdown of the basic information about Kosovo. There are 6,086 informal dwellings in the area, with a toilet to households ratio of 1:5 (one toilet per five dwellings). This doesn't sound too bad, but look at the the pie chart and you’ll see that only 37% of these are full flush.</p>
<p>The bar chart on the right lists the categories that the City uses to describe limitations to upgrading different informal settlements. In Kosovo, for example, we can see that 16% of the area is too close to a railway line. Click on the link at the bottom of the page to see the detailed <a href="disclosure.html#constraints" target="_blank">descriptions</a> of these constraints. It is interesting in light of this information to note that despite these constraints, 488 (permanent) full flush toilets have already been installed in the area.</p></div>
<div class="scene8-text-zukiswa text hidden"><h2 class="sceneTitle">DATA DASHBOARD </h2>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="100"
aria-valuemin="0" aria-valuemax="100" style="width:100%">
</div>
</div>
<p>This gives a breakdown of the basic information about RR Section. There are 3,152 informal dwellings in the area, which is just under 18 hectares in size. This amounts to a density of 176 dwellings per hectare. We can also see that 57% of the toilets installed in RR Section are Porta-pottys.</p>
<p>The bar chart on the right lists the categories that the City uses to describe limitations to upgrading different informal settlements. In RR Section we can see the detail of the many constraints to upgrade that have been identified by the City of Cape Town, including the existence of waterbodies, private land ownership, proximity to metro roads, railways, servitudes and power lines.</p><p>Click on the link at the bottom of the page to see the detailed <a href="disclosure.html#constraints" target="_blank">descriptions</a> of these constraints. It is interesting in light of this information to note that despite these constraints, 307 (permanent) full flush toilets have already been installed in the area.</p></div>
<div class="scene9-text text hidden"><h2 class="sceneTitle">Scene Title </h2><p>Scene 9 placeholder text</p></div>
<ul class="story-buttons">
<li class="btn btn-default scene0-btn scene0-back scene-btn back-btn"><i class="fa fa-fw fa-arrow-left" aria-hidden="true"></i> Back</li>
<li class="btn btn-default scene2-btn scene2-next scene-btn next-btn">Next <i class="fa fa-fw fa-arrow-right" aria-hidden="true"></i></li>
<li class="btn btn-default scene1-btn scene1-back scene-btn back-btn hidden"><i class="fa fa-fw fa-arrow-left" aria-hidden="true"></i> Back</li>
<li class="btn btn-default scene3-btn scene3-next scene-btn next-btn hidden">Next <i class="fa fa-fw fa-arrow-right" aria-hidden="true"></i></li>
<li class="btn btn-default scene2-btn scene2-back scene-btn back-btn hidden"><i class="fa fa-fw fa-arrow-left" aria-hidden="true"></i> Back</li>
<li class="btn btn-default scene4-btn-asithandile scene4-next scene-btn next-btn hidden"><i class="fa fa-fw fa-book" aria-hidden="true"></i> Asithandile's story </li>
<li class="btn btn-default scene4-btn-zukiswa scene4-next scene-btn next-btn hidden"><i class="fa fa-fw fa-book" aria-hidden="true"></i> Zukiswa's story </li>
<li class="btn btn-default scene3-btn scene3-back scene-btn back-btn hidden"><i class="fa fa-fw fa-arrow-left" aria-hidden="true"></i> Back</li>
<li class="btn btn-default scene4b-btn-asithandile scene4b-next-asithandile scene-btn next-btn hidden">Next <i class="fa fa-fw fa-arrow-right" aria-hidden="true"></i></li>
<li class="btn btn-default scene4b-btn-zukiswa scene4b-next-zukiswa scene-btn next-btn hidden">Next <i class="fa fa-fw fa-arrow-right" aria-hidden="true"></i></li>
<li class="btn btn-default scene4-btn-asithandile scene4-back-asithandile scene-btn back-btn hidden"><i class="fa fa-fw fa-arrow-left" aria-hidden="true"></i> Back</li>
<li class="btn btn-default scene4-btn-zukiswa scene4-back-zukiswa scene-btn back-btn hidden"><i class="fa fa-fw fa-arrow-left" aria-hidden="true"></i> Back</li>
<li class="btn btn-default scene4c-btn-asithandile scene4c-next-asithandile scene-btn next-btn hidden">Next <i class="fa fa-fw fa-arrow-right" aria-hidden="true"></i></li>
<li class="btn btn-default scene4c-btn-zukiswa scene4c-next-zukiswa scene-btn next-btn hidden">Next <i class="fa fa-fw fa-arrow-right" aria-hidden="true"></i></li>
<li class="btn btn-default scene4b-btn-asithandile scene4b-back-asithandile scene-btn back-btn hidden"><i class="fa fa-fw fa-arrow-left" aria-hidden="true"></i> Back</li>
<li class="btn btn-default scene4b-btn-zukiswa scene4b-back-zukiswa scene-btn back-btn hidden"><i class="fa fa-fw fa-arrow-left" aria-hidden="true"></i> Back</li>
<li class="btn btn-default scene5-btn-asithandile scene5-next-asithandile scene-btn next-btn hidden">Next <i class="fa fa-fw fa-arrow-right" aria-hidden="true"></i></li>
<li class="btn btn-default scene4d-btn-zukiswa scene4d-next-zukiswa scene-btn next-btn hidden">Next <i class="fa fa-fw fa-arrow-right" aria-hidden="true"></i></li>
<li class="btn btn-default scene4c-btn-zukiswa scene4c-back-zukiswa scene-btn back-btn hidden"><i class="fa fa-fw fa-arrow-left" aria-hidden="true"></i> Back</li>
<li class="btn btn-default scene5-btn-zukiswa scene5-next-zukiswa scene-btn next-btn hidden">Next <i class="fa fa-fw fa-arrow-right" aria-hidden="true"></i></li>
<li class="btn btn-default scene4c-btn-asithandile scene4c-back-asithandile scene-btn back-btn hidden"><i class="fa fa-fw fa-arrow-left" aria-hidden="true"></i> Back</li>
<li class="btn btn-default scene4d-btn-zukiswa scene4d-back-zukiswa scene-btn back-btn hidden"><i class="fa fa-fw fa-arrow-left" aria-hidden="true"></i> Back</li>
<li class="btn btn-default scene6-btn-asithandile scene6-next-asithandile scene-btn next-btn hidden disabled">Next <i class="fa fa-fw fa-arrow-right" aria-hidden="true"></i></li>
<li class="btn btn-default scene6-btn-zukiswa scene6-next-zukiswa scene-btn next-btn hidden disabled">Next <i class="fa fa-fw fa-arrow-right" aria-hidden="true"></i></li>
<li class="btn btn-default scene5-btn-asithandile scene5-back-asithandile scene-btn back-btn hidden"><i class="fa fa-fw fa-arrow-left" aria-hidden="true"></i> Back</li>
<li class="btn btn-default scene5-btn-zukiswa scene5-back-zukiswa scene-btn back-btn hidden"><i class="fa fa-fw fa-arrow-left" aria-hidden="true"></i> Back</li>
<li class="btn btn-default scene7-btn scene7-btn-asithandile scene7-next-asithandile scene-btn next-btn hidden">Next <i class="fa fa-fw fa-arrow-right" aria-hidden="true"></i></li>
<li class="btn btn-default scene7-btn scene7-btn-zukiswa scene7-next-zukiswa scene-btn next-btn hidden disabled">Next <i class="fa fa-fw fa-arrow-right" aria-hidden="true"></i></li>
<li class="btn btn-default scene6-btn-asithandile scene6-back-asithandile scene-btn back-btn hidden"><i class="fa fa-fw fa-arrow-left" aria-hidden="true"></i> Back</li>
<li class="btn btn-default scene6-btn-zukiswa scene6-back-zukiswa scene-btn back-btn hidden"><i class="fa fa-fw fa-arrow-left" aria-hidden="true"></i> Back</li>
<li class="btn btn-default scene8-btn-asithandile scene8-next scene8-next-asithandile scene-btn next-btn hidden disabled">Next <i class="fa fa-fw fa-arrow-right" aria-hidden="true"></i></li>
<li class="btn btn-default scene8-btn-zukiswa scene8-next scene8-next-zukiswa scene-btn next-btn hidden disabled">Next <i class="fa fa-fw fa-arrow-right" aria-hidden="true"></i></li>
<li class="btn btn-default scene7-btn-asithandile scene7-back-asithandile scene-btn back-btn hidden"><i class="fa fa-fw fa-arrow-left" aria-hidden="true"></i> Back</li>
<li class="btn btn-default scene7-btn-zukiswa scene7-back-zukiswa scene-btn back-btn hidden"><i class="fa fa-fw fa-arrow-left" aria-hidden="true"></i> Back</li>
<li class="btn btn-default scene4-btn-zukiswa other-story-asithandile scene-btn back-btn hidden"><i class="fa fa-fw fa-book" aria-hidden="true"></i> Zukiswa's story </li>
<li class="btn btn-default scene4-btn-asithandile other-story-zukiswa scene-btn back-btn hidden"><i class="fa fa-fw fa-book" aria-hidden="true"></i> Asithandile's story </li>
<li class="btn btn-default explore-map scene-btn next-btn hidden"><i class="fa fa-fw fa-globe" aria-hidden="true"></i> Explore map</li>
</ul>
</div>
</div>
<div id="mobile-legend" class="row legend hidden-md hidden-lg"></div>
<!-- Dashboard Start -->
<div id="dashboard" class="row hidden">
<div class="col-md-3 col-basic-info">
<h2 id="pocket_name"></h2>
<p class="category"><b>Cluster</b></p>
<p id="is_cluster"></p>
<p class="category"><b>Size</b></p>
<p style="display: inline;" id="area_ha"></p><p style="display: inline;"> hectares</p><p></p>
<p class="category"><b>Number of households</b></p>
<p id="structure_count"></p>
<p class="category"><b>Household density</b></p>
<p style="display: inline;" id="density_dwellings_per_ha"></p><p style="display: inline;"> per hectare</p><p></p>
<p class="category"><b>Ratio of toilets to households</b></p>
<p id="ratio_toilets_dwellings"></p>
<p class="category"><b>Temporary toilets</b></p>
<p style="display: inline;" id="temp_sanitation"></p><p style="display: inline;">%</p><p></p>
<p class="category"><b>Age</b></p>
<p id="age_of_pocket"></p>
<p class="category"><b>Upgrade category</b></p>
<p id="upgrade_category"></p>
<p class="category"><b>Ward councillor</b></p>
<p id="ward_councillor"></p>
<p class="category"><b>Ward ID</b></p>
<p id="ward_id"></p>
</div>
<div class="col-md-4 col-toilets">
<div id="charts">
<h4>Types of Toilets <a style="color: #333" href="javascript: void(0)" data-toggle="tooltip" title="Full flush toilets are free standing toilets connected to a sewer system. The others are temporary: chemical toilets have a chemical container that can be removed or cleaned via suction. Container toilets have a cement shelter with a container that has to be removed. Porta-potties are portable toilets with a small container that must be collected and cleaned."><i class="fa fa-question-circle" aria-hidden="true"></i></a></h4>
<div id="toilet_chart"></div>
</div>
</div>
<div class="col-md-5 col-constraints">
<div id="charts">
<h4>Constraints on cluster level <a style="color: #333" href="javascript: void(0)" data-toggle="tooltip" title="A constraint is something that the City of Cape Town considers prevents them from installing proper sanitation. This chart shows the percentage of land that has these contraints."><i class="fa fa-question-circle" aria-hidden="true"></i></a></h4>
<div id="constraints_chart"></div>
</div>
</div>
</div>
<!-- Dashboard End -->
<div id="back-to-map" class="hidden row hidden-lg hidden-md hidden-sm">
<a href="#map" class="btn-block btn btn-default back-to-map"><i class="fa fa-arrow-circle-o-up" aria-hidden="true"></i> Back to map</a>
</div>
<!-- Data Source and Credits Start -->
<div id="footer" class="row hidden">
<div class="col-lg-8 col-lg-offset-2">
<p style="margin-top: 10px;">The data used to generate this map was obtained from the City of Cape Town in 2015. Some information was obtained from sources and others through access to information requests. Constraint data has been sourced directly from the City of Cape Town. Requests have been made for detailed descriptions of the constraint fields, and we will continue to follow up these requests. Download the datasets from Code4SA's data portal: <a href="https://data.code4sa.org/dataset/Informal-Settlement-Matrix/bky6-3za5" target="_blank">demographic and toilet data</a>, <a href="https://data.code4sa.org/dataset/Informal-Settlements-Upgrade-Constraints/3wnb-x2rd" target="_blank">constraints data</a>. Details, background, and discrepancies of our process and the data can be found <a href="disclosure.html" target="_blank">here</a>. It's also the place you can find the <a href="disclosure.html#constraints" target="_blank">definitions of the constraints</a>.</p>
<p>This map of informal settlements in Cape Town is the result of a collaboration between <a href="http://nu.org.za/">Ndifuna Ukwazi</a>, <a href="http://www.sjc.org.za/">Social Justice Coalition</a>, <a href="http://www.internationalbudget.org/">International Budget Partnership</a>, and <a href="http://www.code4sa.org/">Code for South Africa</a>. For further information and comment please contact <a href="mailto:[email protected]">[email protected]</a> or <a href="mailto:[email protected]">[email protected]</a>.</p>
</div>
</div>
<div id="logos" class="row hidden">
<div class="col-md-2 col-md-offset-2 col-sm-6">
<a href="http://nu.org.za" target="_blank"><img class="center-block" src="img/logo-nu.png"/></a>
</div>
<div class="col-md-2 col-sm-6">
<a href="http://sjc.org.za" target="_blank"><img class="center-block" src="img/logo-sjc.png"></a>
</div>
<div class="col-md-2 col-sm-6">
<a href="http://internationalbudget.org" target="_blank"><img class="center-block" src="img/logo-ibp.png"></a>
</div>
<div class="col-md-2 col-sm-6">
<a href="http://code4sa.org" target="_blank"><img class="center-block" src="img/logo-c4sa.png"></a>
</div>
</div>
<script src="js/map-control.js"></script>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="js/lity.min.js"></script>
<script>
google.charts.load('current', {
packages: ['corechart']
});
</script>
<script>
$(document).ready(function() {
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>