Commit f0f2f266 authored by Maarten van der Veen's avatar Maarten van der Veen
parents 50097e17 d0cef508
This diff is collapsed.
......@@ -4,16 +4,18 @@ Web Services
Usage of the development API v0.1
---------------------------------
request parameters:
'<attribute>' - pass one or more attribute names, such as '<attribute=Name,Vegetation>'
**attribute**: pass one or more attribute names, such as `<attribute=Name,Vegetation>`
NOTE: Currently the attribute names may contain capital letters and spaces.
Spaces should be substituted as '<%20>' int the URL, for example
'<Climate%20Zone>'. An alternative "coding-friendly" attribute naming will be implemented shortly,
Spaces should be substituted as `<%20>` int the URL, for example
`<Climate%20Zone>`. An alternative "coding-friendly" attribute naming will be implemented shortly,
as unique strings for each attribute whithout spaces and upper case letters.
'<format>' - use '<format=prettytext>' to get the nicely formatted attribute names in the JSON,
**format**: use `<format=prettytext>` to get the nicely formatted attribute names in the JSON,
instead of the "coding-friendly" attribute names.
Examples:
.. code-block:: shell
http://0.0.0.0:5000/api/v0.1
......
......@@ -817,3 +817,14 @@ section.map {
.stats .table {
font-size: smaller;
}
.stats h5 {
margin-top:20px;
}
.leaflet-container a {
margin-left:0px !important;
}
.dc-chart text {
fill: black !important;
}
\ No newline at end of file
......@@ -811,4 +811,27 @@ section.map {
display: initial; }
#tabs.tab2 .tabcontent2 {
display: initial; }
display: initial ; }
.stats {
display: inline-block;
}
.stats .table {
font-size: smaller !important;
}
.stats .table tr td {
font-weight: normal !important; ;
}
.stats h5 {
margin-top:20px;
}
.leaflet-container a {
margin-left:0px !important;
}
.dc-chart text {
fill: black !important;
}
ID,Name of shelter,Zone,Country,Associated disaster / Immediate cause,GPS Latitude,GPS Longitude,Climate zone,Year of construction (first completed shelters)
BI024,Adobe block house,Africa,Burundi,conflict related,,30.0083055556,moist tropical,2011
BI025,Plastic sheeting refugee shelter,Africa,Burundi,conflict related,3.3563611111,30.2743333333,moist tropical,2009
BD021,Self Built Hut,Asia,Bangladesh,storm/cyclone,22.6861111111,89.8679166667,moist tropical,2009
HT020,"CHF, Steel Frame Shelter",Americas & Caribbean,Haiti,earthquake,18.427825-72.8627139,-72.5347444,moist tropical,2010
NP022,Luxembourg RC Shelter 2,Asia,Nepal,flood,28.8878888889,80.3958888889,moist tropical,
id,nameofshelter,zone,country,associateddisasterimmediatecause,gpslatitude,gpslongitude,climatezone,yearofconstructionfirstcompletedshelters,constructioncostperunitusd,topography
BI024,Adobe block house,Africa,Burundi,conflict related,,30.0083055556,moist tropical,2011,1000,slope
BI025,Plastic sheeting refugee shelter,Africa,Burundi,conflict related,3.3563611111,30.2743333333,moist tropical,2009,200,flat
BD021,Self Built Hut,Asia Pacific,Bangladesh,storm/cyclone,22.6861111111,89.8679166667,moist tropical,2009,4500,
HT020,"CHF, Steel Frame Shelter",Americas & Caribbean,Haiti,earthquake,18.427825-72.8627139,-72.5347444,moist tropical,2010,3000,
NP022,Luxembourg RC Shelter 2,Asia Pacific,Nepal,flood,28.8878888889,80.3958888889,moist tropical,2009,3000,,
\ No newline at end of file
......@@ -2,7 +2,7 @@
* Created by nlrc on 22-7-16.
*/
$(document).ready(function () {
$(document).ready(function () {
var zoneChart = dc.pieChart('#chart-ring-zone')
......@@ -12,10 +12,16 @@
var countryChart = dc.rowChart('#chart-bar-country')
var mapChart = dc_leaflet.markerChart("#chart-map")
var tableChart = dc.dataTable("#shelters-table")
var topographyChart = dc.rowChart('#chart-topography');
var filterChartMap = {
'climateFilter': climateChart, 'zoneFilter': zoneChart, 'commercialFilter': undefined,
'disasterFilter': crisisChart,
'soilFilter': undefined, 'shelterTypeFilter': undefined, 'countryFilter': countryChart
}
d3.csv('/static/data/shelters-sample.csv', function (data) {
// d3.json("/api/v0.1/shelters", function(dataObject) {
// d3.json("api/v0.1/shelters", function(dataObject) {
//
// var data = []
// for (var key in dataObject) {
......@@ -31,14 +37,19 @@
var all = ndx.groupAll();
var dataCount = dc.dataCount('#data-count')
var zoneDimension = ndx.dimension(function (d) {
return d.Zone;
if (d.zone) {
return d.zone;
} else {
return "No data"
}
});
var zoneCount = zoneDimension.group().reduceCount()
var crisisDimension = ndx.dimension(function (d) {
if (d['Associated disaster / Immediate cause']) {
return d['Associated disaster / Immediate cause'];
if (d['associateddisasterimmediatecause']) {
return d['associateddisasterimmediatecause'];
} else {
return 'No data'
}
......@@ -46,8 +57,8 @@
});
var crisisCount = crisisDimension.group().reduceCount()
var climateDimension = ndx.dimension(function (d) {
if (d['Climate zone']) {
return d['Climate zone'];
if (d['climatezone']) {
return d['climatezone'];
} else {
return 'No data'
}
......@@ -57,8 +68,8 @@
var timeDimension = ndx.dimension(function (d) {
if (d['Year of construction (first completed shelters)']) {
return d3.time.year(dateFormat.parse(d['Year of construction (first completed shelters)']));
if (d['yearofconstructionfirstcompletedshelters']) {
return d3.time.year(dateFormat.parse(d['yearofconstructionfirstcompletedshelters']));
}
else {
return undefined;
......@@ -67,8 +78,8 @@
});
var timeCount = timeDimension.group().reduceCount(
function (d) {
if (d['Year of construction (first completed shelters)']) {
return d['Year of construction (first completed shelters)'];
if (d['yearofconstructionfirstcompletedshelters']) {
return d['yearofconstructionfirstcompletedshelters'];
} else {
return undefined;
}
......@@ -77,9 +88,8 @@
);
var shelters = ndx.dimension(function (d) {
if (d['GPS Latitude'] && d['GPS Longitude'])
{
return [d['GPS Latitude'], d['GPS Longitude']];
if (d['gpslatitude'] && d['gpslongitude']) {
return [d['gpslatitude'], d['gpslongitude']];
} else {
return undefined;
}
......@@ -87,8 +97,8 @@
});
var countryDimension = ndx.dimension(function (d) {
if (d.Country) {
return d.Country;
if (d.country) {
return d.country;
} else {
return 'No data'
}
......@@ -96,6 +106,16 @@
})
var countryCount = countryDimension.group().reduceCount()
var topographyDimension = ndx.dimension(function (d) {
if (d.topography) {
return d.topography;
} else {
return 'No data'
}
})
var topographyCount = topographyDimension.group().reduceCount()
var sheltersGroup = shelters.group().reduceCount();
......@@ -105,9 +125,11 @@
.zoom(2)
.filterByArea(true)
.cluster(true)
.on("filtered", getFiltersValues);
.on("filtered", onFiltered);
addLayersToChart(mapChart)
mapChart.map().scrollWheelZoom.disable()
zoneChart
.width(110)
......@@ -115,8 +137,7 @@
.dimension(zoneDimension)
.group(zoneCount)
.innerRadius(20)
.on("filtered", getFiltersValues);
.on("filtered", onFiltered);
crisisChart
.width(110)
......@@ -124,7 +145,7 @@
.dimension(crisisDimension)
.group(crisisCount)
.innerRadius(20)
.on("filtered", getFiltersValues);
.on("filtered", onFiltered);
climateChart
......@@ -133,7 +154,7 @@
.dimension(climateDimension)
.group(climateCount)
.innerRadius(20)
.on("filtered", getFiltersValues);
.on("filtered", onFiltered);
;
timeChart
......@@ -142,23 +163,40 @@
.dimension(timeDimension)
.group(timeCount)
.barPadding(5)
.x(d3.time.scale().domain([new Date(2008, 01, 01), new Date()]))
.x(d3.time.scale().domain([new Date(2003, 01, 01), new Date()]))
.xUnits(d3.time.year)
.on("filtered", getFiltersValues)
.on("filtered", onFiltered)
.yAxis().tickFormat(
function (v) { return d3.format('f')(v) ; });
function (v) {
return d3.format('f')(v);
});
countryChart
.width(150)
.height(250)
.margins({left:0, right:10, top:10, bottom:20})
.width(200)
.height(200)
.margins({left: 0, right: 10, top: 10, bottom: 20})
.dimension(countryDimension)
.group(countryCount)
.on("filtered", getFiltersValues)
.on("filtered", onFiltered)
.xAxis().tickFormat(
function (v) { return d3.format('f')(v) ; });
function (v) {
return d3.format('f')(v);
});
countryChart.xAxis().ticks(10)
topographyChart
.width(200)
.height(200)
.margins({left: 0, right: 10, top: 10, bottom: 20})
.dimension(topographyDimension)
.group(topographyCount)
.on("filtered", onFiltered)
.xAxis().tickFormat(
function (v) {
return d3.format('f')(v);
});
tableChart
......@@ -168,22 +206,22 @@
})
.columns([
function (d) {
return d.ID;
return d.id;
},
function (d) {
return d['Name of shelter'];
return d['nameofshelter'];
},
function (d) {
return d.Zone;
return d.zone;
},
function (d) {
return d.Country;
return d.country;
},
function (d) {
return d['Associated disaster / Immediate cause'];
return d[''];
},
function (d) {
return d['Climate zone'];
return d['climatezone'];
}
])
.on('renderlet', function (table) {
......@@ -199,7 +237,8 @@
// Init chart filters
function initFilters() {
var parseHash = /^#zone=([A-Za-z0-9,_\-\/\s]*)&crisis=([A-Za-z0-9,_\-\/\s]*)&climate=([A-Za-z0-9,_\-\/\s]*)&time=([A-Za-z0-9,_\-\/\s\(\):+]*)&country=([A-Za-z0-9,_\-\/\s]*)&map=(.*)$/;
var parseHash = /^#zone=([A-Za-z0-9,_\-\/\s]*)&crisis=([A-Za-z0-9,_\-\/\s]*)&climate=([A-Za-z0-9,_\-\/\s]*)&time=([A-Za-z0-9,_\-\/\s\(\):+]*)&country=([A-Za-z0-9,_\-\/\s]*)&topography=([A-Za-z0-9,_\-\/\s]*)$/;
var parsed = parseHash.exec(decodeURIComponent(location.hash.replace(/\+/g, ' ')));
// console.log("parsed:", parsed)
function filter(chart, rank) {
......@@ -209,61 +248,91 @@
}
else {
var filterValues = parsed[rank].split(",");
// console.log(filterValues)
if (rank ==4 && filterValues.length==2) { //filtering timeChart
switch (rank) {
case 4: //timeChart
chart.filter(null);
if (filterValues.length == 2) {
filterValues[i] = new Date(filterValues[i])
var start = new Date(filterValues[0])
var end = new Date(filterValues[1])
chart.filter(dc.filters.RangedFilter(start,end))
chart.filter(dc.filters.RangedFilter(start, end))
}
else {
if (rank ==6) {
break;
case 7: //mapChart
// console.log('parsed:', filterValues)
// filterValues = JSON.parse(filterValues)
// console.log(filterValues)
} else {
break;
default:
for (var i = 0; i < filterValues.length; i++) {
chart.filter(filterValues[i]);
}
}
}
}
}
if (parsed) {
filter(zoneChart, 1);
filter(crisisChart, 2);
filter(climateChart, 3);
filter(timeChart, 4);
filter(countryChart, 5)
filter(mapChart, 6);
filter(countryChart, 5);
filter(topographyChart, 6);
// filter(mapChart, 7);
}
dc.renderAll();
}
d3.select('#download')
.on('click', function() {
.on('click', function () {
var data = allDimensions.top(Infinity);
var blob = new Blob([d3.csv.format(data)], {type: "text/csv;charset=utf-8"});
saveAs(blob, 'data.csv');
});
function onFiltered(chart) {
getFiltersValues();
generateShelterList(allDimensions.top(Infinity));
var value = ''
if (chart.filters().length>0) {
value = chart.filters()[chart.filters().length-1]
}
for (var filter in filterChartMap) {
var chartx = filterChartMap[filter]
if (chartx && chartx.filters() == chart.filters()) {
$('#' + filter).val(value);
}
}
}
generateShelterList(data);
initFilters()
})
d3.selectAll('#all').on('click', function () {
dc.filterAll();
dc.renderAll();
$("select").val("");
});
// Serializing filters values in URL
function getFiltersValues() {
var filters = [
{name: 'zone', value: zoneChart.filters()},
......@@ -271,7 +340,8 @@
{name: 'climate', value: climateChart.filters()},
{name: 'time', value: timeChart.filters()},
{name: 'country', value: countryChart.filters()},
{ name: 'map', value: JSON.stringify(mapChart.filters())}
{name: 'topography', value: topographyChart.filters()},
// {name: 'map', value: JSON.stringify(mapChart.filters())}
];
// console.log("map:")
......@@ -287,25 +357,86 @@
d3.selectAll('#zone').on('click', function () {
zoneChart.filterAll();
dc.redrawAll();
$("#zoneFilter").val("");
});
d3.selectAll('#crisis').on('click', function () {
crisisChart.filterAll();
dc.redrawAll();
$("#disasterFilter").val("");
});
d3.selectAll('#climate').on('click', function () {
climateChart.filterAll();
dc.redrawAll();
$("#climateFilter").val("");
});
d3.selectAll('#country').on('click', function () {
countryChart.filterAll();
dc.redrawAll();
$("#countryFilter").val("");
});
d3.selectAll('#cost').on('click', function () {
costChart.filterAll();
dc.redrawAll();
});
d3.selectAll('#topography').on('click', function () {
topographyChart.filterAll();
dc.redrawAll();
});
loadFilterDomainValues()
$('select').on('change', function() {
if (this.id in filterChartMap && filterChartMap[this.id]) {
var value = this.value
filterChartMap[this.id].filterAll();
if (value) {
filterChartMap[this.id].filter(value);
}
dc.redrawAll();
}
});
function loadFilterDomainValues() {
var filters = {
'climateFilter': 'climatezone', 'zoneFilter': 'zone', 'commercialFilter': 'typeofimplementingagency',
'disasterFilter': 'associateddisasterimmediatecause',
'soilFilter': 'soiltype', 'shelterTypeFilter': 'typeofshelter', 'countryFilter': 'country'
// 'topographyFilter': 'topography'
}
for (var filterId in filters) {
var dropdown = document.getElementById(filterId)
if (dropdown) {
(function(attrName, htmlElement) {
d3.json("api/v0.1/attributes/" + encodeURI(attrName), function (valuesObject) {
// console.log(attrName + JSON.stringify(valuesObject));
if (valuesObject && valuesObject[attrName]) {
var values = valuesObject[attrName].split(';')
for (var i = 0; i < values.length; ++i) {
addOption(htmlElement, values[i], values[i]);
}
}
})
})(filters[filterId], dropdown);
}
}
}
})
function addLayersToChart(mapChart) {
function addLayersToChart(mapChart) {
var redCrossLayer = L.tileLayer.wms("https://shelter-database.org:8443/geoserver/ows?service=wms&version=1.1.1&request=GetCapabilities", {
layers: 'shelters:redcross',
transparent: true,
......@@ -364,9 +495,34 @@
"Koeppen-Geiger": koeppenGeigerLayer
}).addTo(map);
};
};
d3.select("#share")
.on('click', function() {
d3.select("#share")
.on('click', function () {
window.prompt("Link to share:", window.location.href);
})
addOption = function (selectbox, text, value) {
var optn = document.createElement("OPTION");
optn.text = text;
optn.value = value;
selectbox.options.add(optn);
}
function generateShelterList(data) {
$('#shelterList').empty();
for (var i = 0; i <data.length; i ++)
{
var shelter = $('<div class="shelter"/>').appendTo('#shelterList');
shelter.append('<div class="image" style="background-image: url(' + '' + ')"></div> ' +
'<h4 class="title"><a href="shelter.html">' +data[i].nameofshelter+ '</a></h4>' +
'<div class="country">'+data[i].country+'</div> ' +
'<div class="description"><p>' +'' + '</p></div>');
}
}
......@@ -42,43 +42,38 @@
<h5>Filter by</h5>
<form class="myform">
<label for="f1" class="button button-drop">
<select id="f1">
<label for="climateFilter" class="button button-drop">
<select id="climateFilter">
<option value="" selected="selected">Climate</option>
<option value="" disabled>---</option>
<option value="dry moderate">dry moderate</option>
<option value="dry polar">dry polar</option>
<option value="dry tropical">dry tropical</option>
<option value="moist moderate">moist moderate</option>
<option value="moist polar">moist polar</option>
<option value="moist tropical">moist tropical</option>
</select>
</label>
<label for="f2" class="button button-drop">
<select id="f2">
<label for="zoneFilter" class="button button-drop">
<select id="zoneFilter">
<option value="" selected="selected">Continent</option>
<option value="" disabled>---</option>
</select>
</label>
<label for="f3" class="button button-drop">
<select id="f3">
<label for="disasterFilter" class="button button-drop">
<select id="disasterFilter">
<option value="" selected="selected">Disaster</option>
<option value="" disabled>---</option>
</select>
</label>
<label for="f4" class="button button-drop">
<select id="f4">
<label for="materialFilter" class="button button-drop">
<select id="materialFilter">
<option value="" selected="selected">Material</option>