Layout Example using D3 style reusable components

index.html

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

oXpoev.markdown

Layout Example using D3 style reusable components

A Pen by stormpython on CodePen.

License.

script.js

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

// Try changing the layout type to: 'rows', 'grid', or 'columns'
var layoutType = "grid";

var layout = innerSelection()
  .cssClass("chart")
  .layout(layoutType) // type: 'rows', 'grid', or 'columns'
  .size([600, 600]);

d3.select(".visualize")
  .datum(data)  // Each object represents a chart
  .call(layout);

function getFormat(length, type) {
  var output = {};

  switch (type) {
    case "grid":
      output.rows = Math.round(Math.sqrt(length));
      output.columns = 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;
}

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();

  function layout(data) {
    var format = getFormat(data.length, type);
    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;
  };

  return layout;
}

function innerSelection() {
  // Private variables
  var cssClass = "chart";
  var type = "rows";
  var size = [500, 500];

  function component(selection) {
    selection.each(function (data, index) {
      var layout = format().type(type).size(size);

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

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

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

      // Update
      div
        .attr("class", cssClass)
        .style("position", "absolute")
        .style("left", function (d) {
          return d.dx + "px";
        })
        .style("top", function (d) {
          return d.dy + "px";
        })
        .style("width", function (d) {
          return d.width + "px";
        })
        .style("height", function (d) {
          return d.height + "px";
        });
    });

    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.size = function (_) {
    if (!arguments.length) return size;
    size = _;
    return component;
  };

  return component;
}

style.css

.visualize {
  background-color: grey;
  position: relative;
  width: 600px;
  height: 600px;
}

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