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()
    $('.myviz').css('background-color',value)
})

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

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

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

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