D3 v4 - Image Gallery‎

D3.ver 4 - ツリーマップを使ってイメージギャラリーを作ってみた。

forked from shimizu's block: D3 v4 - Image Gallery‎

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>

<title>D3 v4 - Image Gallery</title>
<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"},
    ]
    
    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>

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