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 ...@@ -4,16 +4,18 @@ Web Services
Usage of the development API v0.1 Usage of the development API v0.1
--------------------------------- ---------------------------------
request parameters: 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. NOTE: Currently the attribute names may contain capital letters and spaces.
Spaces should be substituted as '<%20>' int the URL, for example Spaces should be substituted as `<%20>` int the URL, for example
'<Climate%20Zone>'. An alternative "coding-friendly" attribute naming will be implemented shortly, `<Climate%20Zone>`. An alternative "coding-friendly" attribute naming will be implemented shortly,
as unique strings for each attribute whithout spaces and upper case letters. 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. instead of the "coding-friendly" attribute names.
Examples: Examples:
.. code-block:: shell .. code-block:: shell
http://0.0.0.0:5000/api/v0.1 http://0.0.0.0:5000/api/v0.1
......
...@@ -817,3 +817,14 @@ section.map { ...@@ -817,3 +817,14 @@ section.map {
.stats .table { .stats .table {
font-size: smaller; 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 { ...@@ -811,4 +811,27 @@ section.map {
display: initial; } display: initial; }
#tabs.tab2 .tabcontent2 { #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) id,nameofshelter,zone,country,associateddisasterimmediatecause,gpslatitude,gpslongitude,climatezone,yearofconstructionfirstcompletedshelters,constructioncostperunitusd,topography
BI024,Adobe block house,Africa,Burundi,conflict related,,30.0083055556,moist tropical,2011 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 BI025,Plastic sheeting refugee shelter,Africa,Burundi,conflict related,3.3563611111,30.2743333333,moist tropical,2009,200,flat
BD021,Self Built Hut,Asia,Bangladesh,storm/cyclone,22.6861111111,89.8679166667,moist tropical,2009 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 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,Nepal,flood,28.8878888889,80.3958888889,moist tropical, 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 @@ ...@@ -2,7 +2,7 @@
* Created by nlrc on 22-7-16. * Created by nlrc on 22-7-16.
*/ */
$(document).ready(function () { $(document).ready(function () {
var zoneChart = dc.pieChart('#chart-ring-zone') var zoneChart = dc.pieChart('#chart-ring-zone')
...@@ -12,10 +12,16 @@ ...@@ -12,10 +12,16 @@
var countryChart = dc.rowChart('#chart-bar-country') var countryChart = dc.rowChart('#chart-bar-country')
var mapChart = dc_leaflet.markerChart("#chart-map") var mapChart = dc_leaflet.markerChart("#chart-map")
var tableChart = dc.dataTable("#shelters-table") 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.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 = [] // var data = []
// for (var key in dataObject) { // for (var key in dataObject) {
...@@ -31,14 +37,19 @@ ...@@ -31,14 +37,19 @@
var all = ndx.groupAll(); var all = ndx.groupAll();
var dataCount = dc.dataCount('#data-count') var dataCount = dc.dataCount('#data-count')
var zoneDimension = ndx.dimension(function (d) { 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 zoneCount = zoneDimension.group().reduceCount()
var crisisDimension = ndx.dimension(function (d) { var crisisDimension = ndx.dimension(function (d) {
if (d['Associated disaster / Immediate cause']) { if (d['associateddisasterimmediatecause']) {
return d['Associated disaster / Immediate cause']; return d['associateddisasterimmediatecause'];
} else { } else {
return 'No data' return 'No data'
} }
...@@ -46,8 +57,8 @@ ...@@ -46,8 +57,8 @@
}); });
var crisisCount = crisisDimension.group().reduceCount() var crisisCount = crisisDimension.group().reduceCount()
var climateDimension = ndx.dimension(function (d) { var climateDimension = ndx.dimension(function (d) {
if (d['Climate zone']) { if (d['climatezone']) {
return d['Climate zone']; return d['climatezone'];
} else { } else {
return 'No data' return 'No data'
} }
...@@ -57,8 +68,8 @@ ...@@ -57,8 +68,8 @@
var timeDimension = ndx.dimension(function (d) { var timeDimension = ndx.dimension(function (d) {
if (d['Year of construction (first completed shelters)']) { if (d['yearofconstructionfirstcompletedshelters']) {
return d3.time.year(dateFormat.parse(d['Year of construction (first completed shelters)'])); return d3.time.year(dateFormat.parse(d['yearofconstructionfirstcompletedshelters']));
} }
else { else {
return undefined; return undefined;
...@@ -67,8 +78,8 @@ ...@@ -67,8 +78,8 @@
}); });
var timeCount = timeDimension.group().reduceCount( var timeCount = timeDimension.group().reduceCount(
function (d) { function (d) {
if (d['Year of construction (first completed shelters)']) { if (d['yearofconstructionfirstcompletedshelters']) {
return d['Year of construction (first completed shelters)']; return d['yearofconstructionfirstcompletedshelters'];
} else { } else {
return undefined; return undefined;
} }
...@@ -77,9 +88,8 @@ ...@@ -77,9 +88,8 @@
); );
var shelters = ndx.dimension(function (d) { var shelters = ndx.dimension(function (d) {
if (d['GPS Latitude'] && d['GPS Longitude']) if (d['gpslatitude'] && d['gpslongitude']) {
{ return [d['gpslatitude'], d['gpslongitude']];
return [d['GPS Latitude'], d['GPS Longitude']];
} else { } else {
return undefined; return undefined;
} }
...@@ -87,8 +97,8 @@ ...@@ -87,8 +97,8 @@
}); });
var countryDimension = ndx.dimension(function (d) { var countryDimension = ndx.dimension(function (d) {
if (d.Country) { if (d.country) {
return d.Country; return d.country;
} else { } else {
return 'No data' return 'No data'
} }
...@@ -96,6 +106,16 @@ ...@@ -96,6 +106,16 @@
}) })
var countryCount = countryDimension.group().reduceCount() 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(); var sheltersGroup = shelters.group().reduceCount();
...@@ -105,9 +125,11 @@ ...@@ -105,9 +125,11 @@
.zoom(2) .zoom(2)
.filterByArea(true) .filterByArea(true)
.cluster(true) .cluster(true)
.on("filtered", getFiltersValues); .on("filtered", onFiltered);
addLayersToChart(mapChart) addLayersToChart(mapChart)
mapChart.map().scrollWheelZoom.disable()
zoneChart zoneChart
.width(110) .width(110)
...@@ -115,8 +137,7 @@ ...@@ -115,8 +137,7 @@
.dimension(zoneDimension) .dimension(zoneDimension)
.group(zoneCount) .group(zoneCount)
.innerRadius(20) .innerRadius(20)
.on("filtered", getFiltersValues); .on("filtered", onFiltered);
crisisChart crisisChart
.width(110) .width(110)
...@@ -124,7 +145,7 @@ ...@@ -124,7 +145,7 @@
.dimension(crisisDimension) .dimension(crisisDimension)
.group(crisisCount) .group(crisisCount)
.innerRadius(20) .innerRadius(20)
.on("filtered", getFiltersValues); .on("filtered", onFiltered);
climateChart climateChart
...@@ -133,7 +154,7 @@ ...@@ -133,7 +154,7 @@
.dimension(climateDimension) .dimension(climateDimension)
.group(climateCount) .group(climateCount)
.innerRadius(20) .innerRadius(20)
.on("filtered", getFiltersValues); .on("filtered", onFiltered);
; ;
timeChart timeChart
...@@ -142,23 +163,40 @@ ...@@ -142,23 +163,40 @@
.dimension(timeDimension) .dimension(timeDimension)
.group(timeCount) .group(timeCount)
.barPadding(5) .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) .xUnits(d3.time.year)
.on("filtered", getFiltersValues) .on("filtered", onFiltered)
.yAxis().tickFormat( .yAxis().tickFormat(
function (v) { return d3.format('f')(v) ; }); function (v) {
return d3.format('f')(v);
});
countryChart countryChart
.width(150) .width(200)
.height(250) .height(200)
.margins({left:0, right:10, top:10, bottom:20}) .margins({left: 0, right: 10, top: 10, bottom: 20})
.dimension(countryDimension) .dimension(countryDimension)
.group(countryCount) .group(countryCount)
.on("filtered", getFiltersValues) .on("filtered", onFiltered)
.xAxis().tickFormat( .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 tableChart
...@@ -168,22 +206,22 @@ ...@@ -168,22 +206,22 @@
}) })
.columns([ .columns([
function (d) { function (d) {
return d.ID; return d.id;
}, },
function (d) { function (d) {
return d['Name of shelter']; return d['nameofshelter'];
}, },
function (d) { function (d) {
return d.Zone; return d.zone;
}, },
function (d) { function (d) {
return d.Country; return d.country;
}, },
function (d) { function (d) {
return d['Associated disaster / Immediate cause']; return d[''];
}, },
function (d) { function (d) {
return d['Climate zone']; return d['climatezone'];
} }
]) ])
.on('renderlet', function (table) { .on('renderlet', function (table) {
...@@ -199,7 +237,8 @@ ...@@ -199,7 +237,8 @@
// Init chart filters // Init chart filters
function initFilters() { 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, ' '))); var parsed = parseHash.exec(decodeURIComponent(location.hash.replace(/\+/g, ' ')));
// console.log("parsed:", parsed) // console.log("parsed:", parsed)
function filter(chart, rank) { function filter(chart, rank) {
...@@ -209,61 +248,91 @@ ...@@ -209,61 +248,91 @@
} }
else { else {
var filterValues = parsed[rank].split(","); 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]) filterValues[i] = new Date(filterValues[i])
var start = new Date(filterValues[0]) var start = new Date(filterValues[0])
var end = new Date(filterValues[1]) var end = new Date(filterValues[1])
chart.filter(dc.filters.RangedFilter(start,end)) chart.filter(dc.filters.RangedFilter(start, end))
} }
else { break;
if (rank ==6) { case 7: //mapChart
// console.log('parsed:', filterValues) // console.log('parsed:', filterValues)
// filterValues = JSON.parse(filterValues) // filterValues = JSON.parse(filterValues)
// console.log(filterValues) // console.log(filterValues)
break;
} else { default:
for (var i = 0; i < filterValues.length; i++) { for (var i = 0; i < filterValues.length; i++) {
chart.filter(filterValues[i]); chart.filter(filterValues[i]);
} }
} }
} }
}
} }
if (parsed) { if (parsed) {
filter(zoneChart, 1); filter(zoneChart, 1);
filter(crisisChart, 2); filter(crisisChart, 2);
filter(climateChart, 3); filter(climateChart, 3);
filter(timeChart, 4); filter(timeChart, 4);
filter(countryChart, 5) filter(countryChart, 5);
filter(mapChart, 6); filter(topographyChart, 6);
// filter(mapChart, 7);
} }
dc.renderAll(); dc.renderAll();
} }
d3.select('#download') d3.select('#download')
.on('click', function() { .on('click', function () {
var data = allDimensions.top(Infinity); var data = allDimensions.top(Infinity);
var blob = new Blob([d3.csv.format(data)], {type: "text/csv;charset=utf-8"}); var blob = new Blob([d3.csv.format(data)], {type: "text/csv;charset=utf-8"});
saveAs(blob, 'data.csv'); 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() initFilters()
}) })
d3.selectAll('#all').on('click', function () { d3.selectAll('#all').on('click', function () {
dc.filterAll(); dc.filterAll();
dc.renderAll(); dc.renderAll();
$("select").val("");
}); });
// Serializing filters values in URL // Serializing filters values in URL
function getFiltersValues() { function getFiltersValues() {
var filters = [ var filters = [
{name: 'zone', value: zoneChart.filters()}, {name: 'zone', value: zoneChart.filters()},
...@@ -271,7 +340,8 @@ ...@@ -271,7 +340,8 @@
{name: 'climate', value: climateChart.filters()}, {name: 'climate', value: climateChart.filters()},
{name: 'time', value: timeChart.filters()}, {name: 'time', value: timeChart.filters()},
{name: 'country', value: countryChart.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:") // console.log("map:")
...@@ -287,25 +357,86 @@ ...@@ -287,25 +357,86 @@
d3.selectAll('#zone').on('click', function () { d3.selectAll('#zone').on('click', function () {
zoneChart.filterAll(); zoneChart.filterAll();
dc.redrawAll(); dc.redrawAll();
$("#zoneFilter").val("");
}); });
d3.selectAll('#crisis').on('click', function () { d3.selectAll('#crisis').on('click', function () {
crisisChart.filterAll(); crisisChart.filterAll();
dc.redrawAll(); dc.redrawAll();
$("#disasterFilter").val(<