Skip to content

Instantly share code, notes, and snippets.

@cramhead

cramhead/.block

Last active June 14, 2017 16:49
Show Gist options
  • Save cramhead/3edf64a72c59a0f3b965e115c28cfbbf to your computer and use it in GitHub Desktop.
Save cramhead/3edf64a72c59a0f3b965e115c28cfbbf to your computer and use it in GitHub Desktop.
Download ZIP
fresh block
Raw
.block
license: mit
Raw
eve.json
{
"name": "Eve",
"children": [
{
"name": "Cain"
},
{
"name": "Seth",
"children": [
{
"name": "Enos"
},
{
"name": "Noam"
}
]
},
{
"name": "Abel"
},
{
"name": "Awan",
"children": [
{
"name": "Enoch"
}
]
},
{
"name": "Azura"
}
]
}
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
$m: 25; // margin
*, *:before, *:after {
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
margin: 0;
}
.feature {
position: relative;
width: calc(100% - #{$m} * 2 * 1px);
height: calc(100% - #{$m} * 2 * 1px);
margin: $m * 1px;
background: #aaa;
border: 1px solid red;
//overflow: hidden;
}
.node {
position: absolute;
background: transparent url('') no-repeat 50% / cover;
border: 1px white solid;
overflow: hidden;
opacity: 0.5;
transition: opacity .8s;
.label {
display: inline;
font-family: sans-serif;
color: hsla(0,0,100,.8);
white-space: nowrap;
position: absolute;
padding: 0;
margin: 0;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
transition: filter .8s;
}
&:hover {
opacity: 0;
.label {
filter: blur(10px);
}
}
&.level-0 {
z-index: 4;
font-size: 15vmin;
display: none;
}
&.level-1 {
z-index: 3;
font-size: 10vmin;
}
&.level-2 {
z-index: 2;
font-size: 5vmin;
}
&.level-3 {
z-index: 1;
font-size: 2.5vmin;
}
}
.clicked {
background-color: red;
}
</style>
</head>
<body>
<div class="feature" id="chart"></div>
<script>
var width = 100, // % of the parent element
height = 100,
x = d3.scaleLinear().domain([0, width]).range([0, width]),
y = d3.scaleLinear().domain([0, height]).range([0, height]),
node, root,
blue = d3.hsl(216, 0.92, 0.68),
color = d3.scaleOrdinal()
.range([
d3.rgb(blue).brighter([0.25]),
d3.rgb(blue),
d3.rgb(blue).darker([0.25])
]
.map(function(c) {
c = d3.rgb(c);
//c.opacity = 0.5;
return c;
})),
treemap = d3.treemap()
.size([width, height])
//.tile(d3.treemapSliceDice)
.paddingInner(0)
.round(false); //true
var processData = {
"name": "Process",
"children": [
{
"name": "Design",
"children": [
{
"name": "CGI",
"children": [
{ "name": "Photo 1", "value": "cgi-1.jpg" },
{ "name": "Photo 2", "value": "cgi-2.jpg" },
{ "name": "Photo 3", "value": "cgi-3.jpg" }
]
},
{
"name": "Photography",
"children": [
{ "name": "Photo 1", "value": "photo-1.jpg" },
{ "name": "Photo 2", "value": "photo-2.jpg" },
{ "name": "Photo 3", "value": "photo-3.jpg" },
{ "name": "Photo 4", "value": "photo-4.jpg" },
{ "name": "Photo 5", "value": "photo-5.jpg" }
]
},
{
"name": "EPCs",
"children": [
{ "name": "Photo 1", "value": "epc-1.jpg" },
{ "name": "Photo 2", "value": "epc-2.jpg" },
{ "name": "Photo 3", "value": "epc-3.jpg" }
]
},
{
"name": "Floor Plans",
"children": [
{ "name": "Photo 1", "value": "floorplan-1.jpg" },
{ "name": "Photo 3", "value": "floorplan-2.jpg" }
]
}
]
},
{
"name": "Print",
"children": [
{
"name": "Litho",
"children": [
{ "name": "Photo 1", "value": "litho-1.jpg" },
{ "name": "Photo 2", "value": "litho-2.jpg" },
{ "name": "Photo 3", "value": "litho-3.jpg" },
{ "name": "Photo 4", "value": "litho-4.jpg" },
{ "name": "Photo 5", "value": "litho-5.jpg" },
{ "name": "Photo 6", "value": "litho-6.jpg" }
]
},
{
"name": "Digital",
"children": [
{ "name": "Photo 1", "value": "digital-1.jpg" },
{ "name": "Photo 2", "value": "digital-2.jpg" },
{ "name": "Photo 3", "value": "digital-3.jpg" },
{ "name": "Photo 4", "value": "digital-4.jpg" }
]
}
]
},
{
"name": "Finish",
"children": [
{
"name": "Folding",
"children": [
{ "name": "Photo 1", "value": "folding-1.jpg" },
{ "name": "Photo 2", "value": "folding-2.jpg" },
{ "name": "Photo 3", "value": "folding-3.jpg" }
]
},
{
"name": "Stitched",
"children": [
{ "name": "Photo 1", "value": "stitched-1.jpg" },
{ "name": "Photo 2", "value": "stitched-2.jpg" },
{ "name": "Photo 3", "value": "stitched-3.jpg" },
{ "name": "Photo 4", "value": "stitched-4.jpg" },
{ "name": "Photo 5", "value": "stitched-5.jpg" }
]
},
{
"name": "Sewn",
"children": [
{ "name": "Photo 1", "value": "sewn-1.jpg" },
{ "name": "Photo 2", "value": "sewn-2.jpg" },
{ "name": "Photo 3", "value": "sewn-3.jpg" }
]
},
{
"name": "Softback",
"children": [
{ "name": "Photo 1", "value": "softback-1.jpg" },
{ "name": "Photo 3", "value": "softback-2.jpg" }
]
},
{
"name": "Hardback",
"children": [
{ "name": "Photo 1", "value": "hardback-1.jpg" },
{ "name": "Photo 2", "value": "hardback-2.jpg" },
{ "name": "Photo 3", "value": "hardback-3.jpg" },
{ "name": "Photo 4", "value": "hardback-4.jpg" }
]
}
]
}
]
};
node = root = processData;
var nodes = d3.hierarchy(root)
.sum(function(d) { return d.value ? 1 : 0; });
// .sort(function(a, b) { return b.height - a.height || b.value - a.value })
treemap(nodes);
var chart = d3.select("#chart");
var cell = chart
.selectAll(".node")
.data(nodes.descendants()) // .leaves()
.enter()
.append("div")
.attr("class", function(d) { return "node level-" + d.depth; })
.attr("title", function(d) { return d.data.name ? d.data.name : "null"; });
cell
.style("left", function(d) { return x(d.x0) + "%"; })
.style("top", function(d) { return y(d.y0) + "%"; })
.style("width", function(d) { return x(d.x1 - d.x0) + "%"; })
.style("height", function(d) { return y(d.y1 - d.y0) + "%"; })
//.style("background-image", function(d) { return d.value ? imgUrl + d.value : ""; })
//.style("background-image", function(d) { return d.value ? "url(http://placekitten.com/g/300/300)" : "none"; })
.style("background-color", function(d) { while (d.depth > 1) d = d.parent; return color(d.data.name); })
.on("mousedown touchstart", function(d) {
zoom(d);
//zoom(node == d.parent ? root : d.parent);
//zoom(d.children !== null ? d : root);
})
.append("p")
.attr("class", "label")
.text(function(d) { return d.data.name ? d.data.name : "null"; });
//.style("font-size", "")
//.style("opacity", function(d) { return isOverflowed( d.parent ) ? 1 : 0; });
function zoom(d) { // http://jsfiddle.net/ramnathv/amszcymq/
console.log('clicked: ' + d.data.name + ', depth: ' + d.depth);
console.log('cell x0: ' + d.x0 + ', x1: ' + d.x1 + ', y0: ' + d.y0 + ', y1: ' + d.y1);
x.domain([d.x0, d.x1]);
y.domain([d.y0, d.y1]);
console.log( "new x: "+ x(d.x0) + "-" + x(d.x1) );
console.log( "new y: "+ y(d.y0) + "-" + y(d.y1) );
var t = d3.transition()
.duration(800)
.ease(d3.easeCubicOut);
cell
//.merge(cell)
.transition(t)
.style("left", function(d) { return x(d.x0) + "%"; })
.style("top", function(d) { return y(d.y0) + "%"; })
.style("width", function(d) { return x(d.x1 - d.x0) + "%"; })
.style("height", function(d) { return y(d.y1 - d.y0) + "%"; })
.transition(t)
.style("background-color", "red");
node = d;
d3.event.stopPropagation();
}
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment