How many businesses in state X have more than Y stars?
Three example of specific questions in this class are:
- How many businesses in Wisconsin have more than 3 stars? 67
- How many businesses in North Carolina have more than 4 stars? 56
- How many businesses in Illinois have more than 2 stars? 20
State
Stars
City
Data is not loaded yet
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(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)" /> \
<text y="20">${d.label}</text> \
</g>'
// compile the string to get a template function
var template = _.template(tplString)
var filter_stars = _.filter(items, function(d){
return (d.stars >= arg2)
})
console.log('filter stars: ', filter_stars)
var filtered_states = _.filter(filter_stars, function(d){
return (d.state == arg1)
})
console.log('filter states: ', filtered_states)
var cities = _.groupBy(filtered_states, function(d){
return d.city
})
console.log("cities: ", cities)
function computeX(d, i) {
return 0
}
function computeWidth(d, i) {
return d[0].length
}
function computeY(d, i) {
return i * 20
}
function computeColor(d, i) {
return 'red'
}
function computeLabel(d, i) {
return d[0].length
}
// TODO: modify the logic here based on your UI
// take the first 100 items to visualize
items = _.take(items, 100)
var pairs = _.pairs(cities)
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){
// 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