//Array with 4 objects var dataArray = [ {value : 'one', color:'red', width: 100}, {value: 'two', color:'green', width: 200}, {value: 'three', color:'blue', width: 150}, {value: 'four', color:'yellow', width: 300} ]; function render(data) { //First use data function and pass data var updateDivSelection = d3.select('body').selectAll('div'). data(data); //Use enter to append the divs var enterDivSelection = updateDivSelection.enter(). append('div'). text(function(d) { return d.value }). //for inner text style({ 'background-color': function(d){ return d.color }, 'width': function(d){ return d.width + 'px' } }); //For stylling of div } //Calling render function and passing the data render(dataArray); //Updating data after 1 sec and calling render again setTimeout(function() { //push new object in dataArray dataArray.push({value: 'five', color:'grey', width: 350}); //call render again render(dataArray); },1000);
<!-- no div elements initially --> <body> </body