Individual 2 of 3

Is there a relationship between Number of Attributes and Star Count?

The chart below, shows the distribution of Number of Attributes (X-axis), across star counts (Y-axis). In general, the star counts range from 1 to 5. Attributes are optional and have a wide range of values, from the variety of alcohol served and noise level to whether appointments are necessary and if credit cards are accepted. The maximum number of attributes is generally about 30.

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)
     })
     .error(function(e){
         console.error(e)
     })

function viz(state, city, category, attributes){ 
    // define a template string
    var tplString = '<g> \
    				<circle cx="${d.x}" \
    				cy="${d.y}" \
    				r="4" \
    				stroke="black" \
    				fill="red" /> \
                    </g>'

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

    // Filter all entries for the specified state, city and category
    var itemsFiltered = _.filter(items, function(d) {
    	return (state == 'ALL' || d.state == state) && 
            (city == 'ALL' || d.city == city ) && 
            (category == 'ALL' || _.includes(d.categories, category))
    })

    // Next, extract star rating and number of attributes
    var attributeRatingPairs = _.map(itemsFiltered, function(d) {
    	return [_.keys(d.attributes).length, d.stars]
    	})

    // minStar and maxStar, only used for debug
    var minStar = _.min(_.unzip(attributeRatingPairs)[1])
    var maxStar = _.max(_.unzip(attributeRatingPairs)[1])

    var maxAttribute = 
        attributes == 'NONE' ? _.max(_.unzip(attributeRatingPairs)[0]): attributes

    // X coordinate is the number of attributes, shifted 20 points to right
    function computeX(d, i) {
        return d[0] * 600 / maxAttribute + 20
    }

    // Y coordinate is the scaled star count, translated to an origin at lower left 
    // corner, with jitter
    function computeY(d, i) {
    	return 600 - 100 * (d[1] + Math.random() - .5)
    }

    var viz = _.map(attributeRatingPairs, function(d, i){                
                return {
                    x: computeX(d, i),
                    y: computeY(d, i)
                }
             })

    var result = _.map(viz, function(d){
             // invoke the compiled template function on each viz data
             return template({d: d})
         })

    $('.myviz').html('<svg width="100%" height="100%">' + result + '</svg>')
}

$('button#viz').click(function(){    
    var state = $('input#state').val()
    var city = $('input#city').val()
    var category = $('input#category').val() 
    var attributes = $('input#attributes').val()
    viz(state, city, category, attributes)
})