D3 Examples - D3 v4 Image Gallery

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>D3 v4 - Image Gallery</title>
<!--  Forked from https://bl.ocks.org/shimizu/79409cca5bcc57c32ddae0a5f0a1a564  -->
<style>
html, body{
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
}
#graph {
    width: 100%;
    height: 100%;
    
}
.node {
    position: absolute;
    background-size:cover;
}
​
</style>
</head>
​
<body>
<div id="graph"></div>    
    
    
    
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/4.1.1/d3.min.js"></script>    
<script>
!(function(){
    "use strict"
​
    var data = [
        {id:"root",value:null},
        {id:"root.1",value:null,img:"https://scontent.cdninstagram.com/t51.2885-15/e35/13706966_1248721285160165_2126217619_n.jpg?ig_cache_key=MTMwNTc4MTM3NzE5NDc4NTA1Nw%3D%3D.2"},
        {id:"root.2",value:null,img:"https://scontent.cdninstagram.com/t51.2885-15/e35/13731375_169429573469327_573853400_n.jpg?ig_cache_key=MTMwNTU4NzA4NTAwNDIwNjk5Mg%3D%3D.2"},
        {id:"root.3",value:null,img:"https://scontent.cdninstagram.com/t51.2885-15/e15/10895109_609286469173647_762523058_n.jpg?ig_cache_key=ODk0NjE2MjM3ODM4Mzg4MzM2.2"},
        {id:"root.4",value:null,img:"https://scontent.cdninstagram.com/t51.2885-15/e35/12301315_1512889829004448_289466840_n.jpg?ig_cache_key=MTEyNzk4NjUxMzQwMDI1MzgyNA%3D%3D.2"},
        {id:"root.5",value:null,img:"https://scontent.cdninstagram.com/t51.2885-15/e15/1538416_739385169471125_1797549327_n.jpg?ig_cache_key=ODU3MDc1Nzc2Mjg2NTc2MTEw.2"},
        {id:"root.6",value:null,img:"https://scontent.cdninstagram.com/t51.2885-15/e35/13706966_1248721285160165_2126217619_n.jpg?ig_cache_key=MTMwNTc4MTM3NzE5NDc4NTA1Nw%3D%3D.2"},
        {id:"root.7",value:null,img:"https://scontent.cdninstagram.com/t51.2885-15/e35/13731375_169429573469327_573853400_n.jpg?ig_cache_key=MTMwNTU4NzA4NTAwNDIwNjk5Mg%3D%3D.2"},
        {id:"root.8",value:null,img:"https://scontent.cdninstagram.com/t51.2885-15/e15/10895109_609286469173647_762523058_n.jpg?ig_cache_key=ODk0NjE2MjM3ODM4Mzg4MzM2.2"},
        {id:"root.9",value:null,img:"https://scontent.cdninstagram.com/t51.2885-15/e35/12301315_1512889829004448_289466840_n.jpg?ig_cache_key=MTEyNzk4NjUxMzQwMDI1MzgyNA%3D%3D.2"},
        {id:"root.10",value:null,img:"https://scontent.cdninstagram.com/t51.2885-15/e15/1538416_739385169471125_1797549327_n.jpg?ig_cache_key=ODU3MDc1Nzc2Mjg2NTc2MTEw.2"},
    ]
    
    var width = document.querySelector("#graph").clientWidth
    var height = document.querySelector("#graph").clientHeight
    var div = d3.select("#graph").append("div").attr("width", width).attr("height", height)
    console.log(width)
    console.log(height)
    
    
    setInterval(draw, 2000)
    draw()
    
        
    function draw() {
​
        randomize()
                
        var stratify = d3.stratify()
                                     .parentId(function(d) {
                           return d.id.substring(0, d.id.lastIndexOf(".")); 
                         });
​
        var root = stratify(data).sum(function(d) { return d.value });
​
        var treemap = d3.treemap()
            .tile(d3.treemapBinary)
            .size([width, height])
            .padding(1)
            .round(true);        
​
        treemap(root)
        drawTreemap(root)                
            
    }
    
    function randomize() {
        data.filter(function(d){ return d.id !== "root"})
            .forEach(function(d){
                d.value = ~~(d3.randomUniform(1, 10)()) 
            })
    }
    
    
    function drawTreemap(root) {
​
        var node = div.selectAll(".node").data(root.children)
          
        var newNode = node.enter()
           .append("div").attr("class", "node")
​
        node.merge(newNode)
            .transition()
            .duration(1000)
            .style("left", function(d) { return d.x0 + "px" })
            .style("top", function(d) { return d.y0 + "px" })
            .style("width", function(d) { return (d.x1 - d.x0) + "px" })
            .style("height", function(d) { return (d.y1 - d.y0) + "px"})
            .style("background-image", function(d){ return "url("+d.data.img+")"})
            
    }
}());
</script>    
</body>
</html>
    