Skip to content

Instantly share code, notes, and snippets.

@milafrerichs
Last active December 16, 2015 14:49
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save milafrerichs/3a5bdb5281c5a5e7fb38 to your computer and use it in GitHub Desktop.
Treemap with d3
<!DOCTYPE html>
<html>
<head>
<title>Treemap with d3</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script type="text/javascript" src="treemap.js"></script>
<script type="text/javascript">
jQuery(function() {
treemap();
});
</script>
<style>
.node {
border: solid 1px white;
font: 12px sans-serif;
line-height: 12px;
overflow: hidden;
position: absolute;
text-indent: 2px;
}
</style>
</head>
<body>
</body>
</html>
@treemap = ->
width = 600
height = 600
d_data = {name: "skills",children: [{name: "Ruby", skill_level: 70}, {name: "Javascript", skill_level: 90}, {name: "R", skill_level: 20}, {name: "Objective-C", skill_level: 60}, {name: "Python", skill_level: 60}] }
div = d3.select("body").append("div").attr("id","treemap")
color = d3.scale.category20c()
treemap = d3.layout.treemap()
.size([width, height])
.sticky(true)
.padding(10)
.value((d) -> d.skill_level )
node = div.datum(d_data).selectAll(".node")
.data(treemap.nodes)
.enter().append("div")
.attr("class", "node")
.style("background", (d) -> if d.children then null else color(d.name))
.style("left", (d) -> d.x + "px")
.style("top", (d) -> d.y + "px")
.style("width", (d) -> Math.max(0, d.dx - 1) + "px")
.style("height", (d) -> Math.max(0, d.dy - 1) + "px")
.text((d) -> if d.children then null else d.name)
(function() {
this.treemap = function() {
var color, d_data, div, height, node, treemap, width;
width = 600;
height = 600;
d_data = {
name: "skills",
children: [
{
name: "Ruby",
skill_level: 70
}, {
name: "Javascript",
skill_level: 90
}, {
name: "R",
skill_level: 20
}, {
name: "Objective-C",
skill_level: 60
}, {
name: "Python",
skill_level: 60
}
]
};
div = d3.select("body").append("div").attr("id", "treemap");
color = d3.scale.category20c();
treemap = d3.layout.treemap().size([width, height]).sticky(true).padding(10).value(function(d) {
return d.skill_level;
});
return node = div.datum(d_data).selectAll(".node").data(treemap.nodes).enter().append("div").attr("class", "node").style("background", function(d) {
if (d.children) {
return null;
} else {
return color(d.name);
}
}).style("left", function(d) {
return d.x + "px";
}).style("top", function(d) {
return d.y + "px";
}).style("width", function(d) {
return Math.max(0, d.dx - 1) + "px";
}).style("height", function(d) {
return Math.max(0, d.dy - 1) + "px";
}).text(function(d) {
if (d.children) {
return null;
} else {
return d.name;
}
});
};
}).call(this);
// Generated by CoffeeScript 1.5.0-pre
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment