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 do/dont take cards and have more than or equal to Y stars are 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
    }
    console.log('arg1', arg1)
    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.attributes["Accepts Credit Cards"] === "undefined")
            {
                return false
            }
            console.log('d.Friday', d.attributes["Accepts Credit Cards"])
            return d.attributes["Accepts Credit Cards"] == 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 = document.getElementById('arg1').checked
    var arg2 = $('input#arg2').val()    
    var arg3 = $('input#arg3').val()    
    viz(arg1, arg2, arg3)
})

Authors