_includes/fairness_visualization/visualization.js
// Creates matrix view of dots representing no loans
Creates matrix view of dots representing no loans
Creates matrix view of dots representing no loans
function createLoanMatrix(id, model) {
  var width = 300;
  var noloanY = 180; var topY = 18;
  var height = 1.7*noloanY;
  var noloan, truepositive, falsepositive;
  function layout() {
    truepositive = model.items.filter(function(item) {
      return item.predicted == 1 && item.value == item.predicted;
    });
    falsepositive = model.items.filter(function(item) {
      return item.predicted == 1 && item.value != item.predicted;
    });
    noloan = model.items.filter(function(item) {
      return item.predicted == 0;
    });
    gridLayout(truepositive, 2, 80, 20);
    gridLayout(falsepositive, width / 2 + 4, 80, 10);
    gridLayout(noloan, 2, 80 - topY + noloanY, 30);
  }
  layout();
  var svg = createIcons(id, model.items, width, height, LEFT_PAD);
  var offset = 20;
  var selRateLabel = createPercentLabel(svg, 0, topY, 'Selection Rate',
      'pie-label1', 'pie-number');
  var truePosLabel = createPercentLabel(svg, 0, topY+offset, 'Correct',
      'pie-label', 'pie-number');
  var falsePosLabel = createPercentLabel(svg, width / 2 + 4, topY+offset, 'Incorrect',
      'pie-label', 'pie-number');
  var noloanLabel = createPercentLabel(svg, 0, noloanY, 'Denied Loans',
      'pie-label', 'pie-number');
  explanation(svg, ['repaid loans result in',
      'increased credit score'], 0, topY+offset);
  explanation(svg, ['defaults resut in', 'lowered score'], width / 2 + 4, topY+offset);
  explanation(svg, ['denied applicants experience no', 'credit score change and contribute',
    'nothing to profit'], 
    0, noloanY);
  model.addListener(function() {
    layout();
    selRateLabel((truepositive.length+falsepositive.length) / model.items.length);
    truePosLabel(truepositive.length / model.items.length);
    falsePosLabel(falsepositive.length / model.items.length);
    noloanLabel(noloan.length / model.items.length);
    svg.selectAll('.icon').call(defineIcon);
  });
}
function createLoanMatrix ( id , model ) { var width = 300 ; var noloanY = 180 ; var topY = 18 ; var height = 1.7 * noloanY ; var noloan , truepositive , falsepositive ; function layout ( ) { truepositive = model . items . filter ( function ( item ) { return item . predicted == 1 && item . value == item . predicted ; } ) ; falsepositive = model . items . filter ( function ( item ) { return item . predicted == 1 && item . value != item . predicted ; } ) ; noloan = model . items . filter ( function ( item ) { return item . predicted == 0 ; } ) ; gridLayout ( truepositive , 2 , 80 , 20 ) ; gridLayout ( falsepositive , width / 2 + 4 , 80 , 10 ) ; gridLayout ( noloan , 2 , 80 - topY + noloanY , 30 ) ; } layout ( ) ; var svg = createIcons ( id , model . items , width , height , LEFT_PAD ) ; var offset = 20 ; var selRateLabel = createPercentLabel ( svg , 0 , topY , 'Selection Rate' , 'pie-label1' , 'pie-number' ) ; var truePosLabel = createPercentLabel ( svg , 0 , topY + offset , 'Correct' , 'pie-label' , 'pie-number' ) ; var falsePosLabel = createPercentLabel ( svg , width / 2 + 4 , topY + offset , 'Incorrect' , 'pie-label' , 'pie-number' ) ; var noloanLabel = createPercentLabel ( svg , 0 , noloanY , 'Denied Loans' , 'pie-label' , 'pie-number' ) ; explanation ( svg , [ 'repaid loans result in' , 'increased credit score' ] , 0 , topY + offset ) ; explanation ( svg , [ 'defaults resut in' , 'lowered score' ] , width / 2 + 4 , topY + offset ) ; explanation ( svg , [ 'denied applicants experience no' , 'credit score change and contribute' , 'nothing to profit' ] , 0 , noloanY ) ; model . addListener ( function ( ) { layout ( ) ; selRateLabel ( ( truepositive . length + falsepositive . length ) / model . items . length ) ; truePosLabel ( truepositive . length / model . items . length ) ; falsePosLabel ( falsepositive . length / model . items . length ) ; noloanLabel ( noloan . length / model . items . length ) ; svg . selectAll ( '.icon' ) . call ( defineIcon ) ; } ) ; }
Creates matrix view of dots representing no loans
Creates matrix view of dots representing no loans
// Add explanation of correct decisions. // Add explanation of incorrect