Grid Layout

grid_layout.js

// D3 code
var $el = $('.visualize-chart')[0];
var data = {
    type: 'chart',
    series: [{}, {}, {}]
};
var selection = d3.select($el).datum(data).call(split);

function split (selection) {
  selection.each(function (data) {
    var div = d3.select(this).data([data]);
    
    var charts = div.selectAll('div')
      .data(function (d) { 
        if (d.cols) return d.cols;
        if (d.rows) return d.rows;
        if (d.horizontal) return d.horizontal;  
        if (d.vertical) return d.vertical;
          
        return d; 
      })
      .enter().append('div')
      .attr('class', function (d) {
        if (d.type === 'split') ? {
            return d.horizontal ? 'horizontal' : 'vertical';
        }
        return d.type;
      });
    
    if (data.type !== 'chart' || data.type !== 'cols' || data.type !== 'rows' ) {
      charts.call(split);
    }
  });
}