Skip to content

Instantly share code, notes, and snippets.

@masakick

masakick/index.html

Last active January 17, 2018 11:37
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save masakick/04ad1502068302abbbcb to your computer and use it in GitHub Desktop.
Save masakick/04ad1502068302abbbcb to your computer and use it in GitHub Desktop.
Download ZIP
d3.js treemap sample
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<link type="text/css" rel="stylesheet" href="style.css"/>
<script src="http://d3js.org/d3.v3.min.js"></script>
<style type="text/css">
.chart {
display: block;
margin: auto;
margin-top: 40px;
}
text {
font-size: 11px;
}
rect {
fill: none;
}
</style>
</head>
<body>
<div id="body">
<div id="footer">
d3.layout.treemap
<div class="hint">click or option-click to descend or ascend</div>
<div><select>
<option value="total">total</option>
<option value="building">building</option>
<option value="ground">ground</option>
<option value="cash">cash</option>
</select></div>
</div>
</div>
<script type="text/javascript">
var w = 1280 - 80,
h = 800 - 180,
x = d3.scale.linear().range([0, w]),
y = d3.scale.linear().range([0, h]),
color = d3.scale.category20c(),
root,
node;
var treemap = d3.layout.treemap()
.round(false)
.size([w, h])
.sticky(true)
// .value(function(d) { return d["好き度"]; });
.value(function(d) { return d.total; });
var svg = d3.select("#body").append("div")
.attr("class", "chart")
.style("width", w + "px")
.style("height", h + "px")
.append("svg:svg")
.attr("width", w)
.attr("height", h)
.append("svg:g")
.attr("transform", "translate(.5,.5)");
//d3.json("kinoko_takenoko.json", function(data) {
d3.json("party_asset.json", function(data) {
node = root = data;
console.log(data);
var nodes = treemap.nodes(root)
.filter(function(d) {return !d.children; });
var cell = svg.selectAll("g")
.data(nodes)
.enter().append("svg:g")
.attr("class", "cell")
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
.on("click", function(d) { return zoom(node == d.parent ? root : d.parent); });
cell.append("svg:rect")
.attr("width", function(d) { return d.dx - 1; })
.attr("height", function(d) { return d.dy - 1; })
.style("fill", function(d) {return color(d.parent.name); });
cell.append("svg:text")
.attr("x", function(d) { return d.dx / 2; })
.attr("y", function(d) { return d.dy / 2; })
.attr("dy", ".35em")
.attr("text-anchor", "middle")
.text(function(d) { return d.name; })
.style("opacity", function(d) { d.w = this.getComputedTextLength(); return d.dx > d.w ? 1 : 0; });
d3.select(window).on("click", function() { zoom(root); });
d3.select("select").on("change", function() {
//treemap.value(this.value == "size" ? size : count).nodes(root);
treemap.value((this.value == "total") ? total : (this.value == "building") ? building : (this.value == "ground") ? ground : cash).nodes(root);
zoom(node);
});
});
function size(d) {
return d.size;
}
function total(d) {
return d.total;
}
function building(d) {
return d.building;
}
function ground(d) {
return d.ground;
}
function cash(d) {
return d.cash;
}
function count(d) {
return 1;
}
function zoom(d) {
var kx = w / d.dx, ky = h / d.dy;
x.domain([d.x, d.x + d.dx]);
y.domain([d.y, d.y + d.dy]);
var t = svg.selectAll("g.cell").transition()
.duration(d3.event.altKey ? 7500 : 750)
.attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; });
t.select("rect")
.attr("width", function(d) { return kx * d.dx - 1; })
.attr("height", function(d) { return ky * d.dy - 1; })
t.select("text")
.attr("x", function(d) { return kx * d.dx / 2; })
.attr("y", function(d) { return ky * d.dy / 2; })
.style("opacity", function(d) { return kx * d.dx > d.w ? 1 : 0; });
node = d;
d3.event.stopPropagation();
}
</script>
</body>
</html>
Raw
party_asset.json
{
"name":"diet",
"children":
[
{
"name":"A党",
"children":
[
{
"name": "pesonA",
"ground":"100",
"building":"200",
"cash":"300",
"total":"600"
},
{
"name": "pesonB",
"ground":"10",
"building":"20",
"cash":"300",
"total":"330"
}
]
},
{
"name":"B党",
"children":
[
{
"name": "pesonC",
"ground":"200",
"building":"10",
"cash":"100",
"total":"310"
},
{
"name": "pesonD",
"ground":"50",
"building":"30",
"cash":"10",
"total":"90"
}
]
}
]
}
Raw
style.css
body {
overflow: hidden;
margin: 0;
font-size: 14px;
font-family: "Helvetica Neue", Helvetica;
}
#chart, #header, #footer {
position: absolute;
top: 0;
}
#header, #footer {
z-index: 1;
display: block;
font-size: 36px;
font-weight: 300;
text-shadow: 0 1px 0 #fff;
}
#header.inverted, #footer.inverted {
color: #fff;
text-shadow: 0 1px 4px #000;
}
#header {
top: 80px;
left: 140px;
width: 1000px;
}
#footer {
top: 680px;
right: 140px;
text-align: right;
}
rect {
fill: none;
pointer-events: all;
}
pre {
font-size: 18px;
}
line {
stroke: #000;
stroke-width: 1.5px;
}
.string, .regexp {
color: #f39;
}
.keyword {
color: #00c;
}
.comment {
color: #777;
font-style: oblique;
}
.number {
color: #369;
}
.class, .special {
color: #1181B8;
}
a:link, a:visited {
color: #000;
text-decoration: none;
}
a:hover {
color: #666;
}
.hint {
position: absolute;
right: 0;
width: 1280px;
font-size: 12px;
color: #999;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment