Individual 2 of 3

(How many businesses in state X have more than Y review counts in Z order?)

items = 'not loaded yet'
$.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(state, count, direction){

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

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

    function computeX(d, i) {
        return 0
    }

    function computeWidth(d, i) {
        if(d[1].length < 700){return d[1].length;}
        else{return 700;}
    }
    // Scale the height by the maximum number of businesses in the result
    function computeHeight(d, i) {
        return Math.round(d[1].length <= 700 ? 20 : 20 * (d[1].length/700))
    }

    // Adjust y coordinate by width of previous bars
    function computeY(d, i) {
        return y = i==0? 0: _.reduce(_.map(S.slice(0,i), function(d) {
                                        return computeHeight(d, 0)}),
                                    function(total, d) {
                                        return total + d
                                    })
    }


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

    function computeLabel(d, i) {
        return d[0]     // The label is the state abbreviation
    }
    function computeNLabel(d,i){
      return d[1].length
    }

    // Convert hour string to int
    /*
    function H2I(h) {
        var x = h.split(':')
        return x[0] * 3600 + x[1] * 60
    }

    // The input hour as an integer
    var HAI = H2I(hour)
    console.log('hour', hour)
*/
    // First filter all entries for the specified day and time
    itemsFiltered = _.filter(items, function(d) {
        return (d.state == state) && (d.review_count >= count)
    })

    // Next group by state
    var groups = _.groupBy(itemsFiltered, 'review_count')
    console.log('groups', groups)

    // Convert to array of [state, record]
    var pairs = _.pairs(groups)
    console.log('pairs', pairs)

    // Sort in specified direction
    var sortorder = direction == 'ascending'? 1 : -1
    pairsSorted = _.sortBy(pairs, function(d, i) {
        return d[1].length * sortorder
        })

    console.log('pairs sorted', pairsSorted)

    // Just take the first 20 states
    S = _.take(pairsSorted, 20)

    var viz = _.map(S, function(d, i){
                return {
                    x: computeX(d, i),
                    y: computeY(d, i),
                    width: computeWidth(d, i),
                    height: computeHeight(d, i),
                    color: computeColor(d, i),
                    label: computeLabel(d, i),
                    nlabel: computeNLabel(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 arg1 = $('input#state').val()
    var arg2 = $('input#count').val()
    var arg3 = $('input#dir').val()
    viz(arg1,arg2,arg3)
})