table swaps

by abenrob

HTML

<div class='full'>
    <div id='blue' class='half'>By Population</div>
    <div id='green' class='half'>By Gender</div>
</div>

CSS

div,pre {
    font-family: 'Menlo', sans-serif !important;
}
.full {
    width: 100%;
    display: flex;
    font-size: 14px;
}
.half {
    width: 50%;
}
#blue {
    background-color: lightblue;
}
#green {
    background-color: lightgreen;
}
pre {
    font-size: 10px;
}

JavaScript

function outputJSON(input,element) {
    document.getElementById(element).appendChild(document.createElement('pre'))
        .innerHTML = JSON.stringify(input, null, 2);
}

var pop = "DHoHCoO_ref2",
    popname = "Population",
    ind = "DHoHSex_Rev",
    indname = "Gender",
    json = [{"DHoHCoO_ref2":"Afghan (Refugees)","DHoHSex_Rev":"Male","count":117},
            {"DHoHCoO_ref2":"Afghan (Refugees)","DHoHSex_Rev":"Female","count":55},
            {"DHoHCoO_ref2":"Somali (Refugees)","DHoHSex_Rev":"Male","count":36},
            {"DHoHCoO_ref2":"Somali (Refugees)","DHoHSex_Rev":"Female","count":26}
           ];

function makeTableData(data,popfield,popname,indfield,indname,swap){
    var mainfield,mainname,secondfield,secondname;
    if (!swap) {
        mainfield = popfield;
        mainname = popname;
        secondfield = indfield;
        secondname = indname;
    } else {
        mainfield = indfield;
        mainname = indname;
        secondfield = popfield;
        secondname = popname;
    };
    
    var table = [], mainclass = [], maintots = {};
    _.each(data, function(record){
        if (_.indexOf(mainclass, record[mainfield]) === -1){
            mainclass.push(record[mainfield]);
            maintots[record[mainfield]] = 0;
        };
        maintots[record[mainfield]] = maintots[record[mainfield]] + record.count;
    });
    _.each(data, function(record){
        table.push([{'field':mainfield,'name':mainname,'value':record[mainfield]},
            {'field':secondfield,'name':secondname,'value':record[secondfield]},
            {'name':'Count','value':record.count},
            {'name':'Total','value':maintots[record[mainfield]]}
        ])
    });
    return _(table).chain()
        .sortBy(function(row){return row[1].value})
        .reverse()
        .sortBy(function(row){return row[3].value})
        .reverse()
        .value();
}

var tabs = {
    'pop': makeTableData(json,pop,popname,ind,indname,false),
    'ind':...