Old school D3 from simpler times

All examples By author By category About

enjalot

Full window Github gist

simple grid layout

Built with blockbuilder.org

<!DOCTYPE html>
  <head>
    <meta charset="utf-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <style>
      body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
      #display {
      }
      #controls {
        float:left;
        padding-left: 15px;
        margin-top: 30px;
        width: 220px;
        height: 100%;
      }
      svg { 
        position:absolute;
        left: 220px;
        width: calc(100% - 235px); 
        height: 100%; 
      }
      
    </style>
  </head>

<body>
    <div id="display">
    <div id="controls">
      cell width<br><input id="cellWidth" type="range" min="1" max="20" value="15">
      <br>
      cell height<br><input id="cellHeight" type="range" min="1" max="12" value="7">
      <br>
      x margin<br><input id="xmargin" type="range" min="0" max="10" value="3.4">
      <br>
      y margin<br>
      <input id="ymargin" type="range" min="0" max="10" value="4.24">
      <br>
      <button id="brick">brick</button>
    </div>
    <svg></svg>
    </div>
    <script>
      var exampleData = d3.range(1000).map(function(d) { return Math.random() });
      
      var brickSetting = true;
      //setup the parameters for the layout. all are optional
      var layout = new grid()
        .cellWidth(15)
        .cellHeight(8)
        .width(500)
        .margin([3.4, 4.24])
        .offset([0, 28])
        .brick(brickSetting)
      
      var color = d3.scale.linear()
      .domain([0, 1000])
      .range(["#a8ff60", "#0600cc"])
      .interpolate(d3.interpolateHcl)
      
      //console.log("layout", layout.nodes());
      var svg = d3.select("svg")

function drawCells() {
        var cells = svg.selectAll("rect")
          .data(layout.nodes(exampleData)) // everything is recalculated when nodes is called
        cells.enter().append("rect")
        cells.exit().remove()
        cells
          .attr({
            x: function(d) { return d.x },
            y: function(d) { return d.y },
            width: layout.cellWidth(),
            height: layout.cellHeight(),
            fill: function(d,i) { return color(d.index) }
          })
      }
      drawCells();
      
    
      // hook up the sliders
      d3.select("#cellWidth").on("input", function() {
        layout.cellWidth(+this.value)
        drawCells();
      })
      d3.select("#cellHeight").on("input", function() {
        layout.cellHeight(+this.value);
        drawCells();
      })
      d3.select("#xmargin").on("input", function() {
        var margin = layout.margin();
        margin[0] = +this.value;
        layout.margin(margin);
        drawCells();
      })
      d3.select("#ymargin").on("input", function() {
        var margin = layout.margin();
        margin[1] = +this.value;
        layout.margin(margin);
        drawCells();
      })
      d3.select("#brick").on("click", function() {
        brickSetting = !brickSetting;
        layout.brick(brickSetting)
        drawCells();
        if(brick) return d3.select("#brick").text("brick")
        d3.select("#brick").text("regular")
      })
      
      // the grid layout itself
     	function grid() {
        var data = [];
        var nodes;
        var width = 100;
        var cellWidth = 10;
        var cellHeight = 10;
        var nColumns = 10;
        var offset = [0,0];
        var margin = [1,1];
        var brick = false;
        
        
        function getX(d,i) {
          return offset[0] + (i % nColumns) * (cellWidth + margin[0])
        }
        function getY(d,i) {
          return offset[1] + Math.floor(i/nColumns) * (cellHeight + margin[1])
        }
        
        function newNodes() {
          nodes = [];
          data.forEach(function(d,i) {
            var node = {
              x: getX(d,i),
              y: getY(d,i),
              data: d,
              index: i
            }
            nodes.push(node);
          })
        }
        newNodes();
        
        function calculate() {
          nodes.forEach(function(node, i) {
            node.x = getX(node, node.index);
            node.y = getY(node, node.index);
            // calculate the center for convenience
            node.cx = node.x + cellWidth/2;
            node.cy = node.x + cellHeight/2;
          })
        }
        
        this.nodes = function(val) {
          if(val) {
            data = val;
            newNodes();
          }
          calculate();
          return nodes;
        }
        this.columns = function(val) {
        }
        this.cellWidth = function(val) {
          if(val) {
            cellWidth = val;
            this.width(width);
            return this;
          }
          return cellWidth;
        }
        this.cellHeight = function(val) {
          if(val) {
            cellHeight = val;
            return this;
          }
          return cellHeight;
        }
        this.width = function(val) {
          if(val) {
            width = val;
            nColumns = Math.floor((width) / (cellWidth + margin[0])) + (brick ? 0.5 : 0);
            //cellWidth = val / nColumns;
            return this;
          }
          return width;
        }
        this.margin = function(val) {
          if(val) {
            margin = val;
            this.width(width);
            return this;
          }
          return margin;
        }
        
        this.offset = function(val) {
          if(val) {
            offset = val;
            return this;
          }
          return offset;
        }
        this.brick = function(val) {

if(val === null || val === undefined) return brick;
          if(val !== null) {
            brick = val;
            this.width(width);
            return this;
          }
          return brick;
        }
        
        return this;
      }
    </script>
  </body>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js