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 percentage of businesses in category X with a rating lower than Y stars are still in business?

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(type, stars){    

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

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

    var openFilter = _.filter(items, function(d) {
        return ((d.stars<=stars)&&_.includes(d.categories,type))&& d.open==true ;
    })
    
    var cities = _.pairs(_.groupBy(openFilter, 'city'))
    
    console.log('cities', cities)
    
    function computeX(d, i) {
        return 0
    }

    function computeWidth(d, i) {        
        return _.size(d[1])
    }

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

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

    function computeLabel(d, i) {
        return d[0] + ': ' + _.size(d[1])
    }

    var viz = _.map(cities, 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 type = $('#type').val()
    var stars = $('#stars').val()
  
    viz(type, stars)
})

Authors

• Sushant Mittal