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 businesses are open on X day at Y hour?)

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(day, hour, direction){

    // 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="${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
    }

    function computeWidth(d, i) {
        if(d[1].length < 700){return d[1].length;}
        else{return 700;}
    }

    // Scale the height by the maximum number of businesses in the result
    function computeHeight(d, i) {
        return Math.round(d[1].length <= 700 ? 20 : 20 * (d[1].length/700))
    }

    // Adjust y coordinate by width of previous bars
    function computeY(d, i) {
        return y = i==0? 0: _.reduce(_.map(S.slice(0,i), function(d) {
                                        return computeHeight(d, 0)}),
                                    function(total, d) {
                                        return total + d
                                    })
    }


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

    function computeLabel(d, i) {
        return d[0]     // The label is the state abbreviation
    }

    // Convert hour string to int
    function H2I(h) {
        var x = h.split(':')
        return x[0] * 3600 + x[1] * 60
    }

    // The input hour as an integer
    var HAI = H2I(hour)
    console.log('hour', hour)

    // First filter all entries for the specified day and time
    itemsFiltered = _.filter(items, function(d) {
        return d.hours && d.hours[day] &&
            (H2I(d.hours[day].open) <= HAI &&
             HAI <= H2I(d.hours[day].close))
        })

    // Next group by state
    var groups = _.groupBy(itemsFiltered, 'state')
    console.log('groups', groups)

    // Convert to array of [state, record]
    var pairs = _.pairs(groups)
    console.log('pairs', pairs)

    // Sort in specified direction
    var sortorder = direction == 'ascending'? 1 : -1
    pairsSorted = _.sortBy(pairs, function(d, i) {
        return d[1].length * sortorder
        })

    console.log('pairs sorted', pairsSorted)

    // Just take the first 20 states
    S = _.take(pairsSorted, 20)

    var viz = _.map(S, 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)
                }
             })
    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#day').val()
    var arg2 = $('input#hour').val()
    var arg3 = $('input#dir').val()
    viz(arg1,arg2,arg3)
})

Authors

This UI is developed by

• Karen Blakemore
• Matt Schroeder
• Mingqi Lew
• Brian McKean