Horizontal Treemap

<!DOCTYPE html>
<html lang="en" class="page">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>horizontal treemap</title>
  <style>
  body {
    margin: 0;
  }
  .page, .page body {
  	height: 100%;
  	overflow-y: hidden;
  }
  .node {
    font: 10px sans-serif;
    line-height: 12px;
    overflow: hidden;
    position: absolute;
    text-indent: 2px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
  }
  </style>
</head>
<body>

var experience = {
    'name': 'experience',
    'children': [
      {
        'name': 'block-1',
        'children': [
          {
            'name': 'block-1-1', 'size': 1000, 'background-image': 'https://www.fillmurray.com/1000/1000'
          },
          {
            'name': 'block-1-2', 'size': 250, 'background-image': 'https://www.fillmurray.com/300/300'
          },
          {
            'name': 'block-1-3', 'size': 250, 'background-image': 'https://www.fillmurray.com/300/300'
          }
        ]
      },
      {
        'name': 'block-2',
        'children': [
          {
            'name': 'block-2-1', 'size': 500, 'background-image': 'https://www.fillmurray.com/600/600'
          },
          {
            'name': 'block-2-2', 'size': 250, 'background-image': 'https://www.fillmurray.com/300/300'
          },
          {
            'name': 'block-2-3', 'size': 250, 'background-image': 'https://www.fillmurray.com/300/300'
          },
          {
            'name': 'block-2-4', 'size': 500, 'background-image': 'https://www.fillmurray.com/600/600'
          }
        ]
      },
      {
        'name': 'block-3',
        'children': [
          {
            'name': 'block-3-1', 'size': 1000, 'background-image': 'https://www.fillmurray.com/1000/1000'
          },
          {
            'name': 'block-3-2', 'size': 250, 'background-image': 'https://www.fillmurray.com/300/300'
          },
          {
            'name': 'block-3-3', 'size': 250, 'background-image': 'https://www.fillmurray.com/300/300'
          },
          {
            'name': 'block-3-4', 'size': 250, 'background-image': 'https://www.fillmurray.com/300/300'
          },
          {
            'name': 'block-3-5', 'size': 500, 'background-image': 'https://www.fillmurray.com/600/600'
          },
          {
            'name': 'block-3-6', 'size': 500, 'background-image': 'https://www.fillmurray.com/600/600'
          },
          {
            'name': 'block-3-7', 'size': 250, 'background-image': 'https://www.fillmurray.com/300/300'
          }
        ]
      }
    ]
  }

var windowWidth = window.innerWidth,
      width = 0,
      height = window.innerHeight,
      resizeTimer;

if (windowWidth > 800) {
    width = (windowWidth * 5) + (Math.random() * (width * .1) + 1);
  } else {
    width = (windowWidth * 3.75) - (Math.random() * (width * .1) + 1);
    offset = $('.site-nav').height() + 13;
    height = height - offset;
  }

var treemap = d3.layout.treemap()
      .size([width, height])
      .sticky(false)
      .padding(0)
      .value(function(d) { return d.size; });

var div = d3.select('body')
      .append('div')
      .attr('class', 'experience-layout');

function update() {

windowWidth = window.innerWidth;
    height = window.innerHeight;

if (windowWidth > 800) {
      width = (windowWidth * 5) + (Math.random() * (width * .1) + 1);
    } else {
      width = (windowWidth * 3.75) - (Math.random() * (width * .1) + 1);
    }

var t = d3.transition().duration(500);

d3.select('.experience-layout').append('div')
      .style("width", width + "px")
      .style("height", height + "px");

treemap.size([width, height])

var nodes = div.selectAll('.node')
      .data(treemap.nodes(experience), function(d){ return d.name; });

nodes.exit()
      .style('opacity', 1e-6)
      .remove();

nodes.transition(t)
      .style("left", function(d) { return d.x + "px"; })
      .style("top", function(d) { return d.y + "px"; })
      .style("width", function(d) { return Math.max(0, d.dx + 1) + "px"; })
      .style("height", function(d) { return Math.max(0, d.dy + 1) + "px"; });

nodes.enter()
      .append("div")
      .attr("class", "node")
      .style('opacity', 1e-6)
      .style("left", function(d) { return d.x + "px"; })
      .style("top", function(d) { return d.y + "px"; })
      .style("width", function(d) { return Math.max(0, d.dx + 1) + "px"; })
      .style("height", function(d) { return Math.max(0, d.dy + 1) + "px"; })
      .style("background-image", function(d) { return d['background-image'] ? 'url("' + d['background-image'] + '")' : null; })
      .text(function(d) { return d.children ? null : d.name; })
      .style('background-size', 'cover')
      .transition(t)
      .style('opacity', 1);

}

update();

$(window).on('resize', function(e) {

clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function() {

update();

}, 250);

});

})
</script>

https://d3js.org/d3.v3.min.js

https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js