Cross-filter Using Drop Downs

I have two drop-downs. I want that whenever a selection is made in either of the drop-downs, a function called intersect be called which in turn calls the functions loadData and lo

Solution 1:

I dont know what's so difficult here...

I want that whenever a selection is made in either of the drop-downs, a function called intersect be called which in turn calls the functions loadData and loadData1.

<select onchange="intersect()" id="metric" class="wrapper-dropdown">
    <option value ="190">190</option>
    <option value ="90">90</option>
    <option value ="100">100</option>
    <option value ="300">300</option>
</select>

<select onchange="intersect()" id="metric1" class="wrapper-dropdown">
    <option value ="100">100</option>
    <option value ="200">200</option>
    <option value ="0">0</option>
</select>

with

function loadData() {
    alert("loadData reached");
}
function loadData1() {
    alert("loadData1 reached");
}
function intersect() {
    loadData();    
    loadData1();
}

Example: Fiddle

Solution 2:

I not sure why you want to use d3.js and crossfilter.js I do not see a need in your question.

Since you only tag javascript in your question. I am hereby provide you a pure JS solution instead of jquery

var m1 = document.getElementById('metric');

var m2 = document.getElementById('metric1');

m1.onchange = function(){
    //alert(m1.value);
    //alert(m2.value);
    var result = intersection(data, data1, m1.value, m2.value);

    if (result != ""){
        for (var i = 0; i < result.length; i++){
            console.log(result[i]);
        }
    }   
}

m2.onchange = function(){

    var result = intersection(data, data1, m1.value, m2.value);

    if (result != ""){
        for (var i = 0; i < result.length; i++){
            console.log(result[i]);
        }
    }
}

//a is the data
//b is the data1
//v1 is the metric value
//v2 is the matric1 value
function intersection(a, b, v1, v2)
{
    var result = [];
    var c = a.concat(b);
    for (var i = 0; i < c.length; i++){

        if (c[i].total == v1 && c[i].tip == v2)
        {                             
            result.push(c[i]);
        }
    }
    return result;
}

JSFiddle try your selection with total = 90 and tip = 0. You will get the so call "intersection" result you want.