Individual 3 of 3

Is there a relationship beween category type and star rating?

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, sort, reviews){ 
    // define a template string
    var tplString = '<g transform="translate(0 ${d.y})"> \
                    <text y="20">${d.label}</text> \
                    <rect x="280"   \
                         width="${d.width}" \
                         height="${d.height}"  \
                         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
    }

    // Width of bar is the average number of stars for the category
    function computeWidth(d, i) {
    	return d[1].avgStar * 95
    }

    function computeHeight(d, i) {
    	return 20
    }

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

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

    function computeLabel(d, i) {
    	return d[0] + ' (' + d[1].numRecords.toString() + ')'
    }

    // Map the items to categories and star counts for the specified state & city.
    var itemsFiltered = _.chain(items)
        .filter(function(d) {
    	   return (state == 'ALL' || d.state == state) 
            && (city == 'ALL' || d.city == city )
        })
        .map(function(d) {
            return [d.categories, d.stars]
        })
        .value()
     
    // Map [categories, stars] to [category, average star rating, number of records]
    var categories = 
    	_.mapValues(
    		_.groupBy(
                _.flatten(
    				_.map(itemsFiltered, function(d) {
    					return _.map(d[0], function(n) {
    						return [n, d[1]]
    					})
    				})
    			), function(d) { // group [category, star] pairs by category
    				return d[0]
    				}
    		), function(d) {
    			var records = _.unzip(d)[1]
    			var numRecords = records.length
    			var avgStar = _.sum(records) / numRecords
    			return {'avgStar': avgStar, 'numRecords': numRecords}
    			}
    		)

    // Only for debug
    var count = _.size(categories)

    // Convert to an array of pairs [category, item]
    var pairs = _.pairs(categories)

    // Filter out records with review counts less than specified
    pairsFiltered = _.filter(pairs, function(d) {
        return reviews == 'NONE' ? true : d[1].numRecords >= reviews
        })

    // Sort alphabetically or by star count
    pairsSorted = _.sortBy(pairsFiltered, function(d) {
    	return sort == 'Alphabet' ? d[0] : d[1].avgStar
        })

    var viz = _.map(pairsSorted, function(d, i){                
                return {
                    x: computeX(d, i),
                    y: computeY(d, i),
                    width: computeWidth(d, i),
                    height: computeHeight(d, i),
                    color: computeColor(d, i),
                    label: computeLabel(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 sort = $('input#sort').val() 
    var reviews = $('input#reviews').val()
    viz(state, city, sort, reviews)
})

Author

This UI is developed by

• Karen Blakemore