D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
linnnes
Full window
Github gist
D3 v4 Image Gallery - testing
Built with
blockbuilder.org
<!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>
https://cdnjs.cloudflare.com/ajax/libs/d3/4.1.1/d3.min.js