fuzheado/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!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://upload.wikimedia.org/wikipedia/commons/thumb/5/50/%C3%89douard_Detaille_-_Soldiers_-_2003.357_-_Cleveland_Museum_of_Art.jpg/640px-%C3%89douard_Detaille_-_Soldiers_-_2003.357_-_Cleveland_Museum_of_Art.jpg"},
        {id:"root.2",value:null,img:"https://upload.wikimedia.org/wikipedia/commons/thumb/d/d3/%C3%89mile_Jacque_-_Blacksmiths_-_1973.184_-_Cleveland_Museum_of_Art.jpg/588px-%C3%89mile_Jacque_-_Blacksmiths_-_1973.184_-_Cleveland_Museum_of_Art.jpg"},
        {id:"root.3",value:null,img:"https://upload.wikimedia.org/wikipedia/commons/thumb/d/d0/Zhang_Ruoai_-_Desk_Album-_Flower_and_Bird_Paintings_%28Rose%29_-_1967.193.f_-_Cleveland_Museum_of_Art.jpg/1024px-Zhang_Ruoai_-_Desk_Album-_Flower_and_Bird_Paintings_%28Rose%29_-_1967.193.f_-_Cleveland_Museum_of_Art.jpg"},
        {id:"root.4",value:null,img:"https://upload.wikimedia.org/wikipedia/commons/thumb/6/65/Aelbert_Cuyp_-_Travelers_in_Hilly_Countryside_-_1942.637_-_Cleveland_Museum_of_Art.tiff/lossy-page1-1024px-Aelbert_Cuyp_-_Travelers_in_Hilly_Countryside_-_1942.637_-_Cleveland_Museum_of_Art.tiff.jpg"},
        {id:"root.5",value:null,img:"https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Adrien_Dauzats_-_Ruined_Church_-_2010.18_-_Cleveland_Museum_of_Art.tiff/lossy-page1-597px-Adrien_Dauzats_-_Ruined_Church_-_2010.18_-_Cleveland_Museum_of_Art.tiff.jpg"},
    ];

    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);


    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")
            .style("background-image", function(d){ return "url(" + d.data.img + ")";});

        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" ;});

    }
}());
</script>
</body>
</html>
	<!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://upload.wikimedia.org/wikipedia/commons/thumb/5/50/%C3%89douard_Detaille_-_Soldiers_-_2003.357_-_Cleveland_Museum_of_Art.jpg/640px-%C3%89douard_Detaille_-_Soldiers_-_2003.357_-_Cleveland_Museum_of_Art.jpg"},
	{id:"root.2",value:null,img:"https://upload.wikimedia.org/wikipedia/commons/thumb/d/d3/%C3%89mile_Jacque_-_Blacksmiths_-_1973.184_-_Cleveland_Museum_of_Art.jpg/588px-%C3%89mile_Jacque_-_Blacksmiths_-_1973.184_-_Cleveland_Museum_of_Art.jpg"},
	{id:"root.3",value:null,img:"https://upload.wikimedia.org/wikipedia/commons/thumb/d/d0/Zhang_Ruoai_-_Desk_Album-_Flower_and_Bird_Paintings_%28Rose%29_-_1967.193.f_-_Cleveland_Museum_of_Art.jpg/1024px-Zhang_Ruoai_-_Desk_Album-_Flower_and_Bird_Paintings_%28Rose%29_-_1967.193.f_-_Cleveland_Museum_of_Art.jpg"},
	{id:"root.4",value:null,img:"https://upload.wikimedia.org/wikipedia/commons/thumb/6/65/Aelbert_Cuyp_-_Travelers_in_Hilly_Countryside_-_1942.637_-_Cleveland_Museum_of_Art.tiff/lossy-page1-1024px-Aelbert_Cuyp_-_Travelers_in_Hilly_Countryside_-_1942.637_-_Cleveland_Museum_of_Art.tiff.jpg"},
	{id:"root.5",value:null,img:"https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Adrien_Dauzats_-_Ruined_Church_-_2010.18_-_Cleveland_Museum_of_Art.tiff/lossy-page1-597px-Adrien_Dauzats_-_Ruined_Church_-_2010.18_-_Cleveland_Museum_of_Art.tiff.jpg"},
	];

	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);


	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")
	.style("background-image", function(d){ return "url(" + d.data.img + ")";});

	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" ;});

	}
	}());
	</script>
	</body>
	</html>