Commit 5fd683db authored by Krystyna Milian's avatar Krystyna Milian

Implemented filtering using dropdowns integrated with chart filtering

parent 015826ba
id,nameofshelter,zone,country,associateddisasterimmediatecause,gpslatitude,gpslongitude,climatezone,yearofconstructionfirstcompletedshelters,constructioncostperunitusd,topography 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 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 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,4500, 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, 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,2009,3000,, NP022,Luxembourg RC Shelter 2,Asia Pacific,Nepal,flood,28.8878888889,80.3958888889,moist tropical,2009,3000,,
\ No newline at end of file \ No newline at end of file
...@@ -14,14 +14,19 @@ $(document).ready(function () { ...@@ -14,14 +14,19 @@ $(document).ready(function () {
var tableChart = dc.dataTable("#shelters-table") var tableChart = dc.dataTable("#shelters-table")
var topographyChart = dc.rowChart('#chart-topography'); 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) {
// data.push(dataObject[key]) // data.push(dataObject[key])
// } // }
var dateFormat = d3.time.format('%Y'); var dateFormat = d3.time.format('%Y');
var ndx = crossfilter(data); var ndx = crossfilter(data);
...@@ -292,18 +297,36 @@ $(document).ready(function () { ...@@ -292,18 +297,36 @@ $(document).ready(function () {
function onFiltered() { function onFiltered(chart) {
getFiltersValues(); getFiltersValues();
generateShelterList(allDimensions.top(Infinity)); 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); 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("");
}); });
...@@ -334,34 +357,82 @@ $(document).ready(function () { ...@@ -334,34 +357,82 @@ $(document).ready(function () {
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("");
}); });
d3.selectAll('#climate').on('click', function () { d3.selectAll('#climate').on('click', function () {
climateChart.filterAll(); climateChart.filterAll();
dc.redrawAll(); dc.redrawAll();
$("#climateFilter").val("");
}); });
d3.selectAll('#country').on('click', function () { d3.selectAll('#country').on('click', function () {
countryChart.filterAll(); countryChart.filterAll();
dc.redrawAll(); dc.redrawAll();
$("#countryFilter").val("");
}); });
d3.selectAll('#cost').on('click', function () { d3.selectAll('#cost').on('click', function () {
costChart.filterAll(); costChart.filterAll();
dc.redrawAll(); dc.redrawAll();
}); });
d3.selectAll('#topography').on('click', function () { d3.selectAll('#topography').on('click', function () {
topographyChart.filterAll(); topographyChart.filterAll();
dc.redrawAll(); dc.redrawAll();
}); });
loadFilterValues()
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);
}
}
}
}) })
...@@ -438,33 +509,6 @@ addOption = function (selectbox, text, value) { ...@@ -438,33 +509,6 @@ addOption = function (selectbox, text, value) {
selectbox.options.add(optn); selectbox.options.add(optn);
} }
function loadFilterValues() {
var filters = {
'climateFilter': 'climatezone', 'zoneFilter': 'zone', 'commercialFilter': 'typeofimplementingagency',
'disasterFilter': 'associateddisasterimmediatecause',
'soilFilter': 'soiltype', 'shelterTypeFilter': 'typeofshelter',
// '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);
}
}
}
......
...@@ -46,12 +46,6 @@ ...@@ -46,12 +46,6 @@
<select id="climateFilter"> <select id="climateFilter">
<option value="" selected="selected">Climate</option> <option value="" selected="selected">Climate</option>
<option value="" disabled>---</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> </select>
</label> </label>
<label for="zoneFilter" class="button button-drop"> <label for="zoneFilter" class="button button-drop">
...@@ -103,6 +97,14 @@ ...@@ -103,6 +97,14 @@
<option value="" disabled>---</option> <option value="" disabled>---</option>
</select> </select>
</label> </label>
<label for="countryFilter" class="button button-small button-drop">
<select id="countryFilter">
<option value="" selected="selected">Country</option>
<option value="" disabled>---</option>
</select>
</label>
<!--label for="topographyFilter" class="button button-small button-drop"> <!--label for="topographyFilter" class="button button-small button-drop">
<select id="topographyFilter"> <select id="topographyFilter">
<option value="" selected="selected">Topography</option> <option value="" selected="selected">Topography</option>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment