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.

What is a certain category's (X) highest rating in each state (Y) with a minimum number of reviews (Z)?

 What is the highest rated restaurant with at least 200 reviews in PA?
 What is the highest rated restaurant with at least 400 reviews in AZ?
 Are there any categories with less than 100 reviews in NC?

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)
        $('.myviz').html('number of records load:' + items.length)
        console.log('first item', items[0])
     })
     .error(function(e){
         console.error(e)
     })

function viz(arg1, arg2, arg3){    

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

    var template = _.template(tplString)

    function computeX(d, i) {
        return 0
    }

    function computeWidth(d, i) {
        return d[1]*100
    }

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

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

    function computeLabel(d, i) {
        return "State: " + d[0] + "  Max Rating: " + d[1]
    }
    
    var filtered = _.filter(items, function(d){
      return _.includes(d.categories,arg1)
    })
    
    filtered = _.filter(filtered, function(d){
       return (d.state == arg2)  
    })
    
    filtered = _.filter(filtered, function(d){
       return (parseInt(arg3) <= d.review_count)
    })
    
    groups = _.groupBy(filtered, function(d){
        return d.state
    })
    
    groups = _.mapValues(groups, function(d){
        return _.max(_.pluck(d, 'stars'))
    })

    var pairs = _.pairs(groups)
    
    var viz = _.map(pairs, 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){
             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

This UI is developed by

• Full name
• Full name
• Full name
• Full name
• Full name