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 business with X reviews have a rating of Y stars in Z state?

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)
        $('.myviz').html('number of records load:' + items.length)

        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})"> \
                    <text y="20">${d.label}</text> \
                    <rect x="30"   \
                         width="${d.width}" \
                         height="20"    \
                         style="fill:${d.color};    \
                                stroke-width:3; \
                                stroke:rgb(0,0,0)" />   \
                    </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
            }

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

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

    function computeLabel(d, i) {
        return d[0]
    }

    // TODO: modify the logic here based on your UI
    // take the first 20 items to visualize    

    //filter by state that has what we want
    //then group by city
    //filter by number of stars
    //filter by rating (review count)
    console.log("items: ", items.length)
    var states = _.filter(items, function(d){
        return d.state === arg3
        })   
    console.log(states[0])

    var stars = _.filter(states, function(d){
        return d.stars >= arg2
        })  
    console.log("stars is: ", stars[0])    

    var review = _.filter(stars, function(d){
        return d.review_count >= arg1
    })    

    var groups = _.groupBy(review, function(d){
        return d.city
    })

    var pair = _.pairs(groups)
    console.log("pair is: ", pair)
    items = _.take(items, 100)

    var viz = _.map(pair, 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

This UI is developed by

• Caleb Hsu
• Andrew Linenfelser
• Zhili Yang
• Andrey Shprengel
• Andrew Berumen