SVG table D3

by abenrob

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.2/d3.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src=" https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="popRadio" checked>
    By Population
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="genderRadio">
    By Gender
  </label>
</div>
<div id='target'>
</div>

CSS

.radio {
    padding-left: 10px;
}
.padded {
    padding: 10px;
}
.table {
    margin: 0; 
}
.table td, .table th {
    padding-right: 10px;
    padding-left:10px;
}
.table-meta {
    margin-top: 5px;
    font-size: 11px
}

JavaScript

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': makeTableData(json,pop,popname,ind,indname,true)
};

console.log(tabs);

//Width and height
var w = 500;
var h = 400;



//Create SVG Element
var svg = d3.select("#target")
.append("svg:svg")
  ...