function createRandomData() {
    var numDataItems = Math.floor((Math.random() * 10) + 1);
    var d = [];
    for(var i = 0; i < numDataItems; i++) {
        d.push(Math.floor((Math.random() * 50) + 1));
    }
    return d;
}

var width = 500;
var height = 500;

var svg = d3.select('#vis')
            .append('svg')
            .attr('width', width)
            .attr('height', height);

function update() {
    var exampleData = createRandomData();
    console.log(exampleData);

    var bars = svg.selectAll('.bar')
                .data(exampleData);
  
        bars
            .exit()
            .remove()

        var new_bars = bars
            .enter()
            .append('rect')
            .attr('class', 'bar')
            .attr('height', '20px')
            .attr('x', 0);

        new_bars.merge(bars)
            .attr('width', function(d){ return d*10 + 'px'; })
            .attr('y', function(d, i){ return (i * 20) + i; });
}

update();