Input

Bars (1)

Number:

Bars (2)

Number: Color:

Bars (3)

Number: Color: Height:

Viz

$('button#show').click(function(){    
    var value = $('input#show').val()    
    console.log(value)
    $('.myviz').html(value)
})

$('button#setcolor').click(function(){    
    var value = $('input#setcolor').val()
    console.log(value)
    $('.myviz').css('background-color', value)
})

// TODO: add an event handler for "Set Height" button to set the height of the
// viz window to the specified value

$('button#setheight').click(function(){    
    var value = $('input#setheight').val()
    console.log(value)
    $('.myviz').height(value)
})

// TODO: add an event handler for "Show Bars (1)" to display a specified number of
// vertical bars

$('button#bars1').click(function(){    
    var value = $('input#bars1-number').val()
    var string = "<svg>"
    for (i = 0; i < value; i++) {
        var xval = 20*i
        string += "<rect height='50' width='10' x='" + xval + "' />"
    }
    string += "</svg>"
    $('.myviz').html(string)    
})

// TODO: add an event handler for "Show Bars (2)" to display a specified number of
// vertical bars in the specified color

$('button#bars2').click(function(){    
    var value = $('input#bars2-number').val()
    var b2_color = $('input#bars2-color').val()
    var string = "<svg>"
    for (i = 0; i < value; i++) {
        var xval = 20*i
        string += "<rect height='50' width='10' x='" + xval + "' fill='" + b2_color + "' />"
    }
    string += "</svg>"
    $('.myviz').html(string)    
})

// TODO: add an event handler for "Show Bars (3)" to display a specified number of
// vertical bars in the specified color at the specified height

$('button#bars3').click(function(){    
    var value = $('input#bars3-number').val()
    var b3_color = $('input#bars3-color').val()
    var b3_height = $('input#bars3-height').val()
    var string = "<svg>"
    for (i = 0; i < value; i++) {
        var xval = 20*i
        string += "<rect width='10' + height='" + b3_height + "' x='" + xval + "' fill='" + b3_color + "' />"
    }
    string += "</svg>"
    $('.myviz').html(string)    
})