Skip to content

Instantly share code, notes, and snippets.

@jacksonhenry3
Forked from mbostock/.block
Created July 10, 2012 18:31
Show Gist options
  • Save jacksonhenry3/3085360 to your computer and use it in GitHub Desktop.
Save jacksonhenry3/3085360 to your computer and use it in GitHub Desktop.
Zoomable Icicle
{
"name": "Life",
"children": [
{"name":"archea",
"children": [{
"name": "archea",
"children": []
}]
},
{"name":"eukaryote",
"children":[
{"name":"protista",
"children": []
},
{"name":"anamalia",
"children":[]
},
{"name":"plantae",
"children":[
{"name":"Anthocerotophyta",
"children": []
},
{"name":"Bryophyta",
"children":[]
},
{"name":"Marchantiophyta",
"children":[]
},
{"name":"Lycopodiophyta",
"children":[]
},
{"name":"Pteridophyta",
"children": []
},
{"name":"Pteridospermatophyta",
"children":[]
},
{"name":"Coniferophyta",
"children":[]
},
{"name":"Cycadophyta",
"children":[]
},
{"name":"Ginkgophyta",
"children":[]
},
{"name":"Gnetophyta",
"children":[]
},
{"name":"Anthophyta",
"children":[]
}
]
},
{"name":"fungi",
"children":[{
"name": "Chytridiomycota",
"children": []
},
{
"name":"Deuteromycota",
"children":[]
},
{
"name":"Zygomycota",
"childre":[]
},
{
"name":"Glomeromycota",
"children":[]
},
{
"name":"Ascomycota",
"children":[]
},
{
"name":"Basidiomycota",
"children":[]
}
]
}
]
},
{"name":"bacteria",
"children":[{
"name": "bacteria",
"children": [
{"name":"acidobacteria",
"children":[]
},
{"name":"actinobacteria",
"children":[]
},
{"name": "aquificae",
"children":[]},
{"name":"Bacteroidetes",
"children":[]},
{"name":"caldiserica",
"children":[]},
{"name":"chlamidae",
"children":[]},
{"name":"chlorobi",
"children":[]},
{"name":"chloroflexi",
"children":[]},
{"name":"chrysiogenetes",
"children":[]},
{"name":"cyanobacteria",
"children":[]},
{"name":"deferribacteres",
"children":[]},
{"name":"deinococcus-thermus",
"children":[]},
{"name":"dictyoglomi",
"children":[]},
{"name":"elusimicrobia",
"children":[]},
{"name":"fibrobateres",
"children":[]},
{"name":"firmicutes",
"children":[]},
{"name":"fusobacteria",
"children":[]},
{"name":"Gemmatimonadetes",
"children":[]},
{"name":"Lentisphaerae",
"children":[]},
{"name":"nitrospira",
"children":[]},
{"name":"Planctomycetes",
"children":[]},
{"name":"Proteobacteria",
"children":[]},
{"name":"Spirochaetes",
"children":[]},
{"name":"Synergistetes",
"children":[]},
{"name":"Tenericutes",
"children":[]},
{"name":"Thermodesulfobacteria",
"children":[]},
{"name":"Thermomicrobia",
"children":[]},
{"name":"Thermotogae",
"children":[]},
{"name":"verrucomicrobia",
"children":[]}
]
}]
}
]
}

Click anywhere to zoom in! Click on the top bar to zoom out. Built with D3.js.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Partition - Icicle</title>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js"></script>
<style type="text/css">
rect {
stroke: #fff;
}
</style>
</head>
<body>
<div id="chart"></div>
<script type="text/javascript">
var w = 960,
h = 500,
x = d3.scale.linear().range([0, w]),
y = d3.scale.linear().range([0, h]),
color = d3.scale.category20c();
var vis = d3.select("#chart").append("svg:svg")
.attr("width", w)
.attr("height", h);
var partition = d3.layout.partition()
.children(function(d) { return isNaN(d.value) ? d3.entries(d.value) : null; })
.value(function(d) { return d.value; });
d3.json("readme.json", function(json) {
var rect = vis.selectAll("rect")
.data(partition(d3.entries(json)[0]))
.enter().append("svg:rect")
.attr("x", function(d) { return x(d.x); })
.attr("y", function(d) { return y(d.y); })
.attr("width", function(d) { return x(d.dx); })
.attr("height", function(d) { return y(d.dy); })
.attr("fill", function(d) { return color((d.children ? d : d.parent).data.key); })
.on("click", click);
function click(d) {
x.domain([d.x, d.x + d.dx]);
y.domain([d.y, 1]).range([d.y ? 20 : 0, h]);
rect.transition()
.duration(750)
.attr("x", function(d) { return x(d.x); })
.attr("y", function(d) { return y(d.y); })
.attr("width", function(d) { return x(d.x + d.dx) - x(d.x); })
.attr("height", function(d) { return y(d.y + d.dy) - y(d.y); });
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment