Skip to content

Instantly share code, notes, and snippets.

@darrenjaworski

darrenjaworski/index.html

Last active March 25, 2016 03:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save darrenjaworski/327e6ce8051849447faa to your computer and use it in GitHub Desktop.
Save darrenjaworski/327e6ce8051849447faa to your computer and use it in GitHub Desktop.
Download ZIP
Horizontal Treemap
Raw
index.html
<!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>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(window).load(function(){
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': 'http://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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment