Input

Show text

Set Background Color

Set Height

Bars (1)

Bars (2)

Bars (3)

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)
})

$('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 num = $('input#bars1')
	for(i=0; i<num; i++){
		var svg = "<svg><rect height='50' width='10' x='20*i'/></svg>"
		return svg
	}	
	$('.myviz').html(svg)        
})

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

// 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