386 lines
15 KiB
HTML
386 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head>
|
|
|
|
<meta charset="utf-8">
|
|
<meta name="generator" content="quarto-1.3.353">
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
|
|
|
|
|
|
<title>WASH Web - Vision</title>
|
|
<style>
|
|
code{white-space: pre-wrap;}
|
|
span.smallcaps{font-variant: small-caps;}
|
|
div.columns{display: flex; gap: min(4vw, 1.5em);}
|
|
div.column{flex: auto; overflow-x: auto;}
|
|
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
|
|
ul.task-list{list-style: none;}
|
|
ul.task-list li input[type="checkbox"] {
|
|
width: 0.8em;
|
|
margin: 0 0.8em 0.2em -1em; /* quarto-specific, see https://github.com/quarto-dev/quarto-cli/issues/4556 */
|
|
vertical-align: middle;
|
|
}
|
|
</style>
|
|
|
|
|
|
<script src="site_libs/quarto-nav/quarto-nav.js"></script>
|
|
<script src="site_libs/quarto-nav/headroom.min.js"></script>
|
|
<script src="site_libs/clipboard/clipboard.min.js"></script>
|
|
<script src="site_libs/quarto-search/autocomplete.umd.js"></script>
|
|
<script src="site_libs/quarto-search/fuse.min.js"></script>
|
|
<script src="site_libs/quarto-search/quarto-search.js"></script>
|
|
<meta name="quarto:offset" content="./">
|
|
<script src="site_libs/quarto-html/quarto.js"></script>
|
|
<script src="site_libs/quarto-html/popper.min.js"></script>
|
|
<script src="site_libs/quarto-html/tippy.umd.min.js"></script>
|
|
<script src="site_libs/quarto-html/anchor.min.js"></script>
|
|
<link href="site_libs/quarto-html/tippy.css" rel="stylesheet">
|
|
<link href="site_libs/quarto-html/quarto-syntax-highlighting.css" rel="stylesheet" id="quarto-text-highlighting-styles">
|
|
<script src="site_libs/bootstrap/bootstrap.min.js"></script>
|
|
<link href="site_libs/bootstrap/bootstrap-icons.css" rel="stylesheet">
|
|
<link href="site_libs/bootstrap/bootstrap.min.css" rel="stylesheet" id="quarto-bootstrap" data-mode="light">
|
|
<script id="quarto-search-options" type="application/json">{
|
|
"location": "navbar",
|
|
"copy-button": false,
|
|
"collapse-after": 3,
|
|
"panel-placement": "end",
|
|
"type": "overlay",
|
|
"limit": 20,
|
|
"language": {
|
|
"search-no-results-text": "No results",
|
|
"search-matching-documents-text": "matching documents",
|
|
"search-copy-link-title": "Copy link to search",
|
|
"search-hide-matches-text": "Hide additional matches",
|
|
"search-more-match-text": "more match in this document",
|
|
"search-more-matches-text": "more matches in this document",
|
|
"search-clear-button-title": "Clear",
|
|
"search-detached-cancel-button-title": "Cancel",
|
|
"search-submit-button-title": "Submit"
|
|
}
|
|
}</script>
|
|
|
|
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
|
|
<body class="nav-fixed">
|
|
|
|
<div id="quarto-search-results"></div>
|
|
<header id="quarto-header" class="headroom fixed-top">
|
|
<nav class="navbar navbar-expand-lg navbar-dark ">
|
|
<div class="navbar-container container-fluid">
|
|
<div class="navbar-brand-container">
|
|
<a class="navbar-brand" href="./index.html">
|
|
<span class="navbar-title">WASH Web</span>
|
|
</a>
|
|
</div>
|
|
<div id="quarto-search" class="" title="Search"></div>
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation" onclick="if (window.quartoToggleHeadroom) { window.quartoToggleHeadroom(); }">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse" id="navbarCollapse">
|
|
<ul class="navbar-nav navbar-nav-scroll me-auto">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="./index.html" rel="" target="">
|
|
<span class="menu-text">Home</span></a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link active" href="./vision.html" rel="" target="" aria-current="page">
|
|
<span class="menu-text">Vision</span></a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="./contact.html" rel="" target="">
|
|
<span class="menu-text">Contact</span></a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="./posts.html" rel="" target="">
|
|
<span class="menu-text">News</span></a>
|
|
</li>
|
|
</ul>
|
|
<div class="quarto-navbar-tools ms-auto">
|
|
</div>
|
|
</div> <!-- /navcollapse -->
|
|
</div> <!-- /container-fluid -->
|
|
</nav>
|
|
</header>
|
|
<!-- content -->
|
|
<div id="quarto-content" class="quarto-container page-columns page-rows-contents page-layout-article page-navbar">
|
|
<!-- sidebar -->
|
|
<!-- margin-sidebar -->
|
|
<div id="quarto-margin-sidebar" class="sidebar margin-sidebar">
|
|
|
|
</div>
|
|
<!-- main -->
|
|
<main class="content" id="quarto-document-content">
|
|
|
|
<header id="title-block-header" class="quarto-title-block default">
|
|
<div class="quarto-title">
|
|
<h1 class="title">Vision</h1>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="quarto-title-meta">
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</header>
|
|
|
|
<p>At the core of the vision, the idea is to make information discoverable, representative, and useful.</p>
|
|
<div class="quarto-figure quarto-figure-center">
|
|
<figure class="figure">
|
|
<p><img src="images/Screen Shot 2023-06-27 at 11.12.19 AM.png" class="img-fluid figure-img" width="270"></p>
|
|
</figure>
|
|
</div>
|
|
<p><strong>Discoverable</strong> means that it can not only be found through search and also by simply showing interest in the area and somehow you discover it. Browsing wikipedia articles should be sufficient to find key statistics on water and sanitation. At the moment, these statistics are a few steps away in specialist websites like washdata.org and this information is not automatically used in those articles. Showing interest in a specific district and search “water” and the name of US county should give key facts about water supplies. Data may already be available but simply not discoverable.</p>
|
|
<p><strong>Representative</strong> means that information should also represent the reality on the ground from different perspectives and that information is not from a single source of truth. It should also be appropriate to the local needs both in terms of the WASH sector and local populations and should be validated.</p>
|
|
<p><strong>Useful</strong> information is information from which one can begin to take action. Often key information about who to contact for more information, what happened, when and where is missing. If there is information about water services or sanitation, these are often dated.</p>
|
|
<p>In short, WASH Web intends to make information and expertise more accessible so that it is no longer only experts who are able to make informed decisions based on available evidence. Up until now, WASH Web has been an idea and a project that a few people have been playing with. This website and the project is open source and participatory meaning it is open to the initiative and inputs from others. Currently, WASHNote hosts and maintains the project website and source code.</p>
|
|
<p>Would you like to get involved? Please get in touch or add an issue on Github.</p>
|
|
<p>This website was last updated on 2023-07-31 .</p>
|
|
|
|
|
|
|
|
</main> <!-- /main -->
|
|
<script id="quarto-html-after-body" type="application/javascript">
|
|
window.document.addEventListener("DOMContentLoaded", function (event) {
|
|
const toggleBodyColorMode = (bsSheetEl) => {
|
|
const mode = bsSheetEl.getAttribute("data-mode");
|
|
const bodyEl = window.document.querySelector("body");
|
|
if (mode === "dark") {
|
|
bodyEl.classList.add("quarto-dark");
|
|
bodyEl.classList.remove("quarto-light");
|
|
} else {
|
|
bodyEl.classList.add("quarto-light");
|
|
bodyEl.classList.remove("quarto-dark");
|
|
}
|
|
}
|
|
const toggleBodyColorPrimary = () => {
|
|
const bsSheetEl = window.document.querySelector("link#quarto-bootstrap");
|
|
if (bsSheetEl) {
|
|
toggleBodyColorMode(bsSheetEl);
|
|
}
|
|
}
|
|
toggleBodyColorPrimary();
|
|
const icon = "";
|
|
const anchorJS = new window.AnchorJS();
|
|
anchorJS.options = {
|
|
placement: 'right',
|
|
icon: icon
|
|
};
|
|
anchorJS.add('.anchored');
|
|
const isCodeAnnotation = (el) => {
|
|
for (const clz of el.classList) {
|
|
if (clz.startsWith('code-annotation-')) {
|
|
return true;
|
|
}
|
|
}
|
|
return false;
|
|
}
|
|
const clipboard = new window.ClipboardJS('.code-copy-button', {
|
|
text: function(trigger) {
|
|
const codeEl = trigger.previousElementSibling.cloneNode(true);
|
|
for (const childEl of codeEl.children) {
|
|
if (isCodeAnnotation(childEl)) {
|
|
childEl.remove();
|
|
}
|
|
}
|
|
return codeEl.innerText;
|
|
}
|
|
});
|
|
clipboard.on('success', function(e) {
|
|
// button target
|
|
const button = e.trigger;
|
|
// don't keep focus
|
|
button.blur();
|
|
// flash "checked"
|
|
button.classList.add('code-copy-button-checked');
|
|
var currentTitle = button.getAttribute("title");
|
|
button.setAttribute("title", "Copied!");
|
|
let tooltip;
|
|
if (window.bootstrap) {
|
|
button.setAttribute("data-bs-toggle", "tooltip");
|
|
button.setAttribute("data-bs-placement", "left");
|
|
button.setAttribute("data-bs-title", "Copied!");
|
|
tooltip = new bootstrap.Tooltip(button,
|
|
{ trigger: "manual",
|
|
customClass: "code-copy-button-tooltip",
|
|
offset: [0, -8]});
|
|
tooltip.show();
|
|
}
|
|
setTimeout(function() {
|
|
if (tooltip) {
|
|
tooltip.hide();
|
|
button.removeAttribute("data-bs-title");
|
|
button.removeAttribute("data-bs-toggle");
|
|
button.removeAttribute("data-bs-placement");
|
|
}
|
|
button.setAttribute("title", currentTitle);
|
|
button.classList.remove('code-copy-button-checked');
|
|
}, 1000);
|
|
// clear code selection
|
|
e.clearSelection();
|
|
});
|
|
function tippyHover(el, contentFn) {
|
|
const config = {
|
|
allowHTML: true,
|
|
content: contentFn,
|
|
maxWidth: 500,
|
|
delay: 100,
|
|
arrow: false,
|
|
appendTo: function(el) {
|
|
return el.parentElement;
|
|
},
|
|
interactive: true,
|
|
interactiveBorder: 10,
|
|
theme: 'quarto',
|
|
placement: 'bottom-start'
|
|
};
|
|
window.tippy(el, config);
|
|
}
|
|
const noterefs = window.document.querySelectorAll('a[role="doc-noteref"]');
|
|
for (var i=0; i<noterefs.length; i++) {
|
|
const ref = noterefs[i];
|
|
tippyHover(ref, function() {
|
|
// use id or data attribute instead here
|
|
let href = ref.getAttribute('data-footnote-href') || ref.getAttribute('href');
|
|
try { href = new URL(href).hash; } catch {}
|
|
const id = href.replace(/^#\/?/, "");
|
|
const note = window.document.getElementById(id);
|
|
return note.innerHTML;
|
|
});
|
|
}
|
|
let selectedAnnoteEl;
|
|
const selectorForAnnotation = ( cell, annotation) => {
|
|
let cellAttr = 'data-code-cell="' + cell + '"';
|
|
let lineAttr = 'data-code-annotation="' + annotation + '"';
|
|
const selector = 'span[' + cellAttr + '][' + lineAttr + ']';
|
|
return selector;
|
|
}
|
|
const selectCodeLines = (annoteEl) => {
|
|
const doc = window.document;
|
|
const targetCell = annoteEl.getAttribute("data-target-cell");
|
|
const targetAnnotation = annoteEl.getAttribute("data-target-annotation");
|
|
const annoteSpan = window.document.querySelector(selectorForAnnotation(targetCell, targetAnnotation));
|
|
const lines = annoteSpan.getAttribute("data-code-lines").split(",");
|
|
const lineIds = lines.map((line) => {
|
|
return targetCell + "-" + line;
|
|
})
|
|
let top = null;
|
|
let height = null;
|
|
let parent = null;
|
|
if (lineIds.length > 0) {
|
|
//compute the position of the single el (top and bottom and make a div)
|
|
const el = window.document.getElementById(lineIds[0]);
|
|
top = el.offsetTop;
|
|
height = el.offsetHeight;
|
|
parent = el.parentElement.parentElement;
|
|
if (lineIds.length > 1) {
|
|
const lastEl = window.document.getElementById(lineIds[lineIds.length - 1]);
|
|
const bottom = lastEl.offsetTop + lastEl.offsetHeight;
|
|
height = bottom - top;
|
|
}
|
|
if (top !== null && height !== null && parent !== null) {
|
|
// cook up a div (if necessary) and position it
|
|
let div = window.document.getElementById("code-annotation-line-highlight");
|
|
if (div === null) {
|
|
div = window.document.createElement("div");
|
|
div.setAttribute("id", "code-annotation-line-highlight");
|
|
div.style.position = 'absolute';
|
|
parent.appendChild(div);
|
|
}
|
|
div.style.top = top - 2 + "px";
|
|
div.style.height = height + 4 + "px";
|
|
let gutterDiv = window.document.getElementById("code-annotation-line-highlight-gutter");
|
|
if (gutterDiv === null) {
|
|
gutterDiv = window.document.createElement("div");
|
|
gutterDiv.setAttribute("id", "code-annotation-line-highlight-gutter");
|
|
gutterDiv.style.position = 'absolute';
|
|
const codeCell = window.document.getElementById(targetCell);
|
|
const gutter = codeCell.querySelector('.code-annotation-gutter');
|
|
gutter.appendChild(gutterDiv);
|
|
}
|
|
gutterDiv.style.top = top - 2 + "px";
|
|
gutterDiv.style.height = height + 4 + "px";
|
|
}
|
|
selectedAnnoteEl = annoteEl;
|
|
}
|
|
};
|
|
const unselectCodeLines = () => {
|
|
const elementsIds = ["code-annotation-line-highlight", "code-annotation-line-highlight-gutter"];
|
|
elementsIds.forEach((elId) => {
|
|
const div = window.document.getElementById(elId);
|
|
if (div) {
|
|
div.remove();
|
|
}
|
|
});
|
|
selectedAnnoteEl = undefined;
|
|
};
|
|
// Attach click handler to the DT
|
|
const annoteDls = window.document.querySelectorAll('dt[data-target-cell]');
|
|
for (const annoteDlNode of annoteDls) {
|
|
annoteDlNode.addEventListener('click', (event) => {
|
|
const clickedEl = event.target;
|
|
if (clickedEl !== selectedAnnoteEl) {
|
|
unselectCodeLines();
|
|
const activeEl = window.document.querySelector('dt[data-target-cell].code-annotation-active');
|
|
if (activeEl) {
|
|
activeEl.classList.remove('code-annotation-active');
|
|
}
|
|
selectCodeLines(clickedEl);
|
|
clickedEl.classList.add('code-annotation-active');
|
|
} else {
|
|
// Unselect the line
|
|
unselectCodeLines();
|
|
clickedEl.classList.remove('code-annotation-active');
|
|
}
|
|
});
|
|
}
|
|
const findCites = (el) => {
|
|
const parentEl = el.parentElement;
|
|
if (parentEl) {
|
|
const cites = parentEl.dataset.cites;
|
|
if (cites) {
|
|
return {
|
|
el,
|
|
cites: cites.split(' ')
|
|
};
|
|
} else {
|
|
return findCites(el.parentElement)
|
|
}
|
|
} else {
|
|
return undefined;
|
|
}
|
|
};
|
|
var bibliorefs = window.document.querySelectorAll('a[role="doc-biblioref"]');
|
|
for (var i=0; i<bibliorefs.length; i++) {
|
|
const ref = bibliorefs[i];
|
|
const citeInfo = findCites(ref);
|
|
if (citeInfo) {
|
|
tippyHover(citeInfo.el, function() {
|
|
var popup = window.document.createElement('div');
|
|
citeInfo.cites.forEach(function(cite) {
|
|
var citeDiv = window.document.createElement('div');
|
|
citeDiv.classList.add('hanging-indent');
|
|
citeDiv.classList.add('csl-entry');
|
|
var biblioDiv = window.document.getElementById('ref-' + cite);
|
|
if (biblioDiv) {
|
|
citeDiv.innerHTML = biblioDiv.innerHTML;
|
|
}
|
|
popup.appendChild(citeDiv);
|
|
});
|
|
return popup.innerHTML;
|
|
});
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
</div> <!-- /content -->
|
|
|
|
|
|
|
|
</body></html> |