UI

Pick one question class and build an exploratory visualization interface for it. The question class you pick must have at least three variables that can be changed.

How many businesses are open past time X) and have more than Y stars in State Z

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(arg1, arg2, arg3){    

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

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

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

    function computeLabel(d, i) {
        return d[0] + ": "+ d[1].length
    }
   
    bus = _.filter(items, function(d){
    return d.state == arg3})
    
    
    //filter by stars.
    bus = _.filter(bus, function(d){
    return d.stars >= arg2})
    
    //filter by reviw count
    bus = _.filter(bus, function(d){    
        if (typeof d.hours.Friday === "undefined")
        {
            console.log("undif")
            return false
        }
        console.log('d.Friday', d.hours.Friday.close)
        var fri_hours = d.hours.Friday.close
        console.log('hours', fri_hours)
        return fri_hours >= arg1})
    
    console.log('things', bus[0])

    bus = _.groupBy(bus, 'city')
    bus = _.pairs(bus)
    bus = _.sortBy(bus, function(d){return d[1].length}).reverse()
    console.log('stars', _.pluck(bus,'stars'))
    // TODO: modify the logic here based on your UI
    // take the first 20 bus to visualize    
    bus = _.take(bus, 20)
    

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

Authors