D3 Examples - masonic demo

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style>
body {
  margin: 0;
}
    </style>
  </head>
  <body>
    <script src="https://d3js.org/d3.v3.js" charset="utf-8"></script>
    <script src="d3-masonic.js" charset="utf-8"></script>
    <script>
'use strict';
var w = window.innerWidth, h = window.innerHeight
var s = 1
var duration = 500
var n = 6
var acc = function(d, prop) { return function accessor(d) { return d[prop] } }
var body = d3.select('body')
var svg = body.append('svg')
  .attr({width: w, height: h})
  .style('background-color', 'black')
​
var color = d3.scale.category20()
​
function randomSize(min, max, step) {
  return Math.round(min + Math.random() * (max - min)) * step
}
​
function genData() {
  return d3.range(n)
    .map(function(d, i) {
      var size = Math.pow(randomSize(2, 15, s), 2)
      return {
        width: size,
        height: size,
        id: i,
        masonic: null
      }
    })
}
​
var bricks = svg.selectAll('rect')
  .data(genData, function(d) { return d.id })
  .enter()
  .append('rect')
    .style('fill', function(d, i) { return color(i) })
​
var masonic = d3.masonic()
  .width(function(d) { return d.width })
  .height(function(d) { return d.height })
  .columnWidth(s)
​
function resize() {
  var outerWidth = body.property('offsetWidth')
  masonic.outerWidth(800).reset()
  bricks
    // .sort(function(a, b) { return b.width * b.height - a.width * a.height })
    .datum(function(d, i) {
      d.masonic = masonic(d)
      delete d.masonic.data
      return d
    })
    .transition()
    .ease('cubic-out')
    .duration(duration)
    .attr({
      x: function(d) { return d.masonic.x },
      y: function(d) { return 500 - d.masonic.y - d.masonic.height },
      width: function(d) { return d.masonic.width },
      height: function(d) { return d.masonic.height }
    })
}
​
resize()
​
setInterval(function() {
  bricks.data(genData, function(d) { return d.id })
  resize()
}, duration)
​
    </script>
  </body>
</html>
    