Commit f0f2f266 authored by Maarten van der Veen's avatar Maarten van der Veen
parents 50097e17 d0cef508
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -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
......
......@@ -816,4 +816,15 @@ section.map {
.stats .table {
font-size: smaller;
}
\ No newline at end of file
}
.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,371 +2,527 @@
* Created by nlrc on 22-7-16.
*/
$(document).ready(function () {
var zoneChart = dc.pieChart('#chart-ring-zone')
var crisisChart = dc.pieChart('#chart-ring-crisis')
var climateChart = dc.pieChart('#chart-ring-climate')
var timeChart = dc.barChart('#chart-timeline');
var countryChart = dc.rowChart('#chart-bar-country')
var mapChart = dc_leaflet.markerChart("#chart-map")
var tableChart = dc.dataTable("#shelters-table")
d3.csv('/static/data/shelters-sample.csv', function (data) {
// d3.json("/api/v0.1/shelters", function(dataObject) {
//
// var data = []
// for (var key in dataObject) {
// data.push(dataObject[key])
// }
var dateFormat = d3.time.format('%Y');
var ndx = crossfilter(data);
var allDimensions = ndx.dimension(function (d) {
return d;
});
var all = ndx.groupAll();
var dataCount = dc.dataCount('#data-count')
var zoneDimension = ndx.dimension(function (d) {
return d.Zone;
});
var zoneCount = zoneDimension.group().reduceCount()
var crisisDimension = ndx.dimension(function (d) {
if (d['Associated disaster / Immediate cause']) {
return d['Associated disaster / Immediate cause'];
} else {
return 'No data'
}
$(document).ready(function () {
var zoneChart = dc.pieChart('#chart-ring-zone')
var crisisChart = dc.pieChart('#chart-ring-crisis')
var climateChart = dc.pieChart('#chart-ring-climate')
var timeChart = dc.barChart('#chart-timeline');
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) {
//
// var data = []
// for (var key in dataObject) {
// data.push(dataObject[key])
// }
var dateFormat = d3.time.format('%Y');
var ndx = crossfilter(data);
var allDimensions = ndx.dimension(function (d) {
return d;
});
var all = ndx.groupAll();
var dataCount = dc.dataCount('#data-count')
var zoneDimension = ndx.dimension(function (d) {
if (d.zone) {
return d.zone;
} else {
return "No data"
}
});
});
var crisisCount = crisisDimension.group().reduceCount()
var climateDimension = ndx.dimension(function (d) {
if (d['Climate zone']) {
return d['Climate zone'];
} else {
return 'No data'
}
var zoneCount = zoneDimension.group().reduceCount()
});
var climateCount = climateDimension.group().reduceCount()
var crisisDimension = ndx.dimension(function (d) {
if (d['associateddisasterimmediatecause']) {
return d['associateddisasterimmediatecause'];
} else {
return 'No data'
}
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)']));
}
else {
return undefined;
}
});
var crisisCount = crisisDimension.group().reduceCount()
var climateDimension = ndx.dimension(function (d) {
if (d['climatezone']) {
return d['climatezone'];
} else {
return 'No data'
}
});
var timeCount = timeDimension.group().reduceCount(
function (d) {
if (d['Year of construction (first completed shelters)']) {
return d['Year of construction (first completed shelters)'];
} else {
return undefined;
}
});
var climateCount = climateDimension.group().reduceCount()
}
);
var shelters = ndx.dimension(function (d) {
if (d['GPS Latitude'] && d['GPS Longitude'])
{
return [d['GPS Latitude'], d['GPS Longitude']];
} else {
return undefined;
}
});
var timeDimension = ndx.dimension(function (d) {
if (d['yearofconstructionfirstcompletedshelters']) {
return d3.time.year(dateFormat.parse(d['yearofconstructionfirstcompletedshelters']));
}
else {
return undefined;
}
var countryDimension = ndx.dimension(function (d) {
if (d.Country) {
return d.Country;
} else {
return 'No data'
}
});
var timeCount = timeDimension.group().reduceCount(
function (d) {
if (d['yearofconstructionfirstcompletedshelters']) {
return d['yearofconstructionfirstcompletedshelters'];
} else {
return undefined;
}
})
var countryCount = countryDimension.group().reduceCount()
var sheltersGroup = shelters.group().reduceCount();
mapChart.dimension(shelters)
.group(sheltersGroup)
.center([51.505, -0.09])
.zoom(2)
.filterByArea(true)
.cluster(true)
.on("filtered", getFiltersValues);
addLayersToChart(mapChart)
zoneChart
.width(110)
.height(110)
.dimension(zoneDimension)
.group(zoneCount)
.innerRadius(20)
.on("filtered", getFiltersValues);
crisisChart
.width(110)
.height(110)
.dimension(crisisDimension)
.group(crisisCount)
.innerRadius(20)
.on("filtered", getFiltersValues);
climateChart
.width(110)
.height(110)
.dimension(climateDimension)
.group(climateCount)
.innerRadius(20)
.on("filtered", getFiltersValues);
;
timeChart
.width(500)
.height(120)
.dimension(timeDimension)
.group(timeCount)
.barPadding(5)
.x(d3.time.scale().domain([new Date(2008, 01, 01), new Date()]))
.xUnits(d3.time.year)
.on("filtered", getFiltersValues)
.yAxis().tickFormat(
function (v) { return d3.format('f')(v) ; });
countryChart
.width(150)
.height(250)
.margins({left:0, right:10, top:10, bottom:20})
.dimension(countryDimension)
.group(countryCount)
.on("filtered", getFiltersValues)
.xAxis().tickFormat(
function (v) { return d3.format('f')(v) ; });
tableChart
.dimension(allDimensions)
.group(function (d) {
return '';
})
.columns([
function (d) {
return d.ID;
},
function (d) {
return d['Name of shelter'];
},
function (d) {
return d.Zone;
},
function (d) {
return d.Country;
},
function (d) {
return d['Associated disaster / Immediate cause'];
},
function (d) {
return d['Climate zone'];
}
])
.on('renderlet', function (table) {
// each time table is rendered remove nasty extra row dc.js insists on adding
table.select('tr.dc-table-group').remove();
})
}
);
dataCount
.dimension(ndx)
.group(all)
var shelters = ndx.dimension(function (d) {
if (d['gpslatitude'] && d['gpslongitude']) {
return [d['gpslatitude'], d['gpslongitude']];
} else {
return undefined;
}
});
// Init chart filters
var countryDimension = ndx.dimension(function (d) {
if (d.country) {
return d.country;
} else {
return 'No data'
}
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 parsed = parseHash.exec(decodeURIComponent(location.hash.replace(/\+/g, ' ')));
// console.log("parsed:", parsed)
function filter(chart, rank) {
})
var countryCount = countryDimension.group().reduceCount()
if (parsed[rank] == "") {
chart.filter(null);
}
else {
var filterValues = parsed[rank].split(",");
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();
mapChart.dimension(shelters)
.group(sheltersGroup)
.center([51.505, -0.09])
.zoom(2)
.filterByArea(true)
.cluster(true)
.on("filtered", onFiltered);
addLayersToChart(mapChart)
mapChart.map().scrollWheelZoom.disable()
zoneChart
.width(110)
.height(110)
.dimension(zoneDimension)
.group(zoneCount)
.innerRadius(20)
.on("filtered", onFiltered);
crisisChart
.width(110)
.height(110)
.dimension(crisisDimension)
.group(crisisCount)
.innerRadius(20)
.on("filtered", onFiltered);
climateChart
.width(110)
.height(110)
.dimension(climateDimension)
.group(climateCount)
.innerRadius(20)
.on("filtered", onFiltered);
;
timeChart
.width(500)
.height(120)
.dimension(timeDimension)
.group(timeCount)
.barPadding(5)
.x(d3.time.scale().domain([new Date(2003, 01, 01), new Date()]))
.xUnits(d3.time.year)
.on("filtered", onFiltered)
.yAxis().tickFormat(
function (v) {
return d3.format('f')(v);
});
countryChart
.width(200)
.height(200)
.margins({left: 0, right: 10, top: 10, bottom: 20})
.dimension(countryDimension)
.group(countryCount)
.on("filtered", onFiltered)
.xAxis().tickFormat(
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
.dimension(allDimensions)
.group(function (d) {
return '';
})
.columns([
function (d) {
return d.id;
},
function (d) {
return d['nameofshelter'];
},
function (d) {
return d.zone;
},
function (d) {
return d.country;
},
function (d) {
return d[''];
},
function (d) {
return d['climatezone'];
}
])
.on('renderlet', function (table) {
// each time table is rendered remove nasty extra row dc.js insists on adding
table.select('tr.dc-table-group').remove();
})
dataCount
.dimension(ndx)
.group(all)
// Init chart filters
if (rank ==4 && filterValues.length==2) { //filtering timeChart
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]*)&topography=([A-Za-z0-9,_\-\/\s]*)$/;
var parsed = parseHash.exec(decodeURIComponent(location.hash.replace(/\+/g, ' ')));
// console.log("parsed:", parsed)
function filter(chart, rank) {
if (parsed[rank] == "") {
chart.filter(null);
}
else {
var filterValues = parsed[rank].split(",");
// console.log(filterValues)
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) {
// console.log('parsed:', filterValues)
// filterValues = JSON.parse(filterValues)
// console.log(filterValues)
} else {
for (var i = 0; i < filterValues.length; i++) {
chart.filter(filterValues[i]);
}
}
break;
case 7: //mapChart
// console.log('parsed:', filterValues)
// filterValues = JSON.parse(filterValues)
// console.log(filterValues)
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(topographyChart, 6);
// filter(mapChart, 7);
}
if (parsed) {
filter(zoneChart, 1);
filter(crisisChart, 2);
filter(climateChart, 3);
filter(timeChart, 4);
filter(countryChart, 5)
filter(mapChart, 6);
}
dc.renderAll();
dc.renderAll();
}
}
d3.select('#download')
.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');
});
d3.select('#download')
.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');
});
initFilters()
})
d3.selectAll('#all').on('click', function () {
dc.filterAll();
dc.renderAll();
});
function onFiltered(chart) {
// Serializing filters values in URL
function getFiltersValues() {
var filters = [
{name: 'zone', value: zoneChart.filters()},
{name: 'crisis', value: crisisChart.filters()},
{name: 'climate', value: climateChart.filters()},
{name: 'time', value: timeChart.filters()},
{name: 'country', value: countryChart.filters()},
{ name: 'map', value: JSON.stringify(mapChart.filters())}
];
// console.log("map:")