Rows, Columns, Grid Layout Example

index.html

<svg class="visualize"></svg>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>

Rows, Columns, Grid Layout Example.markdown

Rows, Columns, Grid Layout Example

Forked from Captain Anonymous's Pen oXpoev.

A Pen by Shelby Sturgis on CodePen.

License.

script.js

// Try increasing the number of empty objects in this array
var data = [
  {}, {}, {}, 
  {}, {}, {}, 
  {}, {}, {},
  {}
];
var width = 600; // Change the width
var height = 400; // Change the height

// Try changing the layout option to: 'rows', 'grid', or 'columns'
var layout = innerSelection()
  .cssClass("chart")
  .layout("grid")
  .columns(0) // when layout == "grid" number of cols before wrap
  .size([width, height]);

d3.select(".visualize")
  .style("width", width + "px")
  .style("height", height + "px")
  .datum(data)  // Each object represents a chart
  .call(layout)
  .selectAll('g.chart')
  .append('g')
  .attr('transform', function (d) {
    return "translate(0,0)";
  })
  .append('rect')
  .attr("x", function (d) { return 0; })
  .attr("y", function (d) { return 0; })
  .attr("width", function (d) { return d.width; })
  .attr("height", function (d) { return d.height; })
  .style('fill', 'red')
  .style('stroke', 'black')
  .style('stroke-width', 1);

/* *************************************************** */
// Returns proper number of rows and columns for each layout type.
function getFormat(length, type, cols) {
  var output = {};

  switch (type) {
    case "grid":
      output.rows = cols ? Math.ceil(length / cols) : Math.round(Math.sqrt(length));
      output.columns = cols ? cols : Math.ceil(Math.sqrt(length));
      break;

    case "columns":
      output.rows = 1;
      output.columns = length;
      break;

    default:
      output.rows = length;
      output.columns = 1;
      break;
  }

  return output;
}

// Appends the proper dx (left), dy (top), width, and height values
// for each chart in the dataset.
function format() {
  var type = "rows"; // type: 'rows', 'columns', 'grid'
  var size = [500, 500]; // [width, height]
  var rowScale = d3.scale.linear();
  var columnScale = d3.scale.linear();
  var numCols = 0;

  function layout(data) {
    var format = getFormat(data.length, type, numCols);
    var rows = format.rows;
    var columns = format.columns;
    var cellWidth = size[0] / columns;
    var cellHeight = size[1] / rows;
    var cell = 0;

    rowScale.domain([0, rows]).range([0, size[1]]);
    columnScale.domain([0, columns]).range([0, size[0]]);

    d3.range(rows).forEach(function (row) {
      d3.range(columns).forEach(function (col) {
        if (!data[cell]) { return; }

        data[cell].dx = columnScale(col);
        data[cell].dy = rowScale(row);
        data[cell].height = cellHeight;
        data[cell].width = cellWidth;
        cell++;
      });
    });

    return data;
  }

  // Public API
  layout.type = function (_) {
    if (!arguments.length) { return type; }
    type = _;
    return layout;
  };

  layout.size = function (_) {
    if (!arguments.length) { return size; }
    size = _;
    return layout;
  };

  layout.columns = function (_) {
    if (!arguments.length) { return numCols; }
    numCols = _;
    return layout;
  };
  
  return layout;
}

// Creates divs for each chart in the dataset.
function innerSelection() {
  // Private variables
  var cssClass = "chart";
  var type = "rows";
  var columns = 0;
  var size = [500, 500];
  var layout = format();

  function component(selection) {
    selection.each(function (data, index) {
      layout.type(type).size(size).columns(columns);

      var g = d3.select(this).selectAll("g")
        .data(layout(data));

      // Exit
      g.exit().remove();

      // Enter
      g.enter().append("g");

      // Update
      g.attr("class", cssClass)
        .attr("transform", function (d) {
          return "translate(" + d.dx + "," + d.dy + ")";
        });
    });

    return selection;
  }

  component.cssClass = function (_) {
    if (!arguments.length) return cssClass;
    cssClass = _;
    return component;
  };

  component.layout = function (_) {
    if (!arguments.length) return type;
    type = _;
    return component;
  };
  
  component.columns = function (_) {
    if (!arguments.length) return columns;
    columns = _;
    return component;
  };

  component.size = function (_) {
    if (!arguments.length) return size;
    size = _;
    return component;
  };

  return component;
}

style.css

.visualize {
  background-color: grey;
}

.chart {
  background-color: blue;
  border: 1px solid;
}