D3 treemaps with images
up vote
0
down vote
favorite
Can someone show me how to place images into a d3 tree map.
Eventually I’d like to nest 3 hierarchies, but for now I just need simple ‘flat’ tree map with about 20 images
d3.js treemap
asked Nov 10 at 21:17
Joe
133
add a comment |
up vote
0
down vote
favorite
Can someone show me how to place images into a d3 tree map.
Eventually I’d like to nest 3 hierarchies, but for now I just need simple ‘flat’ tree map with about 20 images
d3.js treemap
asked Nov 10 at 21:17
Joe
133
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
Can someone show me how to place images into a d3 tree map.
Eventually I’d like to nest 3 hierarchies, but for now I just need simple ‘flat’ tree map with about 20 images
d3.js treemap
asked Nov 10 at 21:17
Joe
133
Can someone show me how to place images into a d3 tree map.
Eventually I’d like to nest 3 hierarchies, but for now I just need simple ‘flat’ tree map with about 20 images
d3.js treemap
d3.js treemap
asked Nov 10 at 21:17
Joe
133
asked Nov 10 at 21:17
Joe
133
asked Nov 10 at 21:17
Joe
133
asked Nov 10 at 21:17
Joe
133
asked Nov 10 at 21:17
Joe
133
133
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
up vote
0
down vote
I forked Mike's example and created a tree map with images. You can find it here
I am using this as base and added comments.
Hope this helps
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: auto;
position: relative;
width: 960px;
}
form {
position: absolute;
right: 10px;
top: 10px;
}
.node {
border: solid 1px white;
font: 10px sans-serif;
line-height: 12px;
overflow: hidden;
position: absolute;
text-indent: 2px;
}
</style>
<form>
<label><input type="radio" name="mode" value="size" checked> Size</label>
<label><input type="radio" name="mode" value="count"> Count</label>
</form>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>
'use strict';
const margin = {top: 40, right: 10, bottom: 10, left: 10},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom,
color = d3.scaleOrdinal().range(d3.schemeCategory20c);
const treemap = d3.treemap().size([width, height]);
const div = d3.select("body").append("div")
.style("position", "relative")
.style("width", (width + margin.left + margin.right) + "px")
.style("height", (height + margin.top + margin.bottom) + "px")
.style("left", margin.left + "px")
.style("top", margin.top + "px");
// this is the key, the data has to hierarchical with size or value attribute over which the tree will be created
var data = {
"name": "flare",
"children": [
{
"name": "parent 1",
"children": [
{
"name": "child 1 parent 1",
"size" : 2
},
{
"name": "child 2 parent 1",
"size" : 8
}]
},
{
"name": "parent 2",
"children": [
{
"name": "child 1 parent 2",
"size" : 9
},
{
"name": "child 2 parent 2",
"size" : 8
}]
}
]
};
// this creates the actual tree object with size of each element based on the size value(based on cumulative size of its children)
const root = d3.hierarchy(data, (d) => d.children)
.sum((d) => d.size);
const tree = treemap(root);
// appending a div for element in the root and setting size based on the data
const node = div.datum(root).selectAll(".node")
.data(tree.leaves())
.enter().append("div")
.attr("class", "node")
.style("left", (d) => d.x0 + "px")
.style("top", (d) => d.y0 + "px")
.style("width", (d) => Math.max(0, d.x1 - d.x0 - 1) + "px")
.style("height", (d) => Math.max(0, d.y1 - d.y0 - 1) + "px")
.style("background", (d) => color(d.parent.data.name))
.text((d) => d.data.name);
d3.selectAll("input").on("change", function change() {
const value = this.value === "count"
? (d) => { return d.size ? 1 : 0;}
: (d) => { return d.size; };
const newRoot = d3.hierarchy(data, (d) => d.children)
.sum(value);
node.data(treemap(newRoot).leaves())
.transition()
.duration(1500)
.style("left", (d) => d.x0 + "px")
.style("top", (d) => d.y0 + "px")
.style("width", (d) => Math.max(0, d.x1 - d.x0 - 1) + "px")
.style("height", (d) => Math.max(0, d.y1 - d.y0 - 1) + "px")
});
</script>answered Nov 11 at 3:37
Umesh Maharshi
1,040410
Thank you , but the code you sent was way too difficult for me. I am just beginning at this and was hoping for something MUCH simpler- Just maybe 16-20 images- with only a single hierarchy (for now). Ideally to been, I want to just build a treetop with 20 images and be able to click on any of them and zoom that image to the root size. I want to use the treetop layout here because I eventually plan to have at least another level of nested levels and also be about to alter the data on the fly with cool transitions
– Joe
Nov 11 at 18:19
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
I forked Mike's example and created a tree map with images. You can find it here
I am using this as base and added comments.
Hope this helps
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: auto;
position: relative;
width: 960px;
}
form {
position: absolute;
right: 10px;
top: 10px;
}
.node {
border: solid 1px white;
font: 10px sans-serif;
line-height: 12px;
overflow: hidden;
position: absolute;
text-indent: 2px;
}
</style>
<form>
<label><input type="radio" name="mode" value="size" checked> Size</label>
<label><input type="radio" name="mode" value="count"> Count</label>
</form>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>
'use strict';
const margin = {top: 40, right: 10, bottom: 10, left: 10},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom,
color = d3.scaleOrdinal().range(d3.schemeCategory20c);
const treemap = d3.treemap().size([width, height]);
const div = d3.select("body").append("div")
.style("position", "relative")
.style("width", (width + margin.left + margin.right) + "px")
.style("height", (height + margin.top + margin.bottom) + "px")
.style("left", margin.left + "px")
.style("top", margin.top + "px");
// this is the key, the data has to hierarchical with size or value attribute over which the tree will be created
var data = {
"name": "flare",
"children": [
{
"name": "parent 1",
"children": [
{
"name": "child 1 parent 1",
"size" : 2
},
{
"name": "child 2 parent 1",
"size" : 8
}]
},
{
"name": "parent 2",
"children": [
{
"name": "child 1 parent 2",
"size" : 9
},
{
"name": "child 2 parent 2",
"size" : 8
}]
}
]
};
// this creates the actual tree object with size of each element based on the size value(based on cumulative size of its children)
const root = d3.hierarchy(data, (d) => d.children)
.sum((d) => d.size);
const tree = treemap(root);
// appending a div for element in the root and setting size based on the data
const node = div.datum(root).selectAll(".node")
.data(tree.leaves())
.enter().append("div")
.attr("class", "node")
.style("left", (d) => d.x0 + "px")
.style("top", (d) => d.y0 + "px")
.style("width", (d) => Math.max(0, d.x1 - d.x0 - 1) + "px")
.style("height", (d) => Math.max(0, d.y1 - d.y0 - 1) + "px")
.style("background", (d) => color(d.parent.data.name))
.text((d) => d.data.name);
d3.selectAll("input").on("change", function change() {
const value = this.value === "count"
? (d) => { return d.size ? 1 : 0;}
: (d) => { return d.size; };
const newRoot = d3.hierarchy(data, (d) => d.children)
.sum(value);
node.data(treemap(newRoot).leaves())
.transition()
.duration(1500)
.style("left", (d) => d.x0 + "px")
.style("top", (d) => d.y0 + "px")
.style("width", (d) => Math.max(0, d.x1 - d.x0 - 1) + "px")
.style("height", (d) => Math.max(0, d.y1 - d.y0 - 1) + "px")
});
</script>answered Nov 11 at 3:37
Umesh Maharshi
1,040410
Thank you , but the code you sent was way too difficult for me. I am just beginning at this and was hoping for something MUCH simpler- Just maybe 16-20 images- with only a single hierarchy (for now). Ideally to been, I want to just build a treetop with 20 images and be able to click on any of them and zoom that image to the root size. I want to use the treetop layout here because I eventually plan to have at least another level of nested levels and also be about to alter the data on the fly with cool transitions
– Joe
Nov 11 at 18:19
add a comment |
up vote
0
down vote
I forked Mike's example and created a tree map with images. You can find it here
I am using this as base and added comments.
Hope this helps
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: auto;
position: relative;
width: 960px;
}
form {
position: absolute;
right: 10px;
top: 10px;
}
.node {
border: solid 1px white;
font: 10px sans-serif;
line-height: 12px;
overflow: hidden;
position: absolute;
text-indent: 2px;
}
</style>
<form>
<label><input type="radio" name="mode" value="size" checked> Size</label>
<label><input type="radio" name="mode" value="count"> Count</label>
</form>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>
'use strict';
const margin = {top: 40, right: 10, bottom: 10, left: 10},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom,
color = d3.scaleOrdinal().range(d3.schemeCategory20c);
const treemap = d3.treemap().size([width, height]);
const div = d3.select("body").append("div")
.style("position", "relative")
.style("width", (width + margin.left + margin.right) + "px")
.style("height", (height + margin.top + margin.bottom) + "px")
.style("left", margin.left + "px")
.style("top", margin.top + "px");
// this is the key, the data has to hierarchical with size or value attribute over which the tree will be created
var data = {
"name": "flare",
"children": [
{
"name": "parent 1",
"children": [
{
"name": "child 1 parent 1",
"size" : 2
},
{
"name": "child 2 parent 1",
"size" : 8
}]
},
{
"name": "parent 2",
"children": [
{
"name": "child 1 parent 2",
"size" : 9
},
{
"name": "child 2 parent 2",
"size" : 8
}]
}
]
};
// this creates the actual tree object with size of each element based on the size value(based on cumulative size of its children)
const root = d3.hierarchy(data, (d) => d.children)
.sum((d) => d.size);
const tree = treemap(root);
// appending a div for element in the root and setting size based on the data
const node = div.datum(root).selectAll(".node")
.data(tree.leaves())
.enter().append("div")
.attr("class", "node")
.style("left", (d) => d.x0 + "px")
.style("top", (d) => d.y0 + "px")
.style("width", (d) => Math.max(0, d.x1 - d.x0 - 1) + "px")
.style("height", (d) => Math.max(0, d.y1 - d.y0 - 1) + "px")
.style("background", (d) => color(d.parent.data.name))
.text((d) => d.data.name);
d3.selectAll("input").on("change", function change() {
const value = this.value === "count"
? (d) => { return d.size ? 1 : 0;}
: (d) => { return d.size; };
const newRoot = d3.hierarchy(data, (d) => d.children)
.sum(value);
node.data(treemap(newRoot).leaves())
.transition()
.duration(1500)
.style("left", (d) => d.x0 + "px")
.style("top", (d) => d.y0 + "px")
.style("width", (d) => Math.max(0, d.x1 - d.x0 - 1) + "px")
.style("height", (d) => Math.max(0, d.y1 - d.y0 - 1) + "px")
});
</script>answered Nov 11 at 3:37
Umesh Maharshi
1,040410
Thank you , but the code you sent was way too difficult for me. I am just beginning at this and was hoping for something MUCH simpler- Just maybe 16-20 images- with only a single hierarchy (for now). Ideally to been, I want to just build a treetop with 20 images and be able to click on any of them and zoom that image to the root size. I want to use the treetop layout here because I eventually plan to have at least another level of nested levels and also be about to alter the data on the fly with cool transitions
– Joe
Nov 11 at 18:19
add a comment |
up vote
0
down vote
up vote
0
down vote
I forked Mike's example and created a tree map with images. You can find it here
I am using this as base and added comments.
Hope this helps
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: auto;
position: relative;
width: 960px;
}
form {
position: absolute;
right: 10px;
top: 10px;
}
.node {
border: solid 1px white;
font: 10px sans-serif;
line-height: 12px;
overflow: hidden;
position: absolute;
text-indent: 2px;
}
</style>
<form>
<label><input type="radio" name="mode" value="size" checked> Size</label>
<label><input type="radio" name="mode" value="count"> Count</label>
</form>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>
'use strict';
const margin = {top: 40, right: 10, bottom: 10, left: 10},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom,
color = d3.scaleOrdinal().range(d3.schemeCategory20c);
const treemap = d3.treemap().size([width, height]);
const div = d3.select("body").append("div")
.style("position", "relative")
.style("width", (width + margin.left + margin.right) + "px")
.style("height", (height + margin.top + margin.bottom) + "px")
.style("left", margin.left + "px")
.style("top", margin.top + "px");
// this is the key, the data has to hierarchical with size or value attribute over which the tree will be created
var data = {
"name": "flare",
"children": [
{
"name": "parent 1",
"children": [
{
"name": "child 1 parent 1",
"size" : 2
},
{
"name": "child 2 parent 1",
"size" : 8
}]
},
{
"name": "parent 2",
"children": [
{
"name": "child 1 parent 2",
"size" : 9
},
{
"name": "child 2 parent 2",
"size" : 8
}]
}
]
};
// this creates the actual tree object with size of each element based on the size value(based on cumulative size of its children)
const root = d3.hierarchy(data, (d) => d.children)
.sum((d) => d.size);
const tree = treemap(root);
// appending a div for element in the root and setting size based on the data
const node = div.datum(root).selectAll(".node")
.data(tree.leaves())
.enter().append("div")
.attr("class", "node")
.style("left", (d) => d.x0 + "px")
.style("top", (d) => d.y0 + "px")
.style("width", (d) => Math.max(0, d.x1 - d.x0 - 1) + "px")
.style("height", (d) => Math.max(0, d.y1 - d.y0 - 1) + "px")
.style("background", (d) => color(d.parent.data.name))
.text((d) => d.data.name);
d3.selectAll("input").on("change", function change() {
const value = this.value === "count"
? (d) => { return d.size ? 1 : 0;}
: (d) => { return d.size; };
const newRoot = d3.hierarchy(data, (d) => d.children)
.sum(value);
node.data(treemap(newRoot).leaves())
.transition()
.duration(1500)
.style("left", (d) => d.x0 + "px")
.style("top", (d) => d.y0 + "px")
.style("width", (d) => Math.max(0, d.x1 - d.x0 - 1) + "px")
.style("height", (d) => Math.max(0, d.y1 - d.y0 - 1) + "px")
});
</script>answered Nov 11 at 3:37
Umesh Maharshi
1,040410
I forked Mike's example and created a tree map with images. You can find it here
I am using this as base and added comments.
Hope this helps
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: auto;
position: relative;
width: 960px;
}
form {
position: absolute;
right: 10px;
top: 10px;
}
.node {
border: solid 1px white;
font: 10px sans-serif;
line-height: 12px;
overflow: hidden;
position: absolute;
text-indent: 2px;
}
</style>
<form>
<label><input type="radio" name="mode" value="size" checked> Size</label>
<label><input type="radio" name="mode" value="count"> Count</label>
</form>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>
'use strict';
const margin = {top: 40, right: 10, bottom: 10, left: 10},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom,
color = d3.scaleOrdinal().range(d3.schemeCategory20c);
const treemap = d3.treemap().size([width, height]);
const div = d3.select("body").append("div")
.style("position", "relative")
.style("width", (width + margin.left + margin.right) + "px")
.style("height", (height + margin.top + margin.bottom) + "px")
.style("left", margin.left + "px")
.style("top", margin.top + "px");
// this is the key, the data has to hierarchical with size or value attribute over which the tree will be created
var data = {
"name": "flare",
"children": [
{
"name": "parent 1",
"children": [
{
"name": "child 1 parent 1",
"size" : 2
},
{
"name": "child 2 parent 1",
"size" : 8
}]
},
{
"name": "parent 2",
"children": [
{
"name": "child 1 parent 2",
"size" : 9
},
{
"name": "child 2 parent 2",
"size" : 8
}]
}
]
};
// this creates the actual tree object with size of each element based on the size value(based on cumulative size of its children)
const root = d3.hierarchy(data, (d) => d.children)
.sum((d) => d.size);
const tree = treemap(root);
// appending a div for element in the root and setting size based on the data
const node = div.datum(root).selectAll(".node")
.data(tree.leaves())
.enter().append("div")
.attr("class", "node")
.style("left", (d) => d.x0 + "px")
.style("top", (d) => d.y0 + "px")
.style("width", (d) => Math.max(0, d.x1 - d.x0 - 1) + "px")
.style("height", (d) => Math.max(0, d.y1 - d.y0 - 1) + "px")
.style("background", (d) => color(d.parent.data.name))
.text((d) => d.data.name);
d3.selectAll("input").on("change", function change() {
const value = this.value === "count"
? (d) => { return d.size ? 1 : 0;}
: (d) => { return d.size; };
const newRoot = d3.hierarchy(data, (d) => d.children)
.sum(value);
node.data(treemap(newRoot).leaves())
.transition()
.duration(1500)
.style("left", (d) => d.x0 + "px")
.style("top", (d) => d.y0 + "px")
.style("width", (d) => Math.max(0, d.x1 - d.x0 - 1) + "px")
.style("height", (d) => Math.max(0, d.y1 - d.y0 - 1) + "px")
});
</script><!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: auto;
position: relative;
width: 960px;
}
form {
position: absolute;
right: 10px;
top: 10px;
}
.node {
border: solid 1px white;
font: 10px sans-serif;
line-height: 12px;
overflow: hidden;
position: absolute;
text-indent: 2px;
}
</style>
<form>
<label><input type="radio" name="mode" value="size" checked> Size</label>
<label><input type="radio" name="mode" value="count"> Count</label>
</form>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>
'use strict';
const margin = {top: 40, right: 10, bottom: 10, left: 10},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom,
color = d3.scaleOrdinal().range(d3.schemeCategory20c);
const treemap = d3.treemap().size([width, height]);
const div = d3.select("body").append("div")
.style("position", "relative")
.style("width", (width + margin.left + margin.right) + "px")
.style("height", (height + margin.top + margin.bottom) + "px")
.style("left", margin.left + "px")
.style("top", margin.top + "px");
// this is the key, the data has to hierarchical with size or value attribute over which the tree will be created
var data = {
"name": "flare",
"children": [
{
"name": "parent 1",
"children": [
{
"name": "child 1 parent 1",
"size" : 2
},
{
"name": "child 2 parent 1",
"size" : 8
}]
},
{
"name": "parent 2",
"children": [
{
"name": "child 1 parent 2",
"size" : 9
},
{
"name": "child 2 parent 2",
"size" : 8
}]
}
]
};
// this creates the actual tree object with size of each element based on the size value(based on cumulative size of its children)
const root = d3.hierarchy(data, (d) => d.children)
.sum((d) => d.size);
const tree = treemap(root);
// appending a div for element in the root and setting size based on the data
const node = div.datum(root).selectAll(".node")
.data(tree.leaves())
.enter().append("div")
.attr("class", "node")
.style("left", (d) => d.x0 + "px")
.style("top", (d) => d.y0 + "px")
.style("width", (d) => Math.max(0, d.x1 - d.x0 - 1) + "px")
.style("height", (d) => Math.max(0, d.y1 - d.y0 - 1) + "px")
.style("background", (d) => color(d.parent.data.name))
.text((d) => d.data.name);
d3.selectAll("input").on("change", function change() {
const value = this.value === "count"
? (d) => { return d.size ? 1 : 0;}
: (d) => { return d.size; };
const newRoot = d3.hierarchy(data, (d) => d.children)
.sum(value);
node.data(treemap(newRoot).leaves())
.transition()
.duration(1500)
.style("left", (d) => d.x0 + "px")
.style("top", (d) => d.y0 + "px")
.style("width", (d) => Math.max(0, d.x1 - d.x0 - 1) + "px")
.style("height", (d) => Math.max(0, d.y1 - d.y0 - 1) + "px")
});
</script><!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: auto;
position: relative;
width: 960px;
}
form {
position: absolute;
right: 10px;
top: 10px;
}
.node {
border: solid 1px white;
font: 10px sans-serif;
line-height: 12px;
overflow: hidden;
position: absolute;
text-indent: 2px;
}
</style>
<form>
<label><input type="radio" name="mode" value="size" checked> Size</label>
<label><input type="radio" name="mode" value="count"> Count</label>
</form>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>
'use strict';
const margin = {top: 40, right: 10, bottom: 10, left: 10},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom,
color = d3.scaleOrdinal().range(d3.schemeCategory20c);
const treemap = d3.treemap().size([width, height]);
const div = d3.select("body").append("div")
.style("position", "relative")
.style("width", (width + margin.left + margin.right) + "px")
.style("height", (height + margin.top + margin.bottom) + "px")
.style("left", margin.left + "px")
.style("top", margin.top + "px");
// this is the key, the data has to hierarchical with size or value attribute over which the tree will be created
var data = {
"name": "flare",
"children": [
{
"name": "parent 1",
"children": [
{
"name": "child 1 parent 1",
"size" : 2
},
{
"name": "child 2 parent 1",
"size" : 8
}]
},
{
"name": "parent 2",
"children": [
{
"name": "child 1 parent 2",
"size" : 9
},
{
"name": "child 2 parent 2",
"size" : 8
}]
}
]
};
// this creates the actual tree object with size of each element based on the size value(based on cumulative size of its children)
const root = d3.hierarchy(data, (d) => d.children)
.sum((d) => d.size);
const tree = treemap(root);
// appending a div for element in the root and setting size based on the data
const node = div.datum(root).selectAll(".node")
.data(tree.leaves())
.enter().append("div")
.attr("class", "node")
.style("left", (d) => d.x0 + "px")
.style("top", (d) => d.y0 + "px")
.style("width", (d) => Math.max(0, d.x1 - d.x0 - 1) + "px")
.style("height", (d) => Math.max(0, d.y1 - d.y0 - 1) + "px")
.style("background", (d) => color(d.parent.data.name))
.text((d) => d.data.name);
d3.selectAll("input").on("change", function change() {
const value = this.value === "count"
? (d) => { return d.size ? 1 : 0;}
: (d) => { return d.size; };
const newRoot = d3.hierarchy(data, (d) => d.children)
.sum(value);
node.data(treemap(newRoot).leaves())
.transition()
.duration(1500)
.style("left", (d) => d.x0 + "px")
.style("top", (d) => d.y0 + "px")
.style("width", (d) => Math.max(0, d.x1 - d.x0 - 1) + "px")
.style("height", (d) => Math.max(0, d.y1 - d.y0 - 1) + "px")
});
</script>answered Nov 11 at 3:37
Umesh Maharshi
1,040410
edited Nov 12 at 6:39
answered Nov 11 at 3:37
Umesh Maharshi
1,040410
answered Nov 11 at 3:37
Umesh Maharshi
1,040410
answered Nov 11 at 3:37
Umesh Maharshi
1,040410
1,040410
Thank you , but the code you sent was way too difficult for me. I am just beginning at this and was hoping for something MUCH simpler- Just maybe 16-20 images- with only a single hierarchy (for now). Ideally to been, I want to just build a treetop with 20 images and be able to click on any of them and zoom that image to the root size. I want to use the treetop layout here because I eventually plan to have at least another level of nested levels and also be about to alter the data on the fly with cool transitions
– Joe
Nov 11 at 18:19
add a comment |
Thank you , but the code you sent was way too difficult for me. I am just beginning at this and was hoping for something MUCH simpler- Just maybe 16-20 images- with only a single hierarchy (for now). Ideally to been, I want to just build a treetop with 20 images and be able to click on any of them and zoom that image to the root size. I want to use the treetop layout here because I eventually plan to have at least another level of nested levels and also be about to alter the data on the fly with cool transitions
– Joe
Nov 11 at 18:19
Thank you , but the code you sent was way too difficult for me. I am just beginning at this and was hoping for something MUCH simpler- Just maybe 16-20 images- with only a single hierarchy (for now). Ideally to been, I want to just build a treetop with 20 images and be able to click on any of them and zoom that image to the root size. I want to use the treetop layout here because I eventually plan to have at least another level of nested levels and also be about to alter the data on the fly with cool transitions
– Joe
Nov 11 at 18:19
Thank you , but the code you sent was way too difficult for me. I am just beginning at this and was hoping for something MUCH simpler- Just maybe 16-20 images- with only a single hierarchy (for now). Ideally to been, I want to just build a treetop with 20 images and be able to click on any of them and zoom that image to the root size. I want to use the treetop layout here because I eventually plan to have at least another level of nested levels and also be about to alter the data on the fly with cool transitions
– Joe
Nov 11 at 18:19
add a comment |
draft saved
draft discarded
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53243498%2fd3-treemaps-with-images%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
