Individual 1 of 3

For a given combination of attributes, how many businesses have each star ranking?

items = 'not loaded yet'

console.log('lodash version:', _.VERSION)

$.get('http://bigdatahci2015.github.io/data/yelp/yelp_academic_dataset_business.5000.json.lines.txt')
    .success(function(data){        
        var lines = data.trim().split('\n')

        // convert text lines to json arrays and save them in `items`
        items = _.map(lines, JSON.parse)

        console.log('number of items loaded:', items.length)

        console.log('first item', items[0])
     })
     .error(function(e){
         console.error(e)
     })

function viz(attr, sort){


  var filtered = _.filter(items, function(d){
    var result = _.find(attr, function(e,key){
      // if there is a problem return true, else return false
      if (e) {  // if an attribute must match
        if (!("attributes" in d)) // no attributes == bad
          return true;
        if (!(key in d.attributes)) // if the key doesn't exit==bad
          return true;
        return !d.attributes[key];

      } else return false;
    });
    return !result;  // return NOT, because find looks for bad
  });
	


  console.log('first filter', filtered[0]);
  console.log('filtered length', _.size(filtered))
  // now I want to double group...
  var groups = _.groupBy(filtered, "stars")
  console.log('groups', groups) 

var pairs = _.pairs(groups)
    console.log('pairs', pairs)
       
    // TODO: sort pairs in the order specified by users
     var sorted = [];
    //if ((sort == 'asc')||(sort == 'ascending')) {
    sorted = _.sortBy(pairs, function(d){
                return d[0];
            });
    if (sort == "desc") {
        _(sorted).reverse().value();
    }
    




    // define a template string
    var tplString = '<g transform="translate(0 ${d.y})"> \
                    <text y="20">${d.label1}</text> \
                    <rect x="30"   \
                         width="${d.width}" \
                         height="20"    \
                         style="fill:${d.color};    \
                                stroke-width:3; \
                                stroke:rgb(0,0,0)" />   \
                    <text x="35" y="18">${d.quantLabel}</text> \
                    </g>'

    // compile the string to get a template function
    var template = _.template(tplString)

    function computeX(d, i) {
        return 0
    }

    function computeWidth(d, i) {        
        return d[1].length*5;
    }

    function computeY(d, i) {
        return i * 20
    }

    function computeColor(d, i) {
        return 'red'
    }

    function computeLabel1(d, i) {
        return d[0]
    }
  function computeLabel2(d, i) {
        return _.size(d[1])
    }
    

    var viz = _.map(sorted, function(d, i){                
                return {
                    x: computeX(d, i),
                    y: computeY(d, i),
                    width: computeWidth(d, i),
                    color: computeColor(d, i),
                    label1: computeLabel1(d, i),
                    quantLabel: computeLabel2(d, i)
                }
             })
    console.log('viz', viz)

    var result = _.map(viz, function(d){
             // invoke the compiled template function on each viz data
             return template({d: d})
         })
    console.log('result', result)

    $('.myviz').html('<svg width="100%" height="100%">' + result + '</svg>')
    

    
}
$('button#viz').click(function(){    
    var attr = {};
    attr["Good For Kids"] = $('#goodkids').prop('checked') ; 
    attr["Outdoor Seating"] = $('#outdoor').prop('checked') ;
    attr["Good For Groups"] = $('#groups').prop('checked') ;
    attr["Takes Reservations"] = $('#TakesReservations').prop('checked') ; 
    attr["Take-out"] = $('#Take-out').prop('checked') ;
    attr["Dogs Allowed"] = $('#DogsAllowed').prop('checked') ; 
    attr["Waiter Service"] = $('#WaiterService').prop('checked') ; 
    attr["Accepts Credit Cards"] = $('#AcceptsCreditCards').prop('checked') ;
    attr["Delivery"] = $('#Delivery').prop('checked') ;    var sort = $('input:radio[name=sort]:checked').val();


       var sort = $('input:radio[name=sort]:checked').val();
   viz(attr, sort);
})