-
Notifications
You must be signed in to change notification settings - Fork 2
/
Red_cross_data.html
358 lines (335 loc) · 12.1 KB
/
Red_cross_data.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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Kenya Red Cross Society</title>
<script type="text/javascript" src="/javascripts/tabber.js"></script>
<link rel="stylesheet" href="/stylesheets/example.css" TYPE="text/css" MEDIA="screen">
<link rel="stylesheet" href="/stylesheets/example-print.css" TYPE="text/css" MEDIA="print">
<script type="text/javascript">
/* Optional: Temporarily hide the "tabber" class so it does not "flash"
on the page as plain HTML. After tabber runs, the class is changed
to "tabberlive" and it will appear. */
document.write('<style type="text/css">.tabber{display:none;}<\/style>');
</script>
</head>
<body>
<style>
/*
.chart rect {
fill: steelblue;
}
*/
.chart .legend {
fill: black;
font: 14px sans-serif;
text-anchor: start;
font-size: 12px;
}
.chart text {
fill: white;
font: 10px sans-serif;
text-anchor: end;
}
.chart .label {
fill: black;
font: 14px sans-serif;
text-anchor: end;
}
.bar:hover {
fill: brown;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
</style>
<h1>Kenya Red Cross Society </h1>
<h2>WASH research in Bomet County</h2>
<div class="tabber">
<div class="tabbertab">
<h2>About the project </h2>
<p>
In 2014, Kenya Red Cross Society with financial and technical support from British Red Cross society started a four year WASH in Kenya project which seeks to improve hygiene and sanitation practices and increase access to improved water and sanitation for 155,000 women, men, girls and boys in Bomet, Taita Taveta and Kilifi Counties (Bomet county data presented here).
The programme seeks to achieve: </p>
<p>
<ul>
<li> Increased awareness and understanding of health risks linked to unhygienic practices, resulting in behaviour change e.g. critical times for hand washing, safe disposal child faeces; knowledge of the causes/prevention of WASH-related diseases, safe water chain and open defecation contamination risks.</li>
<li> Increased use of rehabilitated/new water infrastructure, improved water quality, reduced collection distances; increased demand for/use of latrines, reduced open defecation and reduced contamination risk.</li>
<li> Enabled and strengthened communities, able to foster connections, engage and solicit support from local government in arrangements for on-going WASH operation and maintenance.</li>
<li> Shared evidence-based experience and coordination between WASH actors </li>
</ul>
In order to achieve the programme ambitions, among many other things, there is need to understand household culture, values and attitudes towards latrine construction, the willingness and ability of households to construct and maintain latrines without any external assistance and to understand the impact of the Governments non-subsidy approach on sanitation. There is need to understand hygiene practices and what influences people to change behaviour. In terms of water, there is need to understand the strategies that have been taken to address issues of high non-revenue water, to understand household willingness to pay and to see how water reforms are operating in practice.
The targeted research will be undertaken to help address some of these questions. This will be combined with learning from routine monitoring and evaluations data and used on an on-going basis to inform decision making and provide a basis for learning and sharing at community, national and international levels.
</p>
</div>
<div class="tabbertab">
<h2>WASH Variables</h2>
<p>
<svg class="chart"></svg>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var data = {
labels: [
'Appropriate handwashing techniques','Caregiver knowing 3 critical times for hand washing','Importance of disposing of child faeces','Improved drinking water within 2 KM','Improved drinking water within 1 KM','Latrines with handwashing facilities','People using a basic latrine with a handwashing facility'
],
series: [
{
label: 'Chepalungu',
values: [87.6 ,46.8,46.8,48,44.2,4.4,4.4]
},
{
label: 'Bomet_central',
values: [85.9,57.6,57.6,43.4,41.4,13.6,11.9]
},
{
label: 'Bomet',
values: [ 86.9,51.4,51.4,0,0,8.4,7.6]
},]
};
var chartWidth = 600,
barHeight = 20,
groupHeight = barHeight * data.series.length,
gapBetweenGroups = 5,
spaceForLabels = 350,
spaceForLegend = 200;
// Zip the series data together (first values, second values, etc.)
var zippedData = [];
for (var i=0; i<data.labels.length; i++) {
for (var j=0; j<data.series.length; j++) {
zippedData.push(data.series[j].values[i]);
}
}
// Color scale
var color = d3.scale.category10();
var chartHeight = barHeight * zippedData.length + gapBetweenGroups * data.labels.length;
var x = d3.scale.linear()
.domain([0, d3.max(zippedData)])
.range([0, chartWidth]);
var y = d3.scale.linear()
.range([chartHeight + gapBetweenGroups, 0]);
var yAxis = d3.svg.axis()
.scale(y)
.tickFormat('')
.tickSize(0)
.orient("left");
// Specify the chart area and dimensions
var chart = d3.select(".chart")
.attr("width", spaceForLabels + chartWidth + spaceForLegend)
.attr("height", chartHeight);
// Create bars
var bar = chart.selectAll("g")
.data(zippedData)
.enter().append("g")
.attr("transform", function(d, i) {
return "translate(" + spaceForLabels + "," + (i * barHeight + gapBetweenGroups * (0.5 + Math.floor(i/data.series.length))) + ")";
});
// Create rectangles of the correct width
bar.append("rect")
.attr("fill", function(d,i) { return color(i % data.series.length); })
.attr("class", "bar")
.attr("width", x)
.attr("height", barHeight - 1);
// Add text label in bar
bar.append("text")
.attr("x", function(d) { return x(d) - 3; })
.attr("y", barHeight / 2)
.attr("fill", "red")
.attr("dy", ".35em")
.text(function(d) { return d + '%'; });
// Draw labels
bar.append("text")
.attr("class", "label")
.attr("x", function(d) { return - 10; })
.attr("y", groupHeight / 2)
.attr("dy", ".35em")
.text(function(d,i) {
if (i % data.series.length === 0)
return data.labels[Math.floor(i/data.series.length)];
else
return "" });
chart.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + spaceForLabels + ", " + -gapBetweenGroups/2 + ")")
.call(yAxis);
// Draw legend
var legendRectSize = 18,
legendSpacing = 4;
var legend = chart.selectAll('.legend')
.data(data.series)
.enter()
.append('g')
.attr('transform', function (d, i) {
var height = legendRectSize + legendSpacing;
var offset = -gapBetweenGroups/2;
var horz = spaceForLabels + chartWidth + 40 - legendRectSize;
var vert = i * height - offset;
return 'translate(' + horz + ',' + vert + ')';
});
legend.append('rect')
.attr('width', legendRectSize)
.attr('height', legendRectSize)
.style('fill', function (d, i) { return color(i); })
.style('stroke', function (d, i) { return color(i); });
legend.append('text')
.attr('class', 'legend')
.attr('x', legendRectSize + legendSpacing)
.attr('y', legendRectSize - legendSpacing)
.text(function (d) { return d.label; });
</script>
</p>
</div>
<div class="tabbertab">
<h2>Health Variables</h2>
<p>
<style>
/*
.chart rect {
fill: steelblue;
}
*/
.chart1 .legend {
fill: black;
font: 14px sans-serif;
text-anchor: start;
font-size: 12px;
}
.chart1 text {
fill: white;
font: 10px sans-serif;
text-anchor: end;
}
.chart1 .label {
fill: black;
font: 14px sans-serif;
text-anchor: end;
}
.bar:hover {
fill: brown;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
</style>
<svg class="chart1"></svg>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var data = {
labels: [
'Minimum meal frequency','Early initiation of breastfeeding', 'Access to health care services','Under 24 months fully immunised', 'Exclusive breastfeeding','Correct knowledge of causes and prevention of diarrhea','Infants under Minimum dietary diversity','New-borns with low birth weight', 'Under 5 years affected by diarrhoea'
],
series: [
{
label: 'Chepalungu',
values: [99.1,93.8,92.4,90.5,68.3,33.2,17.9,0.4,3.5]
},
{
label: 'Bomet_central',
values: [94.4,88.7,91.1,76.5,56.7,38.6,16.7,11.2,3.3]
},
{
label: 'Bomet',
values: [96.8,90.7,91.9,86.1,64.5,35.5,17.5,5.03,3.4]
},]
};
var chartWidth = 500,
barHeight = 20,
groupHeight = barHeight * data.series.length,
gapBetweenGroups = 5,
spaceForLabels = 300,
spaceForLegend = 150;
// Zip the series data together (first values, second values, etc.)
var zippedData = [];
for (var i=0; i<data.labels.length; i++) {
for (var j=0; j<data.series.length; j++) {
zippedData.push(data.series[j].values[i]);
}
}
// Color scale
var color = d3.scale.category10();
var chartHeight = barHeight * zippedData.length + gapBetweenGroups * data.labels.length;
var x = d3.scale.linear()
.domain([0, d3.max(zippedData)])
.range([0, chartWidth]);
var y = d3.scale.linear()
.range([chartHeight + gapBetweenGroups, 0]);
var yAxis = d3.svg.axis()
.scale(y)
.tickFormat('')
.tickSize(0)
.orient("left");
// Specify the chart area and dimensions
var chart1 = d3.select(".chart1")
.attr("width", spaceForLabels + chartWidth + spaceForLegend)
.attr("height", chartHeight);
// Create bars
var bar = chart1.selectAll("g")
.data(zippedData)
.enter().append("g")
.attr("transform", function(d, i) {
return "translate(" + spaceForLabels + "," + (i * barHeight + gapBetweenGroups * (0.5 + Math.floor(i/data.series.length))) + ")";
});
// Create rectangles of the correct width
bar.append("rect")
.attr("fill", function(d,i) { return color(i % data.series.length); })
.attr("class", "bar")
.attr("width", x)
.attr("height", barHeight - 1);
// Add text label in bar
bar.append("text")
.attr("x", function(d) { return x(d) - 3; })
.attr("y", barHeight / 2)
.attr("fill", "red")
.attr("dy", ".35em")
.text(function(d) { return d + '%'; });
// Draw labels
bar.append("text")
.attr("class", "label")
.attr("x", function(d) { return - 10; })
.attr("y", groupHeight / 2)
.attr("dy", ".35em")
.text(function(d,i) {
if (i % data.series.length === 0)
return data.labels[Math.floor(i/data.series.length)];
else
return ""});
chart1.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + spaceForLabels + ", " + -gapBetweenGroups/2 + ")")
.call(yAxis);
// Draw legend
var legendRectSize = 18,
legendSpacing = 4;
var legend = chart1.selectAll('.legend')
.data(data.series)
.enter()
.append('g')
.attr('transform', function (d, i) {
var height = legendRectSize + legendSpacing;
var offset = -gapBetweenGroups/2;
var horz = spaceForLabels + chartWidth + 40 - legendRectSize;
var vert = i * height - offset;
return 'translate(' + horz + ',' + vert + ')';
});
legend.append('rect')
.attr('width', legendRectSize)
.attr('height', legendRectSize)
.style('fill', function (d, i) { return color(i); })
.style('stroke', function (d, i) { return color(i); });
legend.append('text')
.attr('class', 'legend')
.attr('x', legendRectSize + legendSpacing)
.attr('y', legendRectSize - legendSpacing)
.text(function (d) { return d.label; });
</script>
</p>
</div>
</div>
</body>
<p>← <a href="https://data.humdata.org/search?q=redcross">More on HDX</a></p>
</html>